FirefoxのアドオンをjQueryで作成!?Jetpackを使ってみた
Firefoxのアドオンが簡単に作れるようになるなんてのを、Mozilla Labsがリリースしていました。
Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web
いろいろ話題が出てきていますが、自分も少し触ってみました。
jQueryで作るアドオン
基本的にJavaScriptを使ってアドオンが作れる!っていうものらしいのですが、うれしいことにjQueryが使えるようになっているので、jQueryのことを知っていると、少しは敷居が低くなっている気がします。
しかし、いろいろJetpackのコードとかを知っておかないと使えなかったりエラーになったりするようです。
中をのぞいてみると、jQuery以外にもいろんなJavaScrioptが動作しているっぽい。
DOMの扱い
ぱっと使ってみた感じなのだが、読み込まれるタイミングのもんだいなのか、DOM操作は通常のjQueryの時と違ってうまく読み取ってくれない様子。例えば$('div#test')などと書いたとしても動作しない。やり方があるのだろうけど、今はまだうまくそれを理解できなかった。
alertなど
他にも普通にHTMLの中に書き加えるような感じでスクリプトを書いていっても、alertやそのほか動作しないようなのもあるようだ。これも使っていかないとどうなのか不明。
console.log()
デモなどサンプルを見ると、console.log()を使ってFirebugのコンソール上に値を表示できるようなことが書いてあったのですが、Firefoxがおかしいのか、最初は問題なく動作していたものが、いつの間にか表示されなくなるなんて状態になった。これに関しても調べてみないと。
公開の仕方
自分で作ったコードは、インストールして使ってもらうことも可能。
JavaScriptとして保存しておいて、サーバーにあげる。そしてそれをインストールさせるHTMLのheadの記述に、下記ソースを入れておくだけで、インストールしますか?ときかれるようになる。
<link rel="jetpack" href="javascript.js" />
javascript.jsで、アップロードしたjsの場所を記述。
インストールするときに、なだか赤い画面が出てきますが、気にせず下のほうにある、右側のボタン(I know what I'm doimg. Install it!)をクリック。
すると、再起動しなくてもそのまま使えるようになっています。
インストールしたJetpack Featureは、「about:jetpack」のInstalled Featuresタブのところで扱えるようになっています。アンインストールなどもここでできます。
まだまだテスト段階
まだテスト段階のようですし、先ほども気づいたらバージョンアップがされていたので、今後どんどん良くなっていくんじゃないかなーなんて思う。自分もこれにつては少しずつ勉強していくとしようかな。
amachangが早速サンプル書いてました
amachangのブログにて、早速試しに使ってみたというソースが公開されていました。
Firefox 拡張を jQuery で書く! Jetpack を使ってみた。 - IT戦記
自分も早くすぐにコードが書けるようになってみたいものです。