How to make a Firefox Extension after more than a decade after I never got started to doing so …

This is where to start your journey if you’re late to the party like me.

You come to learn about this node package that lets you easily create scaffoldings:

% npm install -g create-web-ext

That way you can make a new extension with an interactive set of prompts:

% create-web-ext

My guess is that I did this wrong … but that is why we learn.

I see. That makes a pretty un-useful extension that can’t do anything. When you give it a Y for those items you get a commensurate folder structure like:

myAddon
   ├── background_script.js
   ├── browserAction
   │   ├── index.html
   │   ├── script.js
   │   └── style.css
   ├── content_script.js
   ├── icons
   │   └── icon.png
   ├── manifest.json
   ├── options
   │   ├── index.html
   │   ├── script.js
   │   └── style.css
   └── pageAction
       ├── index.html
       ├── script.js
       └── style.css

Let’s take this apart and understand WTH I was being asked in the first place. Shall we?

  • Background script: background_script.js file is there
  • Content script: content_script.js file is there
  • Browser action: browserAction folder’s there
  • Page action: pageAction folder’s there
  • Addon options: Hmmm … can’t find what that is …

Then, you want to install web-ext and then when you do the following in the root directory of your extension:

% web-ext run

… then you get to have hot reloading.

Example

This link over here on developer.mozilla has some good fruity content to look over.

In particular it shows how the content_script.js is essentially a flat set of JS directives that get executed. You want to put this inside the js file:

document.body.style.border = "5px solid red";

And the main manifest.json file reads something like this:

{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["content_script.js"]
    }
  ]
}

That’s because it’s triggered based upon the matches directive. Let’s see if this works in reality.

What I did is:

  1. Created the web extension scaffolding
% create-web-ext

2. Then edited the content_script.js file

// Put all the javascript code here, that you want to execute after page load.
document.body.style.border = "5px solid red";

3. Saved it and then ran the runner

web-ext run

4. I pointed the browser to mozilla.org and sure enough …

Okay. That was satisfying. I think I’m hooked … but I’m kinda sad because I recall wanting to do this back in 2009, and I never got off to doing it. Well, nothing like getting started now, huh?