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

とある地味なブログ

プログラミングとお絵かきに関する雑記。

WindowsでFirefox Add-on開発

WindowsFirefoxのアドオンを開発します!

環境構築

Add-on SDKを使った開発環境を構築します。

Pythonのインストール

現在、Add-on SDKはPython2系にのみ対応しているので、Python 2.7.xを入れます。

Download Python | Python.org
ここから入手するか、

Chocolateyを使っているなら、

> choco install python2

とします。

Add-on SDKのインストール

Installation - Mozilla | MDN

基本的にこのページのとおりです。
zip fileのリンクからダウンロードします。

> 7z.exe x addon-sdk.zip
> cd addon-sdk
> bin\activate
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>

こんな感じで、Add-on SDKのコンソールが表示されれば成功です。

Warning: Failed to find Python installation directory

このように表示されたら、Pythonのバージョンが2系でないか、インストールに失敗している可能性があります。

実際に開発してみる

Mozillaのページをタブで開くだけのアドオン

プロジェクト初期化

上記のbin\activateで開いたコンソール内で、 好きなディレクトリの下に移動します。

> mkdir open_mozilla
> cd open_mozilla
> cfx init

と、実行して、プロジェクトを初期化します。

サンプルコードとサンプルアイコンの配置

lib\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("https://www.mozilla.org/");
}

data\に以下の3つの画像をダウンロードして配置します。(ファイル名はそのまま)

アドオンを動かす
> cfx run

Firefoxが起動します。

右上のFirefoxロゴをクリックすると!!!なんと!!!

f:id:sujoyu:20150310182431p:plain

新しいタブでMozillaのページが!!!開くではありませんか!!!!!!!

f:id:sujoyu:20150310182426p:plain

環境構築超簡単。Mozillaさんすげー。

参考

Tutorials - Mozilla | MDN

firefoxアドオン開発 超実践的チュートリアル(2014年夏ver) - webプログラマーのブログ

次回

簡単なアドオンを作るよ。

IDを持つ要素のリンクを生成するだけのFirefoxアドオンを作ったった - とある地味なブログ