{"id":16837,"date":"2017-04-06T12:15:00","date_gmt":"2017-04-06T09:15:00","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=16837"},"modified":"2017-04-05T10:47:14","modified_gmt":"2017-04-05T07:47:14","slug":"webextensions-101","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/webextensions-101\/","title":{"rendered":"WebExtensions 101"},"content":{"rendered":"

If you know the basic web technology stack (HTML, JS, and CSS), then you can indeed build a WebExtension<\/a>.<\/p>\n

It wasn\u2019t always this simple. In the past, one might have needed to know C or Objective-C and the internal workings of the browser\u2019s own code or even the operating system\u2019s idiosyncrasies.<\/p>\n

Thankfully, there\u2019s been some recent consolidation efforts and some work toward standardization. If you\u2019re curious about how the actual standards work, be sure to check out the Browser Extension Community Group<\/a> at the W3C<\/a>.<\/p>\n

However, this new collaborative world is still being built. In its current state, there are rough spots and differences (and in-progress polyfills).<\/p>\n

Let\u2019s take a look at what it takes today to actually build a WebExtension for real.<\/p>\n

Anatomy of a WebExtension<\/h2>\n

In my post Building WebExtensions Because You Can<\/a>, you\u2019ll find a description of the primary pieces that make up most WebExtensions. We\u2019ll be using just a handful of the available options and focus on getting one up and running.<\/p>\n

Here\u2019s the Anatomy of a WebExtension chart from Mozilla for handy reference:<\/p>\n

\"\"<\/a>\"\"<\/a><\/p>\n

Let\u2019s start by installing some basic tooling and setting up the folder structure for this example project.<\/p>\n

Tooling<\/h3>\n

To get started, let\u2019s install Mozilla\u2019s web-ext<\/a> command-line tool.<\/p>\n

The web-ext<\/code> command makes it possible to run Firefox with an empty profile (no existing cookies, history, or other extensions). This helps when testing your extension as there will be less to get in the way, and command line console debugging output \u2014 if you prefer that.<\/p>\n

It also serves as a handy way to package WebExtensions into the necessary .zip<\/code> file and (potentially) communicate with the Mozilla Add-ons site to help you set things for signed self-hosted distribution. The .zip<\/code> file it generates also works with the Chrome and Opera add-on stores.<\/p>\n

Let\u2019s use npm to install it as a global command-line tool: sh
\n$ npm install --global web-ext<\/code><\/p>\n

Now. I\u2019m assuming some things here. First, that you have Node.js<\/a> and npm<\/a> installed and available (if you\u2019ve got the one, you\u2019ve got the other, btw).<\/p>\n

Second, I\u2019ll be setting up the project so that it can be used with npm<\/code> for installing dependencies (and such). However, this is a fairly lightweight project with no need for preprocessing or complex dependencies, so we\u2019ll not be using npm<\/code> directly today. Setting the project up this way though, means you\u2019re ready for it when you need it.<\/p>\n

Organized chaos<\/h3>\n

The folder structure below is the one I\u2019ve (mostly) settled on for my WebExtension projects. It provides a foundation for using preprocessors and npm<\/code> for installing dependencies or hooking in all the other node.js<\/code>-style build tooling you might like. Take a look:<\/p>\n

example-webextension\/\r\n+-- extension\/\r\n\u00b6   +-- manifest.json\r\n\u00b6   +-- images\/\r\n\u00b6   |   +-- icon32.png\r\n\u00b6   +-- lib\/\r\n\u00b6   \u00b6   +-- dependency.js\r\n\u00b6   +-- dist\/\r\n\u00b6   \u00b6   +-- nifty.js\r\n\u00b6   +-- popup.js\r\n\u00b6   +-- popup.html\r\n\u00b6   +-- options.html\r\n\u00b6   +-- styles.css\r\n+-- src\/ (optional; for use with typescript, etc)\r\n\u00b6   |   +-- nifty.js (newfangled typescript, etc)\r\n+-- web-ext-artifacts\/\r\n\u00b6   |   +-- example-webextension-0.0.1.zip\r\n+-- package.json\r\n+-- CODE_OF_CONDUCT.md\r\n+-- CONTRIBUTING.md\r\n+-- LICENSE\r\n+-- README.md<\/pre>\n
The extension\/<\/code> folder holds the actual \u201coutput\u201d WebExtension. This is the directory that we\u2019ll package up later to distribute to the various WebExtension stores.<\/p>\n
Inside this directory is the all-important manifest.json<\/code> file. This file is essentially the first thing read by the browser when installing or running the WebExtension. It sets permissions, picks which scripts to inject in pages, defines where the options interface is located, and many other things.<\/p>\n
We\u2019ll dig into that more in a bit, but for now, here\u2019s a look at the other files and folders in that directory:<\/p>\n