このページでやること

Firefoxのadd-on で content_scriptを扱いたい

やること

firefox の add-on のビルドセットを作る
最初のAdd-onを作る
content-script でサイト毎に動作するものを作る

最初にやること

cfx コマンドのインストール

cfx コマンドが超便利すぎてヤバイ。

OSX なら homebrew で一発

brew install mozilla-addon-sdk

Windows/Linuxなら該当バイナリをダウンロードする。

cfx インストールの確認

takuya@rena:~$ which cfx
/usr/local/bin/cfx
takuya@rena:~$ cfx
Usage: cfx [options] command [command-specific options]

Supported Commands:
  init       - create a sample addon in an empty directory
  test       - run tests
  run        - run program
  xpi        - generate an xpi

Internal Commands:
  testcfx    - test the cfx tool
  testex     - test all example code
  testpkgs   - test all installed packages
  testall    - test whole environment

Experimental and internal commands and options are not supp

インストール完了したら、早速アドオン作成

最初のアドオン

ディレクトリを作って、cfx で初期化してテスト

takuya@rena:~/Desktop$ mkdir  my-first-addon
takuya@rena:~/Desktop$ cd my-first-addon
takuya@rena:~/Desktop/my-first-addon$ cfx init
* lib directory created
* data directory created
* test directory created
* generated jID automatically: jid1-AZOZHJSv44CM6Q
* 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!

ディレクトリをmkdir して、cfxで init するだけ。超かんたん

テストする

cfx test

その後に、実際に実行する

cfx run

cfx run でaddon が追加されたfirefoxウインドウが開く、動作確認したいときはこれ

実際に作ってみる

takuya@rena:~/Desktop/my-first-addon$ cat - > 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 ディレクトリに入れる

cd data
wget https://mdn.mozillademos.org/files/7635/icon-16.png
wget https://mdn.mozillademos.org/files/7637/icon-32.png
wget https://mdn.mozillademos.org/files/7639/icon-64.png

テスト起動する

cfx run

起動したらボタンができてる

f:id:takuya_1st:20150524013213j:plain:w400

メッチャ速い。こりゃ楽だわ

パッケージ化

cfx xpi

これでパッケージ化出来上がり。

ページを書き換える content_script 系は

新規でパッケージフォルダを作って

cat - > lib/main.js
// Import the page-mod API
var pageMod = require("sdk/page-mod");
 
// 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",
  contentScript: 'document.body.innerHTML = ' +
                 ' "<h1>Page matches ruleset</h1>";'
});

これで出来上がり。とても分かりやすいサンプルでいいですね。

外部ファイルから読み込みたい場合は

  contentScriptFile: self.data.url("my-script.js")

  contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")]

と contentscriptFile と書けばイイ、一枚でも複数ファイルでも簡単ですね

firefox のxpi は作りやすくなってる

Documentとツールの充実度がヤバい感じしました。

chrome の manifest.json でよくカンマ忘れで起こられること思うとずっと楽だわ。

参考資料

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

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

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

PageMod オブジェクトの使い方はDocumentにある。

PageMod({
  include : string/array,//必須
  contentScript: string/array,
  contentScriptFile: string/array,
  contentScriptWhen: "start"/"ready"/"end"  //デフォルト end
  contentScriptOptions: {} //オブジェクト
  contentStyleFile: string/array,
  contentStyle: string/array,
  onAttach: function //content script が呼ばれるタイミングでcall
})

page-mod - Add-on SDK Documentation

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

３分で憶える、Firefox のcontent_scripts拡張機能の作り方