WebExtension@CityJS

Building a cross browser extension with JS

CityJS India | 18 Feb 2022

Karthickeyan Narasimhan

Lead Software Engineer at Freshworks Inc.

OMSCS student at Georgia Tech

Free & Open Source Evangelist

Mozilla Representative - India

Ex-Mozilla Tech Speaker

Follow me @hellokarthic

Browser Extension

Anything that extend the functionality of the browser. A cross-browser system for developing browser add-ons.

Everyday..

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

What can Extension Do?

Secure Browsing

Better newtab experience

Store & Access passwords easily!

Anything you want!!!

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"
  ]
}

Types of Scripts

Content Script
Background Script

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"]
  }
]

Background scripts

Privileged Scripts
Background Scripts run independently 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"]
}

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

Options Page

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.

Uses standard HTML, CSS and JS
Few changes and you can run it on Chrome, Edge and Opera

WebExtension API

Few WebExtension API's

alarms
tabs
storage
webRequest
notifications
and many more...

https://developer.mozilla.org

about:debugging
about:addons
web-ext tool

Running an Add-on

https://addons.mozilla.org/en-US/developers/
https://chrome.google.com/webstore
https://developer.apple.com/safari/extensions/

Publishing an Addon

Links:

https://developer.mozilla.org/en-US/Add-ons/WebExtensions
https://developer.chrome.com/extensions
https://github.com/mdn/webextensions-examples
https://wiki.mozilla.org/WebExtensions
https://github.com/mozilla/webextension-polyfill
https://tinyurl.com/ff4android
https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

Need help?

IRC Channels: #addons:mozilla.org

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

Twitter: @mozamo

@hellokarthic | nkarthic95@gmail.com