DEV Community

Cover image for Browser Extension Development
Antonio Morrone
Antonio Morrone

Posted on • Originally published at antomor.com

Browser Extension Development

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

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

Discussion (0)