WebExtension's Anatomy

How works the browser's extensions

WebExtension's Anatomy

Daniele Scasciafratte

It's me, Mario ehm Daniele!

Me

Firefox is the most customizable browser

WebExtensions features

The basics

manifest.json

					{
					"manifest_version": 2,
					"name": "Borderify",
					"version": "1.0",
					"description": "Adds a solid red [...]",
					"icons": { [...] }
					"content_scripts": [ {
					   "matches": ["*://*.mozilla.org/*"],
					   "js": ["borderify.js"]
					} ]
					}
				
This is the ID card of an extension and the data are the same also of a Greasemonkey script because they are Content Scripts (in this example)!

Container API

Containers is a feature that lets you separate your work, shopping or personal browsing without having to clear your history, log in and out, or use multiple browsers.
Container tabs are like normal tabs except the sites you visit will have access to a separate slice of the browser's storage. This means your site preferences, logged in sessions, and advertising tracking data won't carry over to the new container. Likewise, any browsing you do within the new container will not affect your logged in sessions, or tracking data of your other containers.

Communicate between extensions

About:newtab customizable

					"chrome_url_overrides" : {
					  "newtab": "my-new-tab.html"
					}
				
Actually Chrome API support also bookmarks and history.

oAuth

Example OAuth

Native Messaging

My_native_app.json

					{
					  "name": "ping_pong",
					  "description": "Example host for native messaging",
					  "path": "/path/to/native-messaging/app/ping_pong.py",
					  "type": "stdio",
					  "allowed_extensions": [ "ping_pong@example.org" ]
					}
				

JS code

					var port = browser.runtime.connectNative("ping_pong");
					port.onMessage.addListener((response) => {
					  console.log("Received: " + response);
					});
					browser.browserAction.onClicked.addListener(() => {
					  console.log("Sending:  ping");
					  port.postMessage("ping");
					});
				

Example Native Messaging

https://addons.mozilla.org/en-US/firefox/addon/kde_connect/

https://addons.mozilla.org/en-US/firefox/addon/keepassxc-browser/

https://addons.mozilla.org/en-US/firefox/addon/midi-input-provider/

https://addons.mozilla.org/en-US/firefox/addon/withexeditor/

https://addons.mozilla.org/en-US/firefox/addon/web2mp3/

Print Preview

tabs.print() to open the Print Window and tabs.printPreview() to open the preview of the actual tab for printing.
tabs.saveAsPDF(), well ehm, this API save the tab as PDF!

Reader Mode

tabs.toggleReaderMode() to open the tab specified in the Reader Mode/View.

Intercept a HTTP(s) request


function listener(details) {
	let filter = browser.webRequest.filterResponseData(details.requestId);
	let decoder = new TextDecoder("utf-8");
	let encoder = new TextEncoder();

	filter.ondata = event => {
	    let str = decoder.decode(event.data, {stream: true});
	    str = str.replace(/Example/g, 'WebExtension Example');
	    filter.write(encoder.encode(str));
	    filter.disconnect();
	}

	return {};
}

browser.webRequest.onBeforeRequest.addListener(
	listener,
	{urls: ["https://example.com/*"], types: ["main_frame"]},
	["blocking"]
);
                

Tabs API

https://addons.mozilla.org/firefox/addon/tab-invaders/

Background scripts

WebExtensions often need to maintain long-term state, or perform long-term operations, independently of the lifetime of any particular web pages or browser windows. That's what background scripts are for.

Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the WebExtension APIs in the script, as long as you have requested the necessary permissions.

Mozilla Developer Network
Define on manifest.json

Content scripts

Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.

Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.

Mozilla Developer Network
Define on manifest.json

Browser actions

A browser action is a button you can add to the browser toolbar. Users can click the button to interact with your extension.

You can optionally define a popup for the button using HTML, CSS, and JavaScript.

Mozilla Developer Network
Define on manifest.json

Web accessible resources

Web accessible resources are resources such as images, HTML, CSS, JavaScript, that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.

Mozilla Developer Network
Define on manifest.json

We want examples!

  1. https://github.com/mdn/webextensions-examples
  2. or
  3. git clone git@github.com:mdn/webextensions-examples.git
  4. Look all the 60 examples for different APIs!

Try it!

Web-ext

https://github.com/mozilla/web-ext

Command line tool to help build, run, watcher, and test web extensions.

Run an extension from cli, linting, signing, validation and packaging.

web-ext run -s /path/extension/ --firefox-binary=/path/firefox
web-ext build -s /path/extension/

ExtStoreStats

https://github.com/Mte90/ExtStoreStats

Cross the download stats between browser extension marketplace!

https://mte90.github.io/ExtStoreStats/

GitHub Action

To publish on Google Chrome Web Store and Firefox addons

https://github.com/Mte90/GlotDict/blob/master/
							.github/workflows/deploy.yml

W3C standard still in progress!


https://browserext.github.io/

Link

Questions?

Red panda (Firefox)
Daniele Scasciafratte | @Mte90Net | Slides: mte90.github.io/Talk-WebExt/