Creating a Firefox Web Extension with web-ext

Maybe you saw it: I created a web extension for the popular Firefox Browser – specifically for the Android version of the browser. It does a simple thing (and it’s a fork of a fork of an example extension): The extension changes the user agent string when you browse google. Here’s what I learned on the way.First of all, I learned about the file structure of a web extension. It has a manifest, JavaScript files and folders with images in it. The manifest file contains informations about the extension. Also, it contains the permissions it requires. A permission is not only required for the different APIs (like the one to intercept a request or to open a new tab) but also for each and every website the extension will work with.

The good thing is: If the extension should run on any webpage, there’s a wildcard for that. The bad thing is: There’s no wildcard for TLDs (like .at, .com, .cu,…) This means that, if you want the extension to run on any google webpage, you need to write that to your manifest. You have to request the permission for *.google.at, *.google.com and for every other toplevel domain. However, the user himself won’t be bothered with granting those permissions.

Manifests as well as the whole extension can be localized, but thats a story for another day. Let’s have a look at web-ext: It’s a nifty node package, living in your command line and performing some very neat tasks, like running your extension and informing the browser about an update every time you change the code (which is extremely helpful when developing the extension).

At first I made a mistake, I thought that you have to web-ext build first and then do web-ext run. But it turned out, that web-ext run also “builds” the extension, meaning that web-ext build is for building before deploying only.

One more thing about web-ext: If you’re running web-ext run, it tries to start the standard Firefox version on your PC. If you don’t have that version, web-ext will fail even if you have a different version, like the Developer Editon installed. You have to explicitly specify any other edition of firefox like so: web-ext run --firefox=firefoxdeveloperedition

Lastly, the community is working on a feature that allows web-ext to run the extension you created on an android device, just like on your desktop browser which makes developing extensions for Firefox for Android easier.