THE HAM MEDIA BLOG

FirefoxのアドオンをjQueryで作成!?Jetpackを使ってみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
便利サイト
タグ:
Firefox
アドオン
Jetpack

Jetpack

Firefoxのアドオンが簡単に作れるようになるなんてのを、Mozilla Labsがリリースしていました。

いろいろ話題が出てきていますが、自分も少し触ってみました。

jQueryで作るアドオン

基本的にJavaScriptを使ってアドオンが作れる!っていうものらしいのですが、うれしいことにjQueryが使えるようになっているので、jQueryのことを知っていると、少しは敷居が低くなっている気がします。

しかし、いろいろJetpackのコードとかを知っておかないと使えなかったりエラーになったりするようです。

中をのぞいてみると、jQuery以外にもいろんなJavaScrioptが動作しているっぽい。

Jetpack

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

すると、再起動しなくてもそのまま使えるようになっています。

Jetpack

インストールしたJetpack Featureは、「about:jetpack」のInstalled Featuresタブのところで扱えるようになっています。アンインストールなどもここでできます。

Jetpack

まだまだテスト段階

まだテスト段階のようですし、先ほども気づいたらバージョンアップがされていたので、今後どんどん良くなっていくんじゃないかなーなんて思う。自分もこれにつては少しずつ勉強していくとしようかな。

amachangが早速サンプル書いてました

amachangのブログにて、早速試しに使ってみたというソースが公開されていました。

自分も早くすぐにコードが書けるようになってみたいものです。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。