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

Screaming Loud

研究・プログラミングなど気づいたことをメモをしています

新しいfirefoxのweb extensionsがChromeExtentionとの互換性そのままだった

firefox プログラミング

今回、firefox dev conferenceに参加してきました。

www.mozilla.jp


そこで聞いてきた、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
f:id:yuutookun:20151115165653p:plain

Firefoxのアドオンが更に充実していくといいですねb

参考にGistも貼っておきます。