Building a cross browser extension with JS

Paris, France | 15th September 2018

Karthickeyan Narasimhan

Software Developer at Freshworks Technologies Pvt Ltd.

Mozilla Tech Speaker

Mozilla Rep


Follow me @hellokarthic


  • Browser Add-ons
  • WebExtensions
  • Extension API's
  • Anatomy of WebExtension
  • Debug & Publish

Browser Add-ons extend and modify the functionality of the browser.

Browser Add-ons?


  • 1 Million+ addons downloaded
  • 70+ Add-ons published
  • 250 million+ Add-ons used
  • 2000+ users signup


A cross-browser system for developing browser add-ons

  • Uses standard HTML, CSS and JS
  • Few changes and you can run it on Chrome, Edge and Opera
  • e10s compatible (multiprocess)

Why WebExtensions?

Few WebExtension API's

  • alarms
  • tabs
  • storage
  • webRequest
  • notifications
  • and many more...

Anatomy/Architecture of WebExtensions


  "manifest_version": 2,
  "name": "Beastify",
  "version": "1.0",
  "description": "Super awesome Add-on for super awesome people",
  "homepage_url": "",
  "icons": {
    "48": "icons/beasts-48.png"
  "permissions": [
  "browser_action": {
    "default_icon": "icons/beasts-32.png",
    "theme_icons": [{
        "light": "icons/beasts-32-light.png",
        "dark": "icons/beasts-32.png",
        "size": 32
    "default_title": "Beastify",
    "default_popup": "popup/choose_beast.html"
  "web_accessible_resources": [

Background scripts

  • Privileged Scripts

  • Background Scripts run independent of of any tabs

  • Loaded as soon as the extension is loaded

  • Stay loaded until the extension is disabled or uninstalled

  • You can use any of the WebExtension APIs in the script

"background": {
  "scripts": ["background-script.js"]

Content Scripts

  • Similar to loading normal scripts in the page

  • Can access DOM structure and use a small subset of the WebExtension APIs

  • Make cross-domain XHR requests

  • Exchange messages with their background scripts and can in this way indirectly access all the WebExtension APIs

"content_scripts": [
    "matches": ["*://**"],
    "js": ["jquery.js", "content-script.js"]

Browser action

  • Used to add button to browser toolbar
  • Use this when your add-on's features are applicable to all websites else use Page action instead.

Page action

  • Used to add button to address toolbar
  • Use this when your add-on's features are specific to a particular website.

Other UI Elements

  • Sidebar
  • DevTools
  • Notification
  • Addressbar Suggestions

Resources such as images, HTML, CSS, and JavaScript that you include in the extension.

Publishing your Add-on

Debugging your add-on

Publishing your Add-on



Need help?

IRC Channels: #webextensions, #extdev, #addons

Mailing List:

Telegram: @addonschat


Karthickeyan Narasimhan | @hellokarthic |

Building a Cross Browser Extension with JS

By Karthickeyan Narasimhan

Building a Cross Browser Extension with JS

Mozilla TS Meet 2019, Paris, France

  • 883