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.
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.
- Compiles the extension via webpack to
- 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
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 ;-)