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.

Github Treasure Chest

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?

Related Posts