Cross Browser Extensions

JavaScript & Friends 2019

Jyotsna Gupta

  • Software Developer at CoffeeBeans
     
  • Mozilla Tech Speaker
     
  • Mozilla Representative
     
  • Add-ons Content Reviewer
     
  • Featured Add-ons Advisory Board Member
     
  • Judge at Firefox Quantum Extension Challenge'2018
     
  • Firefox Add-ons Mentor

@imJenal

  • Browser Add-ons
     
  • Web Extensions
     
  • Anatomy of Web Extensions
     
  • Web Extension API's
     
  • Porting your web extension

Agenda

@imJenal

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

Browser Add-ons?

@imJenal

Text

@imJenal

Source: theedublogger.com

@imJenal

@imJenal

Ghostery

@imJenal

Source: https://www.ghostery.com/

@imJenal

PrivateX

@imJenal

@imJenal

Facebook Container

@imJenal

Source: https://addons.mozilla.org/

@imJenal

Tabby Cat

Web Extensions

A cross-browser system for developing browser add-ons

@imJenal

  • Uses standard HTML, CSS and JS

  • e10s compatible (multi-process)

  • With Zero or minimal changes, run it on Chrome, Edge, and Opera

  • Documentations from multiple resources.

Why Web Extensions?

@imJenal

@imJenal

Anatomy of Web Extensions

manifest.json

{
	"manifest_version": 2,
	"name": "PrivateX",
	"version": "0.0.1",
	"description": "Summary of PrivateX.",
	"icons": {
		"32": "icons/icon-32.png",
		"48": "icons/icon-48.png",
	    },
	"permissions": [
		"tabs"
		],
	"page_action": {
		"browser_style": true,
		"default_icon": {
		"48": "icons/icon-48.png"
	       },
	"default_title": "Click here for Private browsing!"
	},
	"background": {
		"scripts": ["background.js"]
	    }
}

@imJenal

Background Scripts

  • Executes as soon as the extension is loaded

  • Stay loaded until the extension is disabled or uninstalled

  • Use any of the WebExtension APIs in the script


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

@imJenal

Content Scripts

  • Similar to loading normal scripts in the page

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

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

"content_scripts": [
  {
    "matches": ["*://*.mozilla.org/*"],
    "js": ["jquery.js", "content-script.js"]
  }
]

@imJenal

Browser action

  • Use this when your add-on's features are applicable to all websites else use Page action instead.
"browser_action": {
  "default_icon": {
    "19": "icon-19.png",
    "48": "icon-48.png"
  },
  "default_title": "Title",
  "default_popup": "popup.html"
}

@imJenal

Page action

  • Use this when features of the add-on are specific to a particular website
"page_action": {
  "default_icon": {
    "16": "icon-16.png",
    "48": "icon-48.png"
  },
  "default_title": "Title",
  "default_popup": "popup.html"
}
]]

@imJenal

Options Page

  • Helps you to define the preferences for your extension that your users can change
"options_ui": {
  "page": "options.html",
  "browser_style": true
},

@imJenal

@imJenal

WebExtension APIs

@imJenal

Few WebExtension APIs

@imJenal

Notifications API

browser.notifications.create(alertUser, {
    "type": "basic",
    "iconUrl": icon.png",
    "title": "Word Count",
    "message": "Words",
  });

@imJenal

Alarms API

const delayInMinutes = 5;
const periodInMinutes = 2;

browser.alarms.create("my-periodic-alarm", {
  delayInMinutes,
  periodInMinutes
});

@imJenal

Tabs API

function onCreated(tab) {...}

function onError(error) {...}

function handleCreated(tab) {...}

browser.browserAction.onClicked.addListener((tab) => {
   var creating = browser.tabs.create({
    url:"https://example.org"
  });
  creating.then(onCreated, onError);
});

browser.tabs.onCreated.addListener(handleCreated);

@imJenal


function onCreated(windowInfo) {...}

function onError(error) {...}

browser.browserAction.onClicked.addListener((tab) => {
  var creating = browser.windows.create({
    url: ["https://developer.mozilla.org",
          "https://addons.mozilla.org"]
  });
  creating.then(onCreated, onError);
});

Windows API

@imJenal

webRequest API

@imJenal

var target = "https://developer.mozilla.org/*";

function logResponse(responseDetails) {
  console.log(responseDetails.url);
  console.log(responseDetails.statusCode);
}

browser.webRequest.onCompleted.addListener(
  logResponse,
  {urls: [target]}
);

Sequence of events

@imJenal

@imJenal

Security

chrome.browserAction.setIcon();
browser.browserAction.setIcon();

@imJenal

Porting add-ons

@imJenal

https://webextensions.tech/

Web Extensions UI

@imJenal

https://webextensions.tech/

web-ext

A command line tool to help build, run, and test WebExtensions.

@imJenal

npm install --global web-ext
  • web-ext run: Run the extension
  • web-ext lint: Validate the extension source
  • web-ext build: Packaging your extension

Debug your add-on

@imJenal

Publish Your Add-on

@imJenal

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

https://bit.ly/publish-firefox-addon

 

Resources

@imJenal

@imJenal

Need Help?

IRC Channels: #webextensions, #extdev, #addons

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

Telegram: @addonschat

@ imJenal 

Cross Browser Add-ons : Talk

By Jyotsna Gupta

Made with Slides.com

Cross Browser Add-ons : Talk

JavaScript & Friends conf | Columbus | August 2, 2019

  • 944

More from Jyotsna Gupta