WebExtension status after Firefox 57!

Discover the new APIs to create browser extensions

WebExtension status after Firefox 57

Daniele Scasciafratte

It's me, Mario ehm Daniele!

Me
Firebug > DevTools
Foxmarks >
Bookmark Syncing
Faviconize Tab >
Tab Pinning

Multizilla > Tab Browsing
Session Manager > Session Restore
Test Pilot

Add-ons are important in Firefox

System addons and Test Pilot (http://testpilot.firefox.com).

DevTools can be developed today as an extension inside Firefox (and extended too).

Addons Marketplace or AMO

2017 Stats of Addons.Mozilla.org

roughly 50% of users have add-ons

26000 add-ons

19000 extension developers

12 million monthly users on AMO

Firefox still the most customizable browser (?)

Bye Bye
XUL/XPCOM

Today WebExtensions 1.0

  • Standard HTML, CSS and JavaScript
  • Stability because is a different API respect to XUL/XPCOM
  • Parity with Chrome Extensions API
  • On Windows the extension have their own process (from Firefox 56)
  • Multiprocess compatible out-the-box
  • Support for Firefox for Android
  • Sandboxing
  • Chrome, Opera, Edge supported!

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.

PageAction API

You can listen for clicks on the icon, or specify a popup that will open when the icon is clicked.

Example PageAction API

https://addons.mozilla.org/it/firefox/addon/share-backported/

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.

Tabs API

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

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

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

Review on AMO

Today they are automatical (there will be a manual review after the approval), so release an extension is FAST like Quantum!

Say Bye Bye too long review time of weeks!

Roadmap 2018

  • createSidebarPanel for Developer Tools in Firefox 57.
  • find to search in all the pages in Firefox 57.
  • Privacy API with more options for extensions on Firefox 57/58.
  • Theme API in Firefox 58 with more options on 59!
  • Improved XHR/Fetch requests to use a sessions/headers of a specific frame in Firefox 58!
  • Better permission management in Firefox for Android 58!
  • Tab hiding is back on Firefox 59!
  • Register Content Scripts at runtime in Firefox 59!
  • Override of proxy settings by API in Firefox 59.
  • Pageactions can be shown/hidden automatically by url pattern on manifest.json in Firefox 59.
  • browserSettings is becoming better at every new release :-D
  • WebExt experiments bundled in the same extension (missing docs).
  • More performance and improving!

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 45 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/
https://www.extensiontest.com/

W3C standard still in progress!


https://browserext.github.io/

News from W3C

Link

Questions?

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