今回、firefox dev conferenceに参加してきました。
そこで聞いてきた、webextensionsに関して試してみたので、ログっておきます。
firefoxはアドオンの機能に関して、Chromeの拡張機能と同じ仕様を搭載することを発表しています。dev.mozilla.jp
実際、どのようにして作るのか紹介します。
WebExtensionsに関しては、WebExtensions - MozillaWikiに書いてあります。
環境構築
以下からFirefox Developer Editionをダウンロードします。
Firefox のダウンロード — 自由な Web ブラウザ — Mozilla
リンクのURLからしてバージョンが変わると見れなくなりそうなので、
リンクに飛べない場合は、「DeveloperEdition」で検索してダウンロードします。
- DeveloperEditionを起動
- about:configを開く
- xpinstall.signatures.required = falseにする。(これは、署名されていないアドオンを利用できるようにするものです。)
これで環境構築は終了です!
拡張機能開発
今回は互換性がそのままだということを示すために、GoogleChromeの拡張機能サンプルから作成します。
mdn/webextensions-examples · GitHubにMDNが作成したサンプルもあります。
以下から、PageRedderをダウンロードします。
Sample Extensions - Google Chrome
このアドオンは単純にバックグラウンドを赤くするアドオンですw
- background.js
- manifest.json
をダウンロードします。
manifest.jsonのルートに以下を追加します。
"applications": { "gecko": { "id": "borderify@mozilla.org" } },
そして、以下で圧縮します。
zip -r ../redder.xpi *
これで出来たxpiファイルをDeveoperEditionブラウザにドラッグアンドドロップでインストールされます
作ったアドオンで画面はこんな感じになりますw
Firefoxのアドオンが更に充実していくといいですねb
参考にGistも貼っておきます。