Cross Browser Extensions

Geekcamp Singapore 2019

Jyotsna Gupta

  • Mozilla Representative
     
  • Add-ons Content Reviewer
     
  • Featured Add-ons Advisory Board Member
     
  • Judge at Firefox Quantum Extension Challenge'18
     
  • 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 WebExtensions?

@imJenal

Anatomy of Web Extensions

@imJenal

manifest.json

{
	"manifest_version": 2,
	"name": "PrivateX",
	"version": "0.0.1",
	"description": "Summary of PrivateX.",
	 "homepage_url": "https://github.com/jyotsna17gupta/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/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 WebExtension APIs

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

@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": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/choose_beast.html"
}

@imJenal

Page action

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

@imJenal

Options Page

  • Helps you to define 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": "PrivateX",
    "message": "This website is tracking you!",
  });

@imJenal

Alarms API

const delayInMinutes = 5;
const periodInMinutes = 2;

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

@imJenal

Tabs API

function onCreated(tab) {
  console.log(`Created new tab: ${tab.id}`)
}

function onError(error) {
  console.log(`Error: ${error}`);
}

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


function handleCreated(tab) {
  console.log(tab.id);
}

browser.tabs.onCreated.addListener(handleCreated);

@imJenal

function onCreated(windowInfo) {
  console.log(`Created window: ${windowInfo.id}`);
}

function onError(error) {
  console.log(`Error: ${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

Debug your add-on

@imJenal

Tools

@imJenal

@imJenal

https://webextensions.tech/

Web Extensions UI

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

Publish your Add-on

@imJenal

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

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

Resources:

@imJenal

Need help?

IRC Channels: #webextensions, #extdev, #addons

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

Telegram: @addonschat

@imJenal

Questions?

@ imJenal 

Cross Browser Add-ons : Workshop

By Jyotsna Gupta

Made with Slides.com

Cross Browser Add-ons : Workshop

GeekCamp Singapore 2019

  • 972

More from Jyotsna Gupta