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:
- 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?
You must be logged in to post a comment.