Download to read offline
![jetpack.future.import("pageMods");
function callback(doc) {
$("a.keyword", doc).each(function() {
$(this).replaceWith($(this).html());
});
}
var options = {};
options.matches = [
"http://d.hatena.ne.jp/*"
];
jetpack.pageMods.add(callback, options);](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-42-2048.jpg)
![var manifest = {
settings: [
{ name: "message",
type: "text",
label: "Name",
default: "" }
]
};
jetpack.future.import(
"storage.settings");](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-78-2048.jpg)
![// 設定項目を定義する
var manifest = {
settings: [
// ここに設定項目を書く
{ name: "message",
type: "text",
label: "Name",
default: "" }
]
};](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-79-2048.jpg)
![var manifest = {
settings: [
// ...
]
};
// manifest を定義した後に
// import する
jetpack.future.import(
"storage.settings");](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-80-2048.jpg)
![jetpack.future.import("pageMods");
var manifest = {
settings: [
{ name: "needCtrlKey", type: "boolean", label: "Ctrl key",
default: false },
{ name: "needAltKey", type: "boolean", label: "Alt key",
default: false }
]
};
jetpack.future.import("storage.settings");
function isTweetKey(e) {
if (jetpack.storage.settings.needCtrlKey && ! e.ctrlKey) {
return false;
}
if (jetpack.storage.settings.needAltKey && ! e.altKey) {
return false;
}
// 13 : Enter key code
return e.keyCode === 13;
}
// ... 続く](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-84-2048.jpg)
![2つ設定項目をつくる
var manifest = {
settings: [
{ name: "needCtrlKey", type: "boolean",
label: "Ctrl key", default: false },
{ name: "needAltKey", type: "boolean",
label: "Alt key", default: false }
]
};
jetpack.future.import("storage.settings");](https://image.slidesharecdn.com/try-jetpack-100221033104-phpapp01/75/Try-Jetpack-86-2048.jpg)
![[2025 Rakuten Technology Conference] Daybreak for AI Agents](https://cdn.slidesharecdn.com/ss_thumbnails/2025rakutentechnologyconferenceai-251119080407-027fe107-thumbnail.jpg?width=640&height=640&fit=bounds)
Try Jetpack
- 1. JetpackでFirefox を拡張しよう 2010/02/20 mollifier http://d.hatena.ne.jp/mollifier/
- 2.
- 3. 今日は Jetpack で Firefox拡張が書けるよ うになって帰りましょう
- 4. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 5. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. TabGroup Organizer http://jetpackgallery.mozill alabs.com/jetpacks/164 インストールページ
- 14.
- 15.
- 16.
- 17.
- 18. Firefox の UIを 操作できる
- 19. ステータスバーに ボタンを追加 右クリックメニューに 追加
- 20.
- 21. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 22.
- 23.
- 24. 必要なもの Firefox Jetpack 本体 Firebug 好きなエディタ
- 25.
- 26.
- 27. jetpack.tabs.onReady(function() { console.log("Hello World!"); });
- 28.
- 29. <html> <head> <!-- ここが大事 --> <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> <title>Hello World</title> </head> <!-- 略 ... -->
- 30. <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> href="Featureのパス" Web上に置いてある場合は http:// ... 形式で指定する name="Feature 名"
- 31. jetpack.tabs.onReady( // ここに関数を書くと // 新しいタブを開いた // ときに呼び出される );
- 32. jetpack.tabs.onReady( // Firebug の // コンソールに // 出力される console.log( "Hello World!"); );
- 33. 2. Hello Jetpack in Statusbar
- 34.
- 35. jetpack.statusBar.append({ html:"<em>Hello</em>", width: 45, });
- 36. HTML を直接書ける jetpack.statusBar.append({ html: "<em>Hello</em>", width: 45, });
- 37.
- 38. jetpack.statusBar.append({ html:"Click", width: 45, onReady: function(widget){ $(widget).click(function() { jetpack.notifications.show( "Hello Statusbar"); }); } });
- 39. onReady: function(widget){ $(widget).click(function() { // 何か処理 }); } onReady : 新しいパネルが作られた 際のコールバック widget : パネル要素 $ : jQuery の $
- 40.
- 41.
- 42. jetpack.future.import("pageMods"); function callback(doc) { $("a.keyword", doc).each(function() { $(this).replaceWith($(this).html()); }); } var options = {}; options.matches = [ "http://d.hatena.ne.jp/*" ]; jetpack.pageMods.add(callback, options);
- 43.
- 44.
- 45.
- 46.
- 47. function callback(doc) { // doc が読み込んだページの // document オブジェクト $("a.keyword", doc).each( function() { // 何か処理 } ); }
- 48. よくある書き方 function callback(doc) { // 引数が一つだけ $("a.keyword").each( function() { // 何か処理 } ); }
- 49.
- 50. function callback(doc) { // 第二引数で // どこから要素を探すか // 明示的に指定する $("a.keyword", doc).each( function() { // 何か処理 } ); }
- 51.
- 52.
- 53. jetpack.statusBar.append({ html:"<button>info</button>", width: 60, onReady: function(widget) { $(widget).click(function() { var word = jetpack.tabs.focused. contentWindow.getSelection(); $.get("http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); jetpack.notifications.show(info); }); }); } });
- 54. $.get( "http://www.google.co.jp/search", {q: word}, function(data) { // 受信した後の処理 } ); 普通に jQuery の $.get が使える
- 55.
- 56. onReady: function(widget) { // 略 ... $.get( "http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); コンテキストを指定する 必要がある。
- 57. 普通の jQuery コードでは varinfo = $(data); これで内部的に document.createElement が呼び出される。
- 58. Jetpack Feature では documentで Document オブジェクトが 参照できない
- 59. onReady: function(widget) { // 略 ... $.get( function(data) { var info = $(data, widget). find("#resultStats").text(); widget が追加したパネルの Document オブジェクトになっ ているので、うまくいく。
- 60. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 61.
- 62.
- 63. 1. 右クリック メニュー
- 64.
- 65.
- 66. jetpack.future.import("menu"); jetpack.menu.context.page.add({ label:"simple menu", command: function() { console.log("simple menu"); } });
- 67.
- 68. 右クリックメニューに 追加する jetpack.menu.context.page.add({ // 追加するメニューの内容 });
- 69. jetpack.menu.context.page.add({ //メニューに表示する文言 label: "simple menu", // メニューを選択したときの // コールバック関数 command: function() { console.log("simple menu"); } });
- 70.
- 71.
- 72. jetpack.future.import("menu"); jetpack.menu.context.page.add( function(c) { return { label: "hide <" + c.node.nodeName + ">", command: function() { $(c.node).fadeOut("fast"); } }; });
- 73. jetpack.menu.context.page.add( function(c) { // この関数内で新しい // メニューの内容を作って返す。 // c が右クリックした対象。 } );
- 74. function(c) { return { // c.node で右クリックした対象の // DOM node が参照できる label: "hide <" + c.node.nodeName + ">", command: function() { $(c.node).fadeOut("fast"); } }; }
- 75.
- 76.
- 77.
- 78. var manifest ={ settings: [ { name: "message", type: "text", label: "Name", default: "" } ] }; jetpack.future.import( "storage.settings");
- 79. // 設定項目を定義する var manifest= { settings: [ // ここに設定項目を書く { name: "message", type: "text", label: "Name", default: "" } ] };
- 80. var manifest ={ settings: [ // ... ] }; // manifest を定義した後に // import する jetpack.future.import( "storage.settings");
- 81. // これで参照できる var name= jetpack.storage. settings.message; // settings: [ // { name: "message", // この message に対応
- 82.
- 83. Twitter の Web 画面でEnter を 押しただけでつぶ やく Feature を 作る
- 84. jetpack.future.import("pageMods"); var manifest ={ settings: [ { name: "needCtrlKey", type: "boolean", label: "Ctrl key", default: false }, { name: "needAltKey", type: "boolean", label: "Alt key", default: false } ] }; jetpack.future.import("storage.settings"); function isTweetKey(e) { if (jetpack.storage.settings.needCtrlKey && ! e.ctrlKey) { return false; } if (jetpack.storage.settings.needAltKey && ! e.altKey) { return false; } // 13 : Enter key code return e.keyCode === 13; } // ... 続く
- 85.
- 86. 2つ設定項目をつくる var manifest ={ settings: [ { name: "needCtrlKey", type: "boolean", label: "Ctrl key", default: false }, { name: "needAltKey", type: "boolean", label: "Alt key", default: false } ] }; jetpack.future.import("storage.settings");
- 87. Twitter ショートカット キーだったらつぶやく function callback(doc){ var textBox = $("#status", doc); textBox.keydown(function(e) { if (isTweetKey(e) && textBox.value !== "") { $("#update-submit", doc).click(); } }); }
- 88. 押したキーの種類を 判別する function isTweetKey(e) { if (jetpack.storage.settings.needCtrlKey && ! e.ctrlKey) { return false; } if (jetpack.storage.settings.needAltKey && ! e.altKey) { return false; } // 13 : Enter key code return e.keyCode === 13; }
- 89. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 90.
- 91.
- 92.
- 93. Jetpack Gallery Jetpack Featureがいっ ぱいある http://jetpackgallery.mozill alabs.com/ リンク
- 94. Jetpack ソースコード hg clonehttp://hg.mozilla.org/labs/ jetpack/ jetpack-src でソースコードを取得 http://hg.mozilla.org/labs/j etpack/ リンク
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. ローカルの Jetpack Feature ファイルを インストールするFeature http://d.hatena.ne.jp/terama ko/20091201 リンク
- 101.
- 102.
- 103.