[A talk at Mozilla Developer Conference in Taiwan] WebExtensions is the new technology for Firefox Add-ons. Learn the important concepts of WebExtensions and how to migrate your Chrome extensions or legacy Firefox Add-on.

1. Extending Firefox
Mozilla Developer Conference
September 22
Evelyn Hung

3. Problem of
Legacy
Addons
Tight coupling!

4. WebExtensions
A cross-browser system for
developing extensions

5. Web technologies
JavaScript, HTML, and CSS
+ a set of JavaScript APIs.
We love it!

6. Benefits
Easier Decoupled
Secure
Cross
Platform

7. Progress
Firefox 41
Firefox 48 Firefox 57
[2015.08]
Only allow validated
and signed addons to
be installed
Communication on
the WebExtensions
APIs
First stable version of
WebExtensions APIs
Add-on developers start
migration and create
WebExtensions addons
Stop running legacy
addons; only support
WebExtensions
Firefox 48 ~ 56 [2017.11][2016.08]
[2015.09]
More WebExtensions
APIs are coming.

8. Percentage of Total Users with X Addons%ofTotalUsers

9. Number of Listed WebExtensions
in AMO by Month
New Add-on Submissions by Month

10. Deep Dive
Technical details

11. manifest.json
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
// Recommended
"description": "An example extension",
"icons": {
"48": "icons/myicon-48.png"
},
// Optional
"browser_action": {
"default_icon": "icons/toolbar.png",
"default_popup": "popup/popup.html"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["myscript.js"]
}
],
"permissions": ["storage"]
}

12. manifest.json
Content scripts
myscript.js
Popup
Browser action
toolbar.png
popup.jspopup.htmlpopup.html
Web accessible
resource
popup.jspopup.htmlresource.jpg
myicon.png
Icons
applications
author
background
browser_action
chrome_settings_overrides
chrome_url_overrides
commands
content_scripts
content_security_policy
default_locale
description
developer
devtools_page
homepage_url
icons
incognito
manifest_version
name
omnibox
optional_permissions
options_ui
page_action
permissions
protocol_handlers
short_name
sidebar_action
theme
version
web_accessible_resources
A simple
extension
structure

13. Messaging
content_script.js
other pages...
popup.html
tabs.sendMessage
tabs.connect runtime.sendMessage
runtime.connect
runtime.sendMessage
runtime.connect
Extension UI
Webpage Context

14. UI
component
Sidebar
Toolbar
Bundled web page
Address bar Context menu

15. UI
component Notifications
Options page Developer tool panels
Address bar suggestions

16. JavaScript API Overview
alarms
bookmarks
browserAction
browserSettings
browsingData
commands
contextMenus
contextualIdentities
cookies
devtools.inspectedWindow
devtools.network
devtools.panels
downloads
events
extension
extensionTypes
history
i18n
identity
idle
management
notifications
omnibox
pageAction
permissions
privacy
proxy
runtime
sessions
sidebarAction
storage
tabs
theme
topSites
types
webNavigation
webRequest
windows

17. Debugging
Background scripts
Popups
Options pages
Add-on Debugger
Web Developer Tool
about:debugging
Content scripts
你最熟悉的

18. select iframe disable popup
Add-on Debugger about:debugging Tips

19. Porting Google Chrome Extension
Review your use of
manifest.json features and
WebExtension APIs
Install your extension in
Firefox and test it out
Submit your add-on to
AMO for signing and
distribution
Review Install & Test Submit

20. Chrome Incompatibilities
Namespace: "chrome" v.s. "browser" (we support both!)
Callback v.s. Promise (we support both!)
Partially supported APIs
Different implementation
APIs Incompatibility
manifest.json keys

21. https://www.extensiontest.com/

22. Porting Legacy Add-on
Update is a permanent one-way trip
Photo by Dmitri Popov on Unsplash

23. Porting Legacy Add-on
Review Rewrite Submit
What APIs you need Test carefully! With the same ID

24. * Not a multi-window environment
* No physical keyboard
* Optimized UI for smaller screens
WebExtensions on Android
A subset of the WebExtensions APIs
available.
Designs on mobile

25. Continued Work
Promotion
campaign
Improve AMO and
developer hub
Tab API and
more APIs

26. Please follow our progress.
There’s good stuff published regularly.
https://blog.mozilla.org/addons/
部落格持續有最新消息喔！

27. Are We WebExtensions Yet?
➔ Documentation - https://mzl.la/webextensions
➔ Add-on Store - https://addons.mozilla.org
➔ Blog - https://blog.mozilla.org/addons/
We are READY!