In this article we'll walk through creating a WebExtension for Firefox, from start to finish. The add-on just adds a red border to any pages loaded from "mozilla.org" or any of its subdomains.
The source code for this example is on GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.
First, you'll need Firefox version 45 or later.
Writing the WebExtension
Create a new directory and navigate to it:
mkdir borderify cd borderify
manifest.json
Now create a new file called "manifest.json" directly under the "borderify" directory. Give it the following contents:
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a solid red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}
- The first three keys:
manifest_version,name, andversion, are mandatory and contain basic metadata for the add-on. descriptionis optional, but recommended: it's displayed in the Add-on Manager.iconsis optional, but recommended: it allows you to specify an icon for the add-on, that will be shown in the Add-ons Manager.
For certain Firefox versions, an additional key called applications may need to be added in manifest.json:
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "42.0",
"strict_max_version": "50.*",
"update_url": "https://example.com/updates.json"
}
}The most interesting key here is content_scripts, which tells Firefox to load a script into Web pages whose URL matches a specific pattern. In this case, we're asking Firefox to load a script called "borderify.js" into all HTTP or HTTPS pages served from "mozilla.org" or any of its subdomains.
icons/border-48.png
The add-on should have an icon. This will be shown next to the add-on's listing in the Add-ons Manager. Our manifest.json promised that we would have an icon at "icons/border-48.png".
Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png". You could use the one from our example, which is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license.
If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the 96 property of the icons object in manifest.json:
"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}Alternatively, you could supply an SVG file here, and it will be scaled correctly.
borderify.js
Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:
document.body.style.border = "5px solid red";
This script will be loaded into the pages that match the pattern given in the content_scripts manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.
Testing it out
First, double check that you have the right files in the right places:
borderify/
icons/
border-48.png
borderify.js
manifest.json
Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:
{{EmbedYouTube("cer9EUKegG4")}}
The add-on will now be installed, and will stay until you restart Firefox.
Now try visiting a page under "mozilla.org", and you should see the red border round the page:
{{EmbedYouTube("rxBQl2Z9IBQ")}}
Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the add-on's files by clicking the "Reload" button in about:debugging. You can see the changes right away:
{{EmbedYouTube("NuajE60jfGY")}}
Packaging and publishing
For other people to use your add-on, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your WebExtension".
What's next?
Now you've got an idea of the process of developing a WebExtension for Firefox, try: