FirefoxのアドオンJetPackを試す
どうも、ソリューションチームの中西です。
Firefoxのアドオンとして発表されたJetpackが話題になっているようですのでちょっと遊んでみます。
JetpackはFirefoxのアドオンを作りやすくするアドオンです。
JavaScriptライブラリのJQueryで作成することができます。
とりあえずJetpackをインストールします。
下記サイトのGetStartedをクリックしてからFirefoxを再起動してください。
https://jetpack.mozillalabs.com/
インストールされたらさっそく試してみましょう。
ロケーションバーに about:jetpack と入力してください。
Jetpackの設定画面が表示されます。
ここではJetpack開発のチュートリアルやらインストールされているJetpackスクリプトの管理、そして開発が行えます。
Developタブを押すとエディタ上で開発が行えます。
「try out this code」の部分を押せばすぐに動作確認できます。
開発する場合はFirebugがあった方が良いです。
では、そろそろ開発を。
まずはお約束Hello,Worldから。
----------------------------------
$(function(){
jetpack.statusBar.append({
onReady: function(doc){
jetpack.notifications.show("Hello , Jetpack");
}
});
});
----------------------------------
実行するとお約束な文字列が表示されます。
もうちょっと色々さわってみます。
ステータスバーにロックオンが誇るEbisのマスコットのエビス君のアイコンを表示させてみましょう。
そしてエビス君をクリックするとHello,Ebisと表示させるようにします。
----------------------------------
$(function(){
jetpack.statusBar.append({
//エビス君のアイコンを表示させる。
html: '< img src="http://www.ebis.ne.jp/favicon.ico" alt="" width="20" height="20" />',
width: 20 ,
//クリックするとメッセージを表示させる。
onReady: function(doc){
$(doc).find("img").click(function(){
jetpack.notifications.show("Hello ,Jetpack");
});
}
});
});
----------------------------------
と、まあ、こんな感じで比較的簡単にFirefoxに機能を追加することができます。
かなりお気軽に拡張機能が作れるようになっていますので皆様もアドオン開発にじゃんじゃんチャレンジしてください。
じつは恥ずかしながらJQueryを触った事が無かったのでJQueryで戸惑いました…
ついでにJQueryも勉強します。
