Chrome Extensionsから見るWebExtensions
Download as PPTX, PDF0 likes1,340 views
Firefox developer conference 2015
![Goal of WebExtensions
Firefoxと他のブラウザ間での移植を簡単にする。
addons.mozilla.orgでの審査を簡単にする。
Firefoxのマルチプロセス化との互換性を持たせる。
Firefox内部のコード変更を拡張機能に影響させない。
既存のXPCOM/XUL APIよりも簡単にする。
⇒ [UP] セキュリティ、安定性の向上
⇒ [UP] 質の高い拡張機能の輸入/輸出量の向上
⇒ [DOWN] 実現できることの減少](https://image.slidesharecdn.com/firefoxdeveloperconference2015-160117012447/85/Chrome-Extensions-WebExtensions-21-320.jpg)
![manifest.json
{
"manifest_version": 2,
...
"background": {
"page": "background.html"
<or>
"scripts": ["background.js"]
}
...
}](https://image.slidesharecdn.com/firefoxdeveloperconference2015-160117012447/85/Chrome-Extensions-WebExtensions-48-320.jpg)
![manifest.json
{
"manifest_version": 2,
...
"content_scripts": [ {
"matches": ["https://www.eisbahn.jp/*"]
"js": ["content_scripts.js"]
} ],
...
}](https://image.slidesharecdn.com/firefoxdeveloperconference2015-160117012447/85/Chrome-Extensions-WebExtensions-55-320.jpg)
Chrome Extensionsから見るWebExtensions
- 1. Chrome Extensions から見る WebExtensions Firefox Developers Conference 2015 in Tokyo November 15, 2015
- 11. WebExtensionsの基礎
- 13. 今までの拡張機能開発 XUL + XPCOMを利用した開発 Add-on SDKとcfxコマンドを利用した開発 JPMを利用した開発
- 14. 今までの拡張機能開発 XUL + XPCOMを利用した開発 Add-on SDKとcfxコマンドを利用した開発 JPMを利用した開発
- 15. WebExtensions
- 19. ?
- 20. Goal of WebExtensions Firefoxと他のブラウザ間での移植を簡単にする。 addons.mozilla.orgでの審査を簡単にする。 Firefoxのマルチプロセス化との互換性を持たせる。 Firefox内部のコード変更を拡張機能に影響させない。 既存のXPCOM/XUL APIよりも簡単にする。 https://wiki.mozilla.org/WebExtensions
- 21. Goal of WebExtensions Firefoxと他のブラウザ間での移植を簡単にする。 addons.mozilla.orgでの審査を簡単にする。 Firefoxのマルチプロセス化との互換性を持たせる。 Firefox内部のコード変更を拡張機能に影響させない。 既存のXPCOM/XUL APIよりも簡単にする。 ⇒ [UP] セキュリティ、安定性の向上 ⇒ [UP] 質の高い拡張機能の輸入/輸出量の向上 ⇒ [DOWN] 実現できることの減少
- 22. APIs
- 25. API - pageAction
- 28. Content Script
- 29. Other APIs alarms - 一定時間ごとにイベントを発生させてくれるAPI。 storage - 拡張機能ごとに提供される情報の保存場所。 tabs - タブ関連の操作（新規タブを開いたり一覧を取得したり）。 i18n - 国際化のためのAPI（_locale/...en...ja.../messages.json）。 bookmarks - ブックマークを操作するためのAPI。 ...
- 31. Building Blocks
- 33. Building Blocks 必須なファイル manifest.json - 拡張機能のメタ情報を持つ 任意のファイル HTMLファイル CSSファイル JavaScriptファイル その他必要なファイル・・・
- 35. manifest.json { "manifest_version": 2, "name": "Minimum Extension", "version": "1.0", "applications": { "gecko": { "id": "minimum-extension@eisbahn.jp" } }, "browser_action": { "default_popup": "popup.html" } }
- 37. $ 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
- 38. Configuration
- 39. Installing
- 40. Installing
- 41. Installing
- 44. background
- 47. popup.html popup.js Each Event (alarms, tabs, etc.) Backend serverbackground.html background.js
- 48. manifest.json { "manifest_version": 2, ... "background": { "page": "background.html" <or> "scripts": ["background.js"] } ... }
- 49. 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});
- 50. popup.html popup.js Each Event (alarms, tabs, etc.) Backend serverbackground.html background.js chrome.extension.getBackgroundPage()
- 51. 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>
- 54. Content Scripts
- 55. manifest.json { "manifest_version": 2, ... "content_scripts": [ { "matches": ["https://www.eisbahn.jp/*"] "js": ["content_scripts.js"] } ], ... }
- 56. content_scripts.js var body = document.querySelector("body"); body.style.transform = "rotate(-180deg)";
- 59. manifest.json { "manifest_version": 2, "name": "Minimum Extension", "version": "1.0", "applications": { "gecko": { "id": "minimum-extension@eisbahn.jp" } }, "browser_action": { "default_popup": "popup.html" } }
- 61. background "persistent"属性がサポートされていない。 ⇒ Background Contextが常駐している。 ⇒ background.htmlやbackground.jsに情報を保持できる。 ⇒ setTimeout(), setInterval()が使える。 ⇒ 常にメモリを圧迫している状況。
- 63. background Chromeでは既にpersistent=trueの拡張機能は非推奨 ⇒ まだtrueもサポートされてはいる。 ⇒ 多くの拡張機能はpersistent=falseに移行済み。 結果としてChromeからFirefoxに移植する際に問題になる。 ⇒ 現状はそれぞれのコードを準備するのが得策。 ⇒ Firefoxもpersistent=falseのサポートをするのでは？
- 64. 開発における注意点
- 65. Simple
- 67. goo.gl URL Shortener goo.glによる短縮URL作成、一覧表示 クリックカウントの表示 クリックされたブラウザや地域などの表示 クリック数の時間推移の表示 短縮URLのQR Code生成 GMail, Facebook, Twitter, Google+へシェア Pocket (Read It Later)への追加 壁紙の変更 短縮URLのクリック数の監視とBadge表示
- 71. Firefox OS
- 74. 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
- 75. Firefox Developers Conference 2015 in Tokyo Any Questions?