This document introduces browser extensions and the move from XPCOM/XUL-based Firefox add-ons to the new WebExtensions API. It discusses how WebExtensions are built using standard web technologies like JavaScript, HTML and CSS rather than XPCOM, making extensions easier to develop, more secure, and compatible across browsers. The anatomy of a WebExtension is described, including background pages, content scripts, browser actions, and manifest files which define extension metadata and permissions.

1. Building Browser
Extensions
A New way to Start Addons development

2. Firefox Add-ons
● Add-ons are a powerful way for people to personalize
their web experience.
● Source of inspiration for Firefox features.
● Part of Firefox from the beginning
Firebug > DevTools
FoxMarks > Bookmark Sync

3. Firefox add-on platform
● Firefox add-ons are built on top of the internals of the
Firefox platform.
● XUL / XPCOM are the same tech Firefox is built on.
● Not a real API.

4. Problems with add-on platform
● Takes tooo long for reviewing.
● Very different compared to other browsers.
○ Chrome, Opera are running with Javascript, still now Firefox
Add-ons are running with XUL/XPCOM

5. WebExtensions
● Extensions are bits of code that modify the functionality
of a web browser.
● They are written using standard Web technologies -
JavaScript, HTML, and CSS - plus some dedicated
JavaScript APIs.

6. Why the move to WebExtensions
Openess: Write once for Firefox and run with other majore
browsers.
Easy: WebExtension can be written even with just manifest
file and script file describing how it works.
Future-proof:XPCOM/XUL add-ons are can break with
browser updates
Secure: XPCOM could introduce security and stability issues.

7. One to Rule All

8. Anatomy
● background pages: implement long-running logic
● content scripts: interact with web pages
● browser action files: implement toolbar buttons
● web accessible resources: make packaged content
accessible to web pages and content scripts (like
image,stylesheet,scripts)

9. manifest.json
● Manifest file is a mandatory file for every extension
● They say the meta data (like icon, description, scripts) of a
WebExtension

10. Basic manifest.json explained
{
"description": "25 character describing the addons”,
"manifest_version": 2, // Version of the Manifest (set by Mozilla)
"name": "New addon", // Name of the Addon
"version": "1.0", // Version of the addon, each update you should increment the number
"icons": {
"48": "icons/beasts-48.png",
"96": "icons/beasts-96.png"
},
"permissions": [
"activeTab" // API which we need permission
]
}

11. Reach me
Website : https://iamvp7.github.io/
Twitter : http://twitter.com/iamvp7

12. Thank you
Viswaprasath (iamvp7)