Chrome Extensions から見るWebExtensions
Firefox Developers Conference 2015 in TokyoNovember 15, 2015
Today's Topic
Today's Topic
WebExtensionsの基礎
Chrome Extensionsとの違い
開発における注意点
ご注意
"くろ〜む "と言った時は、「 Chromeウェブブラウザ」のことです。
"えくすてんしょん "と "拡張機能 "は、同じものを指しています。
WebExtensionsの基礎
今までの拡張機能開発
XUL + XPCOMを利用した開発
Add-on SDKと cfxコマンドを利用した開発
JPMを利用した開発
今までの拡張機能開発
XUL + XPCOMを利用した開発
Add-on SDKと cfxコマンドを利用した開発
JPMを利用した開発
Deprec
ated
WebExtensions
?
Goal of WebExtensions
Firefoxと他のブラウザ間での移植を簡単にする。
addons.mozilla.orgでの審査を簡単にする。
Firefoxのマルチプロセス化との互換性を持たせる。
Firefox内部のコード変更を拡張機能に影響させない。
既存の XPCOM/XUL APIよりも簡単にする。
https://wiki.mozilla.org/WebExtensions
Goal of WebExtensions
Firefoxと他のブラウザ間での移植を簡単にする。
addons.mozilla.orgでの審査を簡単にする。
Firefoxのマルチプロセス化との互換性を持たせる。
Firefox内部のコード変更を拡張機能に影響させない。
既存の XPCOM/XUL APIよりも簡単にする。
⇒ [UP] セキュリティ、安定性の向上
⇒ [UP] 質の高い拡張機能の輸入 /輸出量の向上
⇒ [DOWN] 実現できることの減少
APIs
APIs( Ready to go)
alarms
contextMenus
pageAction
bookmarks
browserAction
cookies
extension
i18n
notifications
runtime
storage
tabs
webNavigation
webRequest
windows
API - browserAction
API - pageAction
API - notifications
API - contentMenus
Content Script
Other APIs
alarms - 一定時間ごとにイベントを発生させてくれる API。
storage - 拡張機能ごとに提供される情報の保存場所。
tabs - タブ関連の操作(新規タブを開いたり一覧を取得したり)。
i18n - 国際化のための API( _locale/...en...ja.../messages.json)。
bookmarks - ブックマークを操作するための API。
...
APIs( Planned)
commands
DevTools
downloads
history
idle
omnibox
permissions
Native messaging
Building Blocks
Building Blocks
必須なファイル
manifest.json - 拡張機能のメタ情報を持つ
任意のファイル
HTMLファイル
CSSファイル
JavaScriptファイル
その他必要なファイル・・・
Minimum Extension
manifest.json
{ "manifest_version": 2, "name": "Minimum Extension", "version": "1.0", "applications": { "gecko": { "id": "[email protected]" } }, "browser_action": { "default_popup": "popup.html" }}
popup.html
<!DOCTYPE html><html> <head></head> <body> <div>Hello, WebExtension!</div> </body></html>
$ cd minimum-extension$ lsmanifest.json popup.html$ zip -r ../minimum-extension.xpi *updating: manifest.json (deflated 42%)updating: popup.html (deflated 23%)$ cd ..$ lsminimum-extension/ minimum-extension.xpi
Configuration
Installing
Installing
Installing
Using the browserAction
Using the browserAction
background
background.htmlbackground.js
popup.htmlpopup.js
Each Event(alarms, tabs, etc.)
Backend server background.htmlbackground.js
manifest.json
{ "manifest_version": 2, ... "background": { "page": "background.html" <or> "scripts": ["background.js"] } ...}
background.js
console.log("Background created.");
function hello() { return "Hello, I'm background context.";}
chrome.alarms.onAlarm.addListener( function(alarm) { console.log("Called by chrome.alarms."); });chrome.alarms.create("", {delayInMinutes:1, periodInMinutes: 1});
popup.htmlpopup.js
Each Event(alarms, tabs, etc.)
Backend server background.htmlbackground.js
chrome.extension.getBackgroundPage()
popup.html
<!DOCTYPE html><html> <head></head> <body> <div>Hello, WebExtension!</div> <script> var bg = chrome.extension.getBackgroundPage(); console.log(bg.hello()); </script> </body></html>
Content Scripts
manifest.json
{ "manifest_version": 2, ... "content_scripts": [ { "matches": ["https://www.eisbahn.jp/*"] "js": ["content_scripts.js"] } ], ...}
content_scripts.js
var body = document.querySelector("body");body.style.transform = "rotate(-180deg)";
Chrome Extensionsとの違い
manifest.json
{ "manifest_version": 2, "name": "Minimum Extension", "version": "1.0", "applications": { "gecko": { "id": "[email protected]" } }, "browser_action": { "default_popup": "popup.html" }}
background
"persistent"属性がサポートされていない。
⇒ Background Contextが常駐している。
⇒ background.htmlや background.jsに情報を保持できる。
⇒ setTimeout(), setInterval()が使える。
⇒ 常にメモリを圧迫している状況。
background
Chromeでは既に persistent=trueの拡張機能は非推奨
⇒ まだ trueもサポートされてはいる。
⇒ 多くの拡張機能は persistent=falseに移行済み。
結果として Chromeから Firefoxに移植する際に問題になる。
⇒ 現状はそれぞれのコードを準備するのが得策。
⇒ Firefoxも persistent=falseのサポートをするのでは?
開発における注意点
Simple
goo.gl URL Shortener
goo.glによる短縮 URL作成、一覧表示
クリックカウントの表示
クリックされたブラウザや地域などの表示
クリック数の時間推移の表示
短縮 URLの QR Code生成
GMail, Facebook, Twitter, Google+へシェア
Pocket (Read It Later)への追加
壁紙の変更
短縮 URLのクリック数の監視と Badge表示
Rejecte
d
良い拡張機能とは
シンプルであること
1つの拡張機能でできることは 1つだけに絞る。
利用者獲得のための欲を出さない
良い拡張機能は何もしなくても絶対流行る。
アイディアと先行者利益で勝負する。
お行儀良く
ガイドラインは守りましょう。
Firefox OS
Conclusion
Firefoxの拡張機能はWebExtensionsに移行します。
WebExtensionsは他のブラウザでも動きます。
今までよりも拡張機能の作り方が簡単になります。
Chrome, Operaと環境差がまだ少しあります。
「 Simple」に作りましょう。
References
WebExtensions - Mozilla Wiki
https://wiki.mozilla.org/WebExtensions
WebExtensions - MDN>Mozilla>Add-ons>WebExtensions
https://developer.mozilla.org/en-US/Add-ons/WebExtensions
Chrome Extensions
https://developer.chrome.com/extensions
Firefox Developers Conference 2015 in Tokyo
Any Questions?
Top Related