Submit Search
Upload
Firefox OS Add-on in 10 minutes
•
1 like
•
5,786 views
Bob Chao
Follow
Brief intro of the new Add-ons mechanism on Firefox OS.
Read less
Read more
Internet
Report
Share
Report
Share
1 of 31
Download now
Download to read offline
Recommended
웹개발도구
웹개발도구
Seungho Han
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
Will Huang
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
Maximiliano Firtman
Titanium Alloy & Backbone
Titanium Alloy & Backbone
Mads Møller
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
MozTW 軟體自由日 2015
MozTW 軟體自由日 2015
Irvin Chen
簡報規劃與設計
簡報規劃與設計
Bob Chao
開放社群,啊是多開放?
開放社群,啊是多開放?
Bob Chao
Recommended
웹개발도구
웹개발도구
Seungho Han
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
Will Huang
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
Maximiliano Firtman
Titanium Alloy & Backbone
Titanium Alloy & Backbone
Mads Møller
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
MozTW 軟體自由日 2015
MozTW 軟體自由日 2015
Irvin Chen
簡報規劃與設計
簡報規劃與設計
Bob Chao
開放社群,啊是多開放?
開放社群,啊是多開放?
Bob Chao
數位教材公眾授權資源蒐集與創用 CC 資源網站
數位教材公眾授權資源蒐集與創用 CC 資源網站
Bob Chao
Vidyo: How to Record and Broadcast your meeting
Vidyo: How to Record and Broadcast your meeting
Bob Chao
Mozilla Community
Mozilla Community
Bob Chao
開源人生指南 - 如何不慎豐富人脈與經驗
開源人生指南 - 如何不慎豐富人脈與經驗
Bob Chao
開放文化基金會可以幫你什麼?
開放文化基金會可以幫你什麼?
Bob Chao
Build your own COSCUP
Build your own COSCUP
Bob Chao
COSCUP: What, Why, and How
COSCUP: What, Why, and How
Bob Chao
OCF 募款餐會: 開放文化影展
OCF 募款餐會: 開放文化影展
Bob Chao
8 個重回 Firefox 的理由 8 reasons back to Firefox
8 個重回 Firefox 的理由 8 reasons back to Firefox
Bob Chao
Webmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Popcorn maker in 60mins
Bob Chao
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Bob Chao
Google Analytics 網站分析: 學習心得分享
Google Analytics 網站分析: 學習心得分享
Bob Chao
Mozilla Webmaker: Brief Intro.
Mozilla Webmaker: Brief Intro.
Bob Chao
OpenSource 新手上路
OpenSource 新手上路
Bob Chao
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
Bob Chao
網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會
Bob Chao
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 Game
Bob Chao
FUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 Events
Bob Chao
Firefox Mobile: Designing Ideas
Firefox Mobile: Designing Ideas
Bob Chao
Firefox 4 Party Opening
Firefox 4 Party Opening
Bob Chao
More Related Content
More from Bob Chao
數位教材公眾授權資源蒐集與創用 CC 資源網站
數位教材公眾授權資源蒐集與創用 CC 資源網站
Bob Chao
Vidyo: How to Record and Broadcast your meeting
Vidyo: How to Record and Broadcast your meeting
Bob Chao
Mozilla Community
Mozilla Community
Bob Chao
開源人生指南 - 如何不慎豐富人脈與經驗
開源人生指南 - 如何不慎豐富人脈與經驗
Bob Chao
開放文化基金會可以幫你什麼?
開放文化基金會可以幫你什麼?
Bob Chao
Build your own COSCUP
Build your own COSCUP
Bob Chao
COSCUP: What, Why, and How
COSCUP: What, Why, and How
Bob Chao
OCF 募款餐會: 開放文化影展
OCF 募款餐會: 開放文化影展
Bob Chao
8 個重回 Firefox 的理由 8 reasons back to Firefox
8 個重回 Firefox 的理由 8 reasons back to Firefox
Bob Chao
Webmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Popcorn maker in 60mins
Bob Chao
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Bob Chao
Google Analytics 網站分析: 學習心得分享
Google Analytics 網站分析: 學習心得分享
Bob Chao
Mozilla Webmaker: Brief Intro.
Mozilla Webmaker: Brief Intro.
Bob Chao
OpenSource 新手上路
OpenSource 新手上路
Bob Chao
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
Bob Chao
網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會
Bob Chao
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 Game
Bob Chao
FUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 Events
Bob Chao
Firefox Mobile: Designing Ideas
Firefox Mobile: Designing Ideas
Bob Chao
Firefox 4 Party Opening
Firefox 4 Party Opening
Bob Chao
More from Bob Chao
(20)
數位教材公眾授權資源蒐集與創用 CC 資源網站
數位教材公眾授權資源蒐集與創用 CC 資源網站
Vidyo: How to Record and Broadcast your meeting
Vidyo: How to Record and Broadcast your meeting
Mozilla Community
Mozilla Community
開源人生指南 - 如何不慎豐富人脈與經驗
開源人生指南 - 如何不慎豐富人脈與經驗
開放文化基金會可以幫你什麼?
開放文化基金會可以幫你什麼?
Build your own COSCUP
Build your own COSCUP
COSCUP: What, Why, and How
COSCUP: What, Why, and How
OCF 募款餐會: 開放文化影展
OCF 募款餐會: 開放文化影展
8 個重回 Firefox 的理由 8 reasons back to Firefox
8 個重回 Firefox 的理由 8 reasons back to Firefox
Webmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Google Analytics 網站分析: 學習心得分享
Google Analytics 網站分析: 學習心得分享
Mozilla Webmaker: Brief Intro.
Mozilla Webmaker: Brief Intro.
OpenSource 新手上路
OpenSource 新手上路
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 Game
FUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 Events
Firefox Mobile: Designing Ideas
Firefox Mobile: Designing Ideas
Firefox 4 Party Opening
Firefox 4 Party Opening
Firefox OS Add-on in 10 minutes
1.
2.
FIREFOX OS ADD-ON in
10 minutes
3.
ADD-ON IN BROWSER
4.
5.
ADD-ON AS A WEB-BASED
OS FEATURE
6.
JAVASCRIPT, JUST LIKE
WEB
7.
JAVASCRIPT, JUST LIKE
WEB
8.
GENERAL WEB PAGE...
9.
APPS...
10.
SYSTEM...
11.
IDEAS • Fix /
hack broken webpages • Speed up the process of... • Enhance build-in apps
12.
LET'S GO!
13.
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
14.
15.
WEB EXTENSIONS (FROM CHROME)
16.
SimpleAddon manifest.json js css 128.png icons style.css script.js update.webapp
17.
SimpleAddon manifest.json js css 128.png icons style.css script.js update.webapp
18.
MANIFEST.JSON
19.
{ "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" } }
20.
{ "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" } }
21.
CONTENT SCRIPT
22.
ISSUE #1 timing of
injection
23.
if (document.documentElement) { initialize(); }
else { window.addEventListener('DOMContentLoaded', initialize); } function initialize() { // ... }
24.
if (document.documentElement) { initialize(); }
else { window.addEventListener('DOMContentLoaded', initialize); } function initialize() { // ... }
25.
ISSUE #2 duplicated injection
26.
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); …… } }
27.
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); …… } }
28.
29.
30.
31.
HACK ON! bobchao@gmail.com
Download now