Hatena::ブログ(Diary)

@camelmasaの開発日記 このページをアンテナに追加 RSSフィード

Githubで活動しています。

2011-06-04

簡単なFireFox拡張作成方法!

| 01:59

簡単な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.jsLivlisサーバーJSONPを行いJSONを取得してDOM操作します。

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

f:id:camelmasa:20110605015649j:image


注意

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



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

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。

このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。

http://spreecommerce.jp/

2010-01-30

Firefoxのアドオンを初めて作成しました。

| 00:24

Firefoxのaddonを始めて作成しました。

いきなり高度なものを作ろうとはせず、どうやってパッケージを作成したのかを記事にします。

環境

Firefox 3.5.7


about:configの設定

下記のブログを読み、Firefoxのabout:configの設定を変えました。

Firefox拡張(アドオン)開発入門 - プログラミングノート


アドオンの雛形をダウンロード

下記URLid:sotarokさんが開発したアドオンの雛形があります。

no title

これをsvnでチェックアウトします。


install.rdfの編集

trunk直下にあるinstall.rdf内の"maxVersion"値を下記の様に変更します。

<em:maxVersion>3.5.7</em:maxVersion>

xpiファイルの作成

trunk直下のファイルを纏めてzipします。

(trunkのフォルダをzipしてしまうと、インストール時エラーになってしまうので注意。

参考iThink -Firefox 3.5RC2をインストール&アドオンインストール(ハックみたいなもの))

zipしたファイルの拡張子を.xpiに変更し、Firefoxドラッグ&ドロップします。

すると下記の様なウィンドウが表示されます。

f:id:camelmasa:20100131002120p:image

再起動すると…

f:id:camelmasa:20100131002121p:image

f:id:camelmasa:20100131002122p:image

少し感動的です。


まとめ

xpiファイルが実はzipしたファイルだったとは知りませんでした。

後は、実行されるjsの部分や表示の位置等を変更すれば色々応用出来ますね。

最後にid:sotarokさん、アドオンの雛形凄く便利です!有難う御座います!



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

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。

このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。

http://spreecommerce.jp/