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.
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 am already mine ;-)
