読者です 読者をやめる 読者になる 読者になる

Pastalablog in はてな

時代はブログ！ 日記もあるよ→http://pastak-diary.hatenadiary.com

WebExtension現状確認してみた

このブログ記事は KMCアドベントカレンダー2015 の5日目の記事です。

ちなみに昨日の記事は id:hnagamin の 好きなSCP-JPの紹介 - hnagamin でした。

サークルの人たち最近ずっとSCPの話してて、scpって色々あるんだなぁと思っていたのが、実はそういう話とは違ったということが発覚して良かったです。

今までのブラウザ拡張について

ブラウザ拡張といえば皆さんも一度くらいは書いたことあるのではないでしょうか。

今まではブラウザでそれぞれ実装方法に違いがあってざっとまとめると大体こんな感じです。

Mozilla Firefoxは最近Addon-SDKをリリースし、XULなどでの開発から旧Jetpackを利用した開発へと移行を開始し、Firefox 38からはビルドツール群もnodeJSで実装されたものが利用可能になりました。*1

そんなこんなで各位思い思いにブラウザ拡張の実装を作っていたわけでした。

WebExtensionって何？

とまぁここまで来て、こうやってみるとFirefoxで提供されているAdd-onと同等のものがChromeなどにも提供されている中で、Add-onSDKを押し進めるのではなくWebExtensionとして共通のAPIを利用できるようにすることでBlink向けに書かれたブラウザ拡張をFirefoxでも簡単に動かせるようにしようという話です。Firefox的にはマルチプロセスの話とかもあるのですが、ここではあんまり触れないので上記のリンク先を読んで下さい。

仕様策定とかをするという話はなくて、とりあえずはFirefox側でChromeのドキュメントや実装を参考に同じような挙動を実装するという話です。

Microsoft Edgeにインストール可能になるExtensionもChrome Extensionとほぼ同じものになるという話があるので、今回のChrome ExtensionベースのWebExtensionがデファクトスタンダードになりそうです。

僕も普段はChrome Extensionをよく書いていて、話題に上がってから定期的に話題巡回をしているので、状況を簡単にまとめてみます。

最新情報を把握したい人向け情報

日本語でシュシュッと雰囲気を掴みたい人は＠yoichiroさんのChrome Extensions から見る WebExtensionsがまとまっている感じなので、それを見ましょう。

実装状況やバグトラックの雰囲気を掴みたい人は Are we Web Extensions yet?というページがあって便利なのでおすすめです。参照すべきbugzillaへのリンクや、Chromeドキュメント・MDNへのリンク、Firefoxの実装へのリンクがあるので、状況を俯瞰したりするのには良いと思います。

Mozilla Wikiにもシュッと開発状況や開発チュートリアルがまとまっています。とりあえずこのページに目を通すと良いと思います。

https://wiki.mozilla.org/WebExtensions

MDNドキュメントも整備中ではありますが、着実に増えつつあります。開発チュートリアルなどもあるので、時間がある人は読んでみると良いでしょう。

サポート完了のAPIのリストはここにあります。メソッドごとに記述があるので、自身で実装などをする際はここを参照して実装済みか確認すると吉です。

サンプルコードを読み書きしてみる

既にtabsやcontextMenus、browserAction、notificationsなどはある程度サポートされているので、それらの機能を利用した拡張機能を実際に開発することが可能になっています。

サンプルコードがGitHubに公開されているので、それを覗いてみることにします。

0. 環境準備

WebExtensionはhttps://nightly.mozilla.org/とhttps://www.mozilla.org/en-US/firefox/channel/#developerで動かすことが出来ます。

皆さんもどちらかはインストールしていると思いますが、まだの人はインストールしてください。

インストールしたら起動して、about:configに移動して、xpinstall.signatures.requiredの値をfalseにします。

https://gyazo.com/07135817da46e77f946ec3fef8f41e01

1. サンプルをインストールしてみる

https://github.com/mdn/webextensions-examples のコードを動かしてみます。

  • $ git clone git@github.com:mdn/webextensions-examples.git
  • $ cd webextensions-examples

拡張機能のパッケージングはzip圧縮して拡張子をxpiにすればOKです。例えば、notify-link-clicksをインストールしてみるということにします。

  • $ cd notify-link-clicks
  • $ zip -r ../notify-link-clicks.xpi *

これで出来たnotify-link-clicks.xpiをFirefoxのabout:addonsにドラッグアンドドロップしてinstallボタンをクリックするとインストールできます。

https://gyazo.com/e1b3f4d6b1a28062c77bf2dfb81a5816

notify-link-clicksでbackground script、content scriptやnotificationが動くことが確認できます。user-agent-rewriter((インストール後に http://useragentstring.com/ にアクセスするとwebRequestを利用してユーザーエージェントが書き換わってることが確認できます。このページでしか呼ばれないので注意))などを試すとbrowser actionが動くことも確認できます。

実際に移植してみる

最後にChrome Extensionを実際に移植してみます。

Gyazo Extensionを移植しようとチャレンジしたのですが、chrome.tabs.captureVisibleTabのサポートが無くて挫折した*2ので、自分で過去に作ったgyoogleというのを移植してみることにします。

これは googleの検索結果を表示するとpostMessageでbackground scriptに通信して、そこでXHRでGyazoの検索結果を取得して、メッセージをcontent scirptに返して結果を挿入するというやつです。

この拡張機能で使っているAPIはFirefoxのWebExtensionで実装されているので、manifest.jsonにアプリケーション情報を記述するだけでOKです。

WebExtensionのmanifest.jsonはBlinkのものと違って、applicationsが必須です。

最低限のものはこのような感じです。

"applications": {
    "gecko": {
      "id": "gyoogle@pastak.net"
    }
  }
  • idのみ必須です。記法は https://developer.mozilla.org/en-US/Add-ons/Install_Manifests#id を参照して下さい。大抵は上記のようにextensionname@example.orgの形式になっていればOKです。
  • 他、必要に応じてstrict_min_versionやstrict_max_versionなどを指定することが出来ます。

将来的にはここでblinkキーが使えてバージョン指定出来るようにするということなのだと思いますが、Blinkはこのキーに現状対応していないので、このままのmanifest.jsonでChromeにインストールしようとすると、このようなエラーが出ます。

https://gyazo.com/bcc7825586834b39a3abde5a227dc463

これでビルド(zipに固めて拡張子を.xpiにする)してインストールすると確かに動きます。めでたい！

https://gyazo.com/cc7ad5629287a73592db63aa6a7ddd96

今後について

  • ロードマップはここにあります。2016年の中旬くらいまでにはWebExtension1.0としてリリースすることが目標とされています。
  • AMOでのサポートもこれから。
  • 現状 chrome.*のnamespaceで提供しているAPIをbrowser.*に移行して、拡張子もzip を使いたい。
    • これは標準化のためです。
  • Chromeなどに実装されていないが、Firefoxのこれまでの寛容なAPIで動いていた便利なアドオンのためのAPIの拡張も提案はされています。

まとめ

今実際にFirefoxやChromeで拡張機能をリリースする場合はAdd-onSDKを利用しても資産はあまり使いまわせないので、WebExtensionの実装は早く進んで欲しいという感じですが、最後のところに書かれているような感じのが実装されるとそれらはBlink系では動かなくなってしまうので、それはそれでどうなんだろうと思いますが、Chromeなどにもサイドバーは欲しいので各位頑張って欲しいです。

APIさえ準備されれば、ほとんど手を入れること無くChrome拡張をFirefoxで動くように出来るのでみなさんも試してみてください。

諸々気になる人は https://wiki.mozilla.org/WebExtensions から辿れる各種バグトラックを追いかけてみてください。

このブログ記事は KMCアドベントカレンダー2015 の5日目の記事でした。

明日6日目は @ くんの「UnambiSweeperというandroidアプリ作ったのでその辺の何か」です。

彼は マインスイーパー雑感 - KMC活動ブログ とかでもマインスイーパーの話をしていたのですが、どうやら最近Androidアプリに移植したらしいのでそういう感じの話が出てくるっぽいです。乞うご期待！

KMCM

京大マイコンクラブではブラウザ拡張に興味がある新入部員を募集しています。年齢や所属、国籍や宗教その他諸々に関する制約はありません。いつでも例会に遊びに来てみてください。詳しくは入部案内を見て下さい。

*1:この辺のjpmの話はKMCの部誌に書いたので、コミケなどで買って下さい！ https://www.kmc.gr.jp/events/c88/

*2:https://github.com/pastak/gyazo-chrome-extension/tree/firefox-webextension