Post on 12-Apr-2017
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": "minimum-extension@eisbahn.jp" } }, "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": "minimum-extension@eisbahn.jp" } }, "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?