Building a cross browser extension with JS

OdessaJS, Ukraine | 21 July 2019

Karthickeyan Narasimhan

Sr. Software Engineer at Freshworks Inc.

Mozilla Tech Speaker

Mozilla Rep

 

Follow me @hellokarthic

Chapter 1: Introduction

  • Browser Extensions
  • What can extensions do?
  • Anatomy of WebExtension
  • Extension API's
  • Security

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
  • e10s compatible (multiprocess)

WebExtension API

Few WebExtension API's

  • alarms
  • tabs
  • storage
  • webRequest
  • notifications
  • and many more...
https://developer.mozilla.org

Security

Play Time

  • about:debugging
  • about:addons
  • web-ext tool

Running an Add-on

Exercise 1: Borderify

Exercise 2: Tab Open

API we used:

 

  • Tabs

Exercise 3: Building Motivational Tab

Exercise 4: Building Power Search Engine

List of API's used:

 

  • Context Menu API
  • Search API
  • Tabs.create API (Tabs API has so many sub-API inside them, we will go through them in future)

Exercise 5: Building Youtube controller

List of API's used:

 

  • Commands API
  • Tabs.query API
  • Tabs.executeScript

Listening to Commands

 

Execute the click scripts

Exercise 6: Building Stackoverflow search

List of API's used:

 

  • Omnibox

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

Need help?

IRC Channels: #webextensions, #extdev, #addons

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

Telegram: @addonschat

@hellokarthic | nkarthic95@gmail.com

WebExtension Workshop @OdessaJS

By Karthickeyan Narasimhan

Made with Slides.com

WebExtension Workshop @OdessaJS

OdessaJS

  • 648

More from Karthickeyan Narasimhan