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

Agenda

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?

Everyday..

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

WebExtensions

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

https://developer.mozilla.org

Anatomy/Architecture of WebExtensions

manifest.json

{
  "manifest_version": 2,
  "name": "Beastify",
  "version": "1.0",
  "description": "Super awesome Add-on for super awesome people",
  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
  "icons": {
    "48": "icons/beasts-48.png"
  },
  "permissions": [
    "activeTab"
  ],
  "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": [
    "beasts/frog.jpg",
    "beasts/turtle.jpg"
  ]
}

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": ["*://*.mozilla.org/*"],
    "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.

browser.browserAction.onClicked.addListener(handleClick);

Page action

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

browser.pageAction.onClicked.addListener(handleClick);

Other UI Elements

Sidebar
DevTools
Notification
Addressbar Suggestions

Web-accessible resources

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

Publishing your Add-on

https://addons.mozilla.org/en-US/developers/

Debugging your add-on

Publishing your Add-on

https://addons.mozilla.org/en-US/developers/

Need help?

IRC Channels: #webextensions, #extdev, #addons

Mailing List: https://mail.mozilla.org/listinfo/dev-addons

Telegram: @addonschat

Merci!

Karthickeyan Narasimhan | @hellokarthic | mail@karthic.in

Building a Cross Browser Extension with JS

By Karthickeyan Narasimhan

Building a Cross Browser Extension with JS

Mozilla TS Meet 2019, Paris, France

1,062

Karthickeyan Narasimhan

Lead Software Engineer @ Freshworks