Antomor logo

Antomor's personal website.

Where ideas become words (maybe)


2-Minute Read

People on a desk

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:

  • 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.


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


As easy as running npm run build <vendor_name>.


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


comments powered by Disqus

Recent Posts



Software Engineer passionate about Security and Privacy. Nature and animals lover. Sports (running, yoga, boxing) practitioner.