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 acts as an entry point for the browser, declaring which files/resources/permissions will be used.
Background scripts — they contain the logic that is not strictly related to a 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 manipulate the DOM exactly like a normal script can.
UI components — they include all the parts that allow 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, JS, CSS)
Extension pages - They are additional pages used to handle specific user interactions.
Web-extension toolbox#
As with many browser APIs, the web extension APIs can also behave differently according to the browser on which they are executed. In case of cross-browser development, the web-extension polyfill developed by Mozilla could be handy.
Furthermore, to ease the development process, there is also the web-extension toolbox and its related yeoman generator. Among other things, it provides the following functionalities:
- Compiles the extension via webpack to
dist/<vendor> - Watches all extension files and re-compiles on demand
- Reloads the extension or extension page as soon as something changes
After answering some questions, it generates a ready-to-run web extension.
Development#
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.
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’ve already started mine ;-)