Jetpack for Firefox を使用すると、習得したフロントエンド スキル (HTML/CSS/JS) のみを使用して Firefox プラグインを簡単に作成できます。さらに興味深いのは、Jetpack には jQuery フレームワークも統合されているということです。
Adobe Air、Web OS、Jetpack のいずれであっても、少なくともフロントエンドの価値が機会においてますます発揮されることを確信しましょう。
最初の Firefox Jetpack 拡張機能を作成する方法を段階的に見てみましょう。
ステップ 1: Jetpack プラグインをインストールする
Jetpack プラグインのアドレス: https://jetpack.mozillalabs.com/install.html
Jetpack プラグインをインストールした後、アドレス バーに「about : jetpack」と入力すると、Jetpack ローカル インターフェイスにアクセスできます。
ステップ 2: planabc.js ファイルを作成します。
planabc.jsの詳細なコードは次のとおりです。
ジェットパック.ステータスバー.
html : '<img src="http://www.planabc.net/favicon.ico"/>' ,
幅： 16 、
onReady : 関数(ウィジェット){
$ (ウィジェット) .click ( function (){
ジェットパック.contentWindowの場所= "http://www.planabc.net/" ;
});
}
}); Jetpack . statusBar . append はJavaScript オブジェクトを実行します (JavaScript オブジェクトには html、url、width、および onReady の 4 つのプロパティがあります)。
- html 属性: ステータス バーに表示される初期 HTML を定義します。この例では、単純な IMG 要素が表示されます。
- url 属性: ステータス バーに表示される外部 HTML コンテンツの URL を定義します。この例では、このプロパティは使用されません。
- width 属性: ステータスバーのコンテンツの幅を定義します(単位: ピクセル)。この例では、IMG 要素自体の幅である 16 ピクセルとして定義されています。
- onReady 属性: 呼び出される関数を定義します (この関数はステータス バーが作成されると呼び出されます)。 Jetpack は jQuery フレームワークを統合しているため、jQuery のプロパティとメソッドを直接使用できます。この例では、 Jetpack拡張機能がクリックされると、 contentWindowの場所がhttp://www.planabc.net/に変更されます。 Jetpack . tabs . contentWindow . locationオブジェクトは、Web ページにアクセスするために JavaScript を通じてアクセスできます。
