Firefoxアドオン開発環境を構築してみた(Windows)

# 参考サイト

http://web-programmers-blog.com/firefox-addon/firefox-add-on-sdk-2014/
また、上のページからリンクされている https://dev.mozilla.jp/2011/08/add-on-sdk-install-knagato/ も参考になります。

上のサイトが詳しいので参考にすれば環境構築は出来ますが、ここではスクリーンショットと共に作業手順をまとめてみました！詳細な説明は省いていますのでご了承下さい。

# 開発環境の準備

## Python2系のインストール

後述のアドオン開発環境であるAddOnSdkがPythonで書かれているため、Python2系のインストールする。Python3系はAddOnSdkでまだサポートされていない。

1. https://www.python.org/
2. パスを通す
    * `C:\Python27`にインストールした場合、Windows環境変数に`C:\Python27;`を追加する。
3. コマンドプロンプトで`python -V`と入力し、インストールされたバージョンを確認する。

## AddOnSdkをインストール

1. https://addons.mozilla.org/ja/developers/builder
2. 上URLからダウンロードしたzipを解凍し適当な場所に配置する。
3. 起動確認を行う。C直下に配置した場合、`C:\addon-sdk-1.17`にコマンドプロンプトで移動し、`bin\activate`を実行する。終了する際は`deactivate`を実行する。
4. 起動を簡略化するため、`C:\addon-sdk-1.17\bin\activate.bat`のショートカットを作成する
    1. `activate.bat`をコピーし、ショートカットの貼り付けを行う。
    2. 貼り付けしたショートカットのプロパティを開く。
    3. リンクを`C:\Windows\System32\cmd.exe /K C:\addon-sdk-1.17\bin\activate.bat`のように変更する。
    4. 作業フォルダは`C:\addon-sdk-1.17`にする。

# とりあえず何か動かしてみる

## 参考

https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started

## Hello worldプロジェクトを作成

```bat

(C:\addon-sdk-1.17) C:\addon-sdk-1.17>mkdir hello_world

(C:\addon-sdk-1.17) C:\addon-sdk-1.17>cd hello_world

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx init
* lib directory created
* data directory created
* test directory created
* generated jID automatically: jid1-jEpLjcEnpIoIww
* package.json written
* test/test-main.js written
* lib/main.js written

Your sample add-on is now ready.
Do "cfx test" to test it and "cfx run" to try it.  Have fun!
```

## `lib/main.js`にサンプルコードをコピペする

```js:main.js
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
    id: "mozilla-link",
    label: "Visit Mozilla",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});

function handleClick(state) {
    tabs.open("http://www.mozilla.org/");
}
```

## アイコン画像を取得し、dataフォルダに配置

 * https://mdn.mozillademos.org/files/7635/icon-16.png
 * https://mdn.mozillademos.org/files/7635/icon-32.png
 * https://mdn.mozillademos.org/files/7635/icon-64.png

便宜上、IDEを使ってやってみました。
![firefox_sample_code.png](https://qiita-image-store.s3.amazonaws.com/0/37334/3a6d3000-d7d8-6332-e09a-104130fe5d38.png)


# 実行

```bat

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx run
Using binary at 'C:\Program Files (x86)\Mozilla Firefox\firefox.exe'.
Using profile at 'c:\users\daichi\appdata\local\temp\tmpeuwlsh.mozrunner'.
```

Firefoxが起動！追加されたFirefoxアイコンをクリックすると、Mozillaのページが開く。
![hello_world.PNG](https://qiita-image-store.s3.amazonaws.com/0/37334/43b6220d-53c4-c073-15dc-e416cd756fc8.png)


# アドオンをパッケージ化する

```bat

(C:\addon-sdk-1.17) C:\addon-sdk-1.17\hello_world>cfx xpi
Exporting extension to hello_world.xpi.
```

`hello_world.xpi`が生成されました。これをお気に入りのFirefoxにドラッグ＆ドロップしてインストールする。

![installing_addon.png](https://qiita-image-store.s3.amazonaws.com/0/37334/facd4af4-7b55-6780-ac91-25ebffb73e92.png)

インストールに成功！

これで一通りの流れが確認できました。

# やりたい事を実装する

今回は特定のURLのページを開いた時にHTMLの書き換えとスクリプトの埋め込みを行いたかったので、下のリンクのサンプルコードを利用しました。
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL

```js:main.js

// Import the page-mod API
var pageMod = require("sdk/page-mod");
// Import the self API
var self = require("sdk/self");

// Create a page mod
// It will run a script whenever a ".org" URL is loaded
// The script replaces the page contents with a message
pageMod.PageMod({
    include: "*.org",
    contentScriptFile: [
        self.data.url("jquery-1.11.1.js"),
        self.data.url("my-script.js")
    ]
});
```

これでURLが*.orgにマッチする場合、data以下の`jquery-1.11.1.js`と`my-script.js`がロードされます。

jQueryは便利なので、ファイル名などは変えて、サンプルコードをほとんどそのまま利用しました。

1. jQueryを入手　http://jquery.com/
1. dataフォルダにjQuery(jquery-1.11.1.js)を配置
2. dataフォルダにmy-script.jsを作成
3. my-script.jsに実行したい処理を記載

こんな感じ

```js:my-script.js

$(document).ready(function(){
    $("html").html("<h1>Hello World!</h1>");
});
```

これで動きました！

まだわからないことも多いですが、バージョン毎に開発方法も変わるようで情報が少ないようでした。
もし他にも便利な開発方法があれば、教えて頂けると幸いです！