Browser Extension Development

Web extensions or browser plugins can be used to improve browser functionalities. The following examples summarize the different goals they can have:

• no-script - to block script served from not-trusted domains
• ublock Origin - it is "a wide-spectrum blocker"
• dark-mode - it changes the appearance of web pages
• React Developer Tools - to inspect react-specific properties of a page that makes use of React.

Anatomy of an extension

The main components of a browser extension are:

• Manifest.json - it is the only mandatory file and it describes the extension itself. It is as an entry-point for the browser to declare what are the files/resources/permissions will be used.
• Background scripts - They contain the logic that are not strictly related to the single web-page. They are loaded when the extension is loaded and remain active until the extension is disabled or uninstalled.
• Content scripts - Unlike background scripts, they are loaded into web pages, so they can manipulates DOM exactly like normal script can do.

• UI components - They includes all the parts that permit a user to interact with the extension, by means of an HTML document. There are three different UI components:

  • sidebar
  • popup
  • options page

• Web-accessible resources - They include all the resources that are made available to the scripts (e.g. HTML, images, jss, css)

• Extension pages - They are additional pages used to handle specific user interactions.

Web-extension toolbox

As for many browser APIs, also the web extension APIs can behave differently according with the browser on which they are executed. In case of cross-browser development it could be handful web-extension polyfill developed by Mozilla.

Furthermore, to ease the development process, there is also web-extension toolbox and its related yeoman generator. Among the others it provides the following functionalities:

• Compiles the extension via webpack to dist/<vendor>
• Watches all extension files and re-compiles on demand
• Reloads extension or extension page as soon something changed

After answering to some questions, it generates a ready-to-run web extension.

Development

You only need to run npm run dev <vendor_name>, where can be chrome, firefox, opera or edge; now you can load the generated extension in the browser of choice.

Build

As easy as running npm run build <vendor_name>.

Conclusions

So, what are you waiting for? Are you ready to develop your own browser plugin? I am planning mine ;-)

Resources

• MDN Browser Extensions
• webextension-toolbox
• Mozilla web-ext