Debug WebExtensions in android

NilkasG · January 30, 2017, 11:59pm

I’d really like to be able to properly debug my WebExtensions in Firefox for Android.

Connecting the WebIDE to my Android phone via adb was amazingly easy, but I could only attach it’s debugger to web pages. I found no option to sideload extensions or even debug their background scripts.

Is there a was to do that?
If can I at least get console messages from the background scripts somehow?
Is there any way to load WebExtensions into the release or beta build of fennec without signing them? (Aurora is somewhat unstable, and signing each new blind attempt is quite annoying)
All ideas and hacks are welcome!

NilkasG · February 3, 2017, 2:29am

I have experimented a bit, and this works quite well:

Connect the WebIDE to your phone from the PC
- I already had adb set up such that adb devices listed my phone
- then I followed this guide
Set up Extension Auto-Installer on the phone
- install the add-on from AMO
- in the WebIDE, click Device Preferences on the right and append the local IP of your PC to extensions.autoinstaller.allowedIPs
Select the Main Process as the debug target in the WebIDE
- to run console scripts in the background page, select it like a frame at the top right of the debugger panel
Push the extension package from the PC
- pack your extension as a zip as you usually do
- push it to your phones local IP
  - the add-on page suggests to use wget or curl
  - I do it from within my build script in node.js, on success the HTTP status is (sometimes?) 399
Accept the extension on the phone
- if everything works so far, dismiss the message that says Blocked Add-on
- tap the new notification to install as a temporary unsigned add-on
Have fun debugging. Repeat steps 4 and 5 as needed.

I did this with Firefox 52 beta x64 on my Windows 10 computer and a OnePlus X running CM 13 (Android 6.0.1), Firefox 52 beta and Extension Auto-Installer 1.3.

noitidart · February 13, 2017, 5:50am

These details are extremely helpful! Thanks so much for it! May you please share the node script, or part of it, that does this. I have always uploaded my extension to a cloud storage then downloaded it on my android, I hate this tedious process.

NilkasG · February 13, 2017, 1:40pm

This is the post section of my build tool. options is read from the command line as a JSON5 object.
The tools API is neither stable nor documented, but I an sure you can read it. You can use it as per MPL-2.0.

github.com

NiklasGollenstede/web-ext-build/blob/cc460c1473001180f04037bb6b0611910ed6a20f/index.js#L115




	if ((options.zip !== false && options.zip !== 0) || options.post) {
		const exclude = outZip.slice(0, outZip.lastIndexOf('-'));
		(yield promisify(require('zip-dir'))(outDir, {
			filter: path => !(path.startsWith(exclude) && (/(?:zip|xpi)$/).test(path)),
			saveTo: outZip,
		}));
		log('Created WebExtension package', outZip);
	}
	if (options.post) {
		if (!HttpRequest.available) { throw new Error(`Can't post file, please install "xhr2"`); }
		const { host, ip, port, } = options.post, url = options.post.url ? options.post.url
		: 'http://'+ (host || ((typeof ip === 'number' ? '192.168.178.'+ ip : ip || 'localhost') +':'+ (port || 8888))) +'';
		doLog && process.stdout.write(`Posting to ${ url } ... `);
		(yield new HttpRequest({ url, method: 'post', body: (yield FS.readFile(outZip)), }).catch(({ target: xhr, }) => {
			if (xhr && (xhr.readyState === 4 || xhr.status === 399)) { return; } // for some reason 399
			log(`failed`);
			throw new Error(`Failed to post package`);
		}));
		log(`done`);
	}

You will also need to add the es6lib and xhr2 dependencies as I do in the project’s package.json.

And the return code really is 399.

andreip · May 30, 2017, 7:05pm

Love it when people answer their own questions on the Internet. Thank you!