45 minute to Browser Super Powers

Discover the new APIs based from Chrome to create extensions

45 minute to Browser Super Powers

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

Firefox is the most customizable browser

Add-ons are important in Firefox

Go Faster or System addons (https://wiki.mozilla.org/Firefox/Go_Faster) and Test Pilot (http://testpilot.firefox.com).

These projects show how the addons are important in Firefox.

For addons developers is important to show how the APIs are powerful.


2017 Stats of Addons.Mozilla.org

40% of users have add-ons

30000 add-ons

19000 extension developers

12 million monthly users on AMO

XUL/XPCOM

XUL is a XML technology used for the Firefox interface.

XPCOM is a JavaScript framework to interact with XUL with an APIs differents from the classic HTML5.

That technologies are used internally so they can change from a release to another!

For a Web Developer is difficult to learn these technology respect the classic HTML, CSS and JavaScript.

Welcome WebExtensions 1.0!

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 - 2017 Stats

In the Chrome Web Store is automatically the release of an extension after an hour but require to buy the account for 5$ (and the interface for developers is very ugly).

Roadmap

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 39 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, validation and packaging.

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

Pack-ext

https://github.com/Mte90/Script/blob/master/pack-ext.py

Package the file as Zip package for Chrome and Xpi for Firefox.

pack-ext.py ./

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 in progress!


https://browserext.github.io/

Link

Questions?

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