簡単なFireFox拡張作成方法！

Firefox addon

簡単なFireFox拡張が作成出来たので覚え書き。

去年の11月からkamadoという会社でLivlisというシステムを作成しているのですが、Googleの検索結果にもLivlisの検索結果が表示出来ないかなーと思ってFireFoxの拡張を書いてみました。

開発の流れ

ざっと説明するとまず下記にアクセスして、開発環境を整えます。
https://jetpack.mozillalabs.com/sdk/1.0b5/docs/dev-guide/addon-development/getting-started.html

開発環境を整えると、ファイルが一つもないディレクトリ内で。下記コマンドを実行するとxpiファイルを作成するjs群が自動生成されます。

cfx init

後は lib/main.js ファイルを編集して下記コマンドでxpiファイルを作成します。

cfx xpi

作成されたxpiファイルをFireFoxにドラッグ＆ドロップしてインストールで完了。

Livlisの検索結果をGoogleにも表示させてみる

先程の開発の流れでlib/main.jsを下記の様に書く。

var pageMod = require("page-mod");

exports.main = function(options, callbacks) {

    var matcher = pageMod.PageMod({
    include: ['*'],
    contentScriptWhen: 'ready',
    contentScript:
      'var rh = document.createElement("script"); rh.type = "text/javascript"; rh.async = true;'
      + 'rh.src = "http://www.livlis.com/js/ff.js";'
      + 'var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(rh, s);'
      + 'console.log("javascript.");'
    ,
    onAttach: function(worker) {
    }
    });

};

exports.onUnload = function (reason) {
    console.log(reason);
};

lib/main.js内のjs全てを書ききる事も可能ですが、開発者都合でアップデートかけたい！という時はlib/main.js内でDOM操作し、script エレメントを作成し外部JSを呼び出す事で実現出来ます。

lib/main.jsから呼び出されるjsは下記
http://www.livlis.com/js/ff.js

ff.jsでLivlisのサーバーにJSONPを行いJSONを取得してDOM操作します。

xpiファイルを作成し、インストールすると下記の様な画面になります。

注意

サンプルはとても簡単に書いてしまってiframe内でも見境無しに通信しにいって重くなるのであくまでサンプルにして下さいー。


[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/