FIREFOX OS ADD-ON in 10 minutes

ADD-ON IN BROWSER

ADD-ON AS A WEB-BASED OS FEATURE

JAVASCRIPT, JUST LIKE WEB

JAVASCRIPT, JUST LIKE WEB

GENERAL WEB PAGE...

APPS...

SYSTEM...

IDEAS

• Fix / hack broken webpages

• Speed up the process of...

• Enhance build-in apps

LET'S GO!

LET'S GO!• Nightly X Nightly

• https://nightly.mozilla.org/

• https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/

• Lightsaber

• https://github.com/fxos/lightsaber

• Sample add-on

• https://github.com/mdn/simple-addon

WEB EXTENSIONS (FROM CHROME)

SimpleAddon

manifest.json

js

css

128.pngicons

style.css

script.js

update.webapp

SimpleAddon

manifest.json

js

css

128.pngicons

style.css

script.js

update.webapp

MANIFEST.JSON

{ "manifest_version": 1, "name": "Add-on banner", "description": "Firefox OS add-on example", "version": "1.0", "author": "Chris Mills", "content_scripts": [{ "matches": ["app://system.gaiamobile.org/index.html"], "css": ["css/style.css"], "js": ["js/index.js"] }], "icons": { "128": "/icons/128.png" }}

{ "manifest_version": 1, "name": "Add-on banner", "description": "Firefox OS add-on example", "version": "1.0", "author": "Chris Mills", "content_scripts": [{ "matches": ["app://system.gaiamobile.org/index.html"], "css": ["css/style.css"], "js": ["js/index.js"] }], "icons": { "128": "/icons/128.png" }}

CONTENT SCRIPT

ISSUE #1timing of injection

if (document.documentElement) { initialize();} else { window.addEventListener('DOMContentLoaded', initialize);}

function initialize() { // ...}

if (document.documentElement) { initialize();} else { window.addEventListener('DOMContentLoaded', initialize);}

function initialize() { // ...}

ISSUE #2duplicated injection

function initialize() { if (document.querySelector('.fxos-banner')) { // Already injected, abort. return; } else { var body = document.querySelector('body'); var fxosBanner = document.createElement('div'); fxosBanner.classList.add('fxos-banner'); var bannerText = document.createElement('p'); var closeBtn = document.createElement('button');

fxosBanner.appendChild(bannerText); fxosBanner.appendChild(closeBtn); body.appendChild(fxosBanner);

…… }}

function initialize() { if (document.querySelector('.fxos-banner')) { // Already injected, abort. return; } else { var body = document.querySelector('body'); var fxosBanner = document.createElement('div'); fxosBanner.classList.add('fxos-banner'); var bannerText = document.createElement('p'); var closeBtn = document.createElement('button');

fxosBanner.appendChild(bannerText); fxosBanner.appendChild(closeBtn); body.appendChild(fxosBanner);

…… }}

HACK ON!

bobchao@gmail.com