Advertisement
Chrome Extensionsから見るWebExtensions
Jan. 17, 2016•0 likes•1,334 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
Firefox developer conference 2015
Yoichiro TanakaFollow
Software Engineer at Increments, Inc.Advertisement
Chrome Extensionsから見るWebExtensions
- Chrome Extensions から見る WebExtensions Firefox Developers Conference 2015 in Tokyo November 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を利用した開発
- 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 $ ls manifest.json popup.html $ zip -r ../minimum-extension.xpi * updating: manifest.json (deflated 42%) updating: popup.html (deflated 23%) $ cd .. $ ls minimum-extension/ minimum-extension.xpi
- Configuration
- Installing
- Installing
- Installing
- Using the browserAction
- Using the browserAction
- background
- background.html background.js
- popup.html popup.js Each Event (alarms, tabs, etc.) Backend serverbackground.html background.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.html popup.js Each Event (alarms, tabs, etc.) Backend serverbackground.html background.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表示
- 良い拡張機能とは シンプルであること 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?
Advertisement