macでFirefoxのアドオン開発環境を構築する
メインブラウザはFirefoxを利用しています。自分が欲しいと思った機能があるFirefoxのアドオンがなかったので、作成していきます。 今回は、アドオンの開発環境構築までを書きました。
Firefoxのアドオンについて
アドオンの種類
アドオンには以下3つがありますが、今回は拡張機能を作っていきます。
- 拡張機能
- テーマ
- プラグイン
開発方法
最新の開発方法として、複数ブラウザで動作するWebExtensionを用いた方法がありますが、 参考になる記事が少なかったため、一つ前のjpmを利用した開発方法で行います。
開発環境構築
npm導入
npmでjpmをインストールするため、Node.jsを導入します。 Node.jsのバージョン管理ツールであるnodeBrewを利用します。 Node.jsが既に導入されている方は、こちらは飛ばしてください。
nodebrew導入
$ wget git.io/nodebrew $ perl nodebrew setup $ $export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc
nodebrew導入確認
$ nodebrew help
Node.jsの安定版(stable)バージョンをインストール
$ nodebrew install-binary stable
インストール確認
$ nodebrew ls v7.7.4 current: none
利用バージョン選択
$ nodebrew use v7.7.4 use v7.7.4
Node.js導入確認
$ node -v v7.7.4
npm導入確認
$ npm -v 4.1.2
jpm導入
$ npm install jpm -g
開発準備
任意の場所に作業ディレクトリを作成
$ mkdir test_addon $ cd test_addon
ディレクトリの初期化
色々と質問されますが、今回はサンプルなので適当に記述します。
$ jpm init title: (My Jetpack Addon) test_addon name: (testaddon) test_addon version: (0.0.1) description: (A basic add-on) test_addon entry point: (index.js) author: takedajs engines (comma separated): (firefox,fennec) license: (MIT) JPM [info] About to write to /Users/shoheitakeda/workspace/src/test_addon/package.json: { "title": "test_addon", "name": "testaddon", "version": "0.0.1", "description": "test_addon", "main": "index.js", "author": "takedajs", "engines": { "firefox": ">=38.0a1", "fennec": ">=38.0a1" }, "license": "MIT", "keywords": [ "jetpack" ] } Is this ok? (yes) yes
ディレクトリ配下に以下のようなファイルが作成されます。
$ tree . ├── README.md ├── index.js ├── package.json └── test └── test-index.js
Firefoxにアドオンを導入
アドオンのパッケージ化
$ jpm xpi
パッケージ化すると、xpi拡張子のファイルが作成されます。
$ tree . ├── README.md ├── index.js ├── package.json ├── test │ └── test-index.js └── testaddon.xpi
アドオン導入確認
作成した拡張機能だけが導入されたFirefoxが立ち上がります。
$ jpm run
立ち上がったFirefoxのアドオンマネージャーを見てみると、アドオンが一覧に表示されています。 ですが、アドオンが検証できず利用できませんとアラートが出ています。 Mozillaに申請して許可が下りないと開発段階であってもFirefoxに導入できないみたいです。(マジで?笑)
ですが、諦めるのはまだ早く、なんとか導入する方法があります。 以下、導入の流れを書いていきます。
歯車をクリックしてアドオンをデバッグを選択
開発ツールデバッガー画面が表示されます。
「一時的なアドオンを読み込みむ」をクリックして、先程 $ jpm xpi コマンドで作成したアドオンのパッケージ(xpi拡張子)を読み込みます。
読み込むと作成したアドオンが一覧に追加されています。
拡張機能一覧画面に戻ると先程出ていたアラートが消えて、導入されていることが分かります。
申請をしなくても開発段階のアドオンを導入することができました。(良かったー。) これで開発中のデバックをすることができますが、修正を加える度に毎回パッケージ化して ファイルを読み込まないといけないので、かなり面倒ですね。
まとめ
アドオン開発が初めてで何も分からない状態から始めましたが、開発環境ができたのでなんとか開発していけそうです。 次は、公式ページに載っているチュートリアルの参考にして、簡単なサンプルを作ってアドオン開発の理解を深めて行きたいと思います。 自分が欲しいと思った物を作っていくのはやはり楽しいですね。