DEV Community

Cover image for Browser Extension Development
Antonio Morrone
Antonio Morrone

Posted on • Originally published at antomor.com

3 2

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

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)