Browser Extension Development
Tags: webdev, webextension
Published: 2020-10-10 16:07:09

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

- [no-script](https://noscript.net/) - to block script served from not-trusted domains
- [ublock Origin](https://github.com/gorhill/uBlock#ublock-origin) - it is "a wide-spectrum blocker"
- [dark-mode](https://addons.mozilla.org/it/firefox/addon/dark-mode-zen/) - it changes the appearance of web pages
- [React Developer Tools](https://addons.mozilla.org/it/firefox/addon/react-devtools/) - 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](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars)
  - [popup](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups)
  - [options page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages)

- 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](https://github.com/mozilla/webextension-polyfill/) developed by Mozilla.

Furthermore, to ease the development process, there is also [web-extension toolbox](https://github.com/webextension-toolbox/webextension-toolbox) and its related [yeoman generator](https://github.com/webextension-toolbox/generator-web-extension). 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 planning mine ;-)

### Resources

- [MDN Browser Extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
- [webextension-toolbox](https://github.com/webextension-toolbox/webextension-toolbox)
- [Mozilla web-ext](https://github.com/mozilla/web-ext)