参考サイト

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でまだサポートされていない。

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

AddOnSdkをインストール

https://addons.mozilla.org/ja/developers/builder
上URLからダウンロードしたzipを解凍し適当な場所に配置する。
起動確認を行う。C直下に配置した場合、C:\addon-sdk-1.17にコマンドプロンプトで移動し、bin\activateを実行する。終了する際はdeactivateを実行する。
起動を簡略化するため、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にする。

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

参考

Hello worldプロジェクトを作成


(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`にサンプルコードをコピペする

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フォルダに配置

便宜上、IDEを使ってやってみました。

実行


(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のページが開く。

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


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

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

インストールに成功！

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

やりたい事を実装する

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

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は便利なので、ファイル名などは変えて、サンプルコードをほとんどそのまま利用しました。

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

こんな感じ

my-script.js


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

これで動きました！

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

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