Recommandé
Contenu connexe
Tendances
Tendances (18)
En vedette
En vedette (19)
Similaire à Try Jetpack
Similaire à Try Jetpack (20)
Dernier
Dernier (8)
Try Jetpack
- 1. JetpackでFirefox を拡張しよう 2010/02/20 mollifier http://d.hatena.ne.jp/mollifier/
- 2. id:mollifier
- 3. 今日は Jetpack で Firefox 拡張が書けるよ うになって帰りましょう
- 4. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 5. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 13. TabGroup Organizer http://jetpackgallery.mozill alabs.com/jetpacks/164 インストールページ
- 16. Featureの特徴
- 18. Firefox の UI を 操作できる
- 19. ステータスバーに ボタンを追加 右クリックメニューに 追加
- 21. Jetpack とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 23. その前に開発環境を そろえる
- 24. 必要なもの Firefox Jetpack 本体 Firebug 好きなエディタ
- 25. すぐに準備できる。 うれしい。
- 26. 1. Hello World
- 27. jetpack.tabs.onReady(function() { console.log("Hello World!"); });
- 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
- 35. jetpack.statusBar.append({ html: "<em>Hello</em>", width: 45, });
- 36. HTML を直接書ける jetpack.statusBar.append({ html: "<em>Hello</em>", width: 45, });
- 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 の $
- 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. ポイント 1
- 45. jetpack.future.import( "pageMods"); この1行を書いておくと pageMods という機能が有 効になる
- 46. ポイント 2
- 47. function callback(doc) { // doc が読み込んだページの // document オブジェクト $("a.keyword", doc).each( function() { // 何か処理 } ); }
- 48. よくある書き方 function callback(doc) { // 引数が一つだけ $("a.keyword").each( function() { // 何か処理 } ); }
- 50. function callback(doc) { // 第二引数で // どこから要素を探すか // 明示的に指定する $("a.keyword", doc).each( function() { // 何か処理 } ); }
- 51. 4. Info
- 52. Ajaxの例
- 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 コードでは var info = $(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 とは 拡張を書く:基本編 拡張を書く:応用編 参考ページ
- 63. 1. 右クリック メニュー
- 64. まずは簡単な例
- 66. jetpack.future.import("menu"); jetpack.menu.context.page.add({ label: "simple menu", command: function() { console.log("simple menu"); } });
- 68. 右クリックメニューに 追加する jetpack.menu.context.page.add({ // 追加するメニューの内容 });
- 69. jetpack.menu.context.page.add({ // メニューに表示する文言 label: "simple menu", // メニューを選択したときの // コールバック関数 command: function() { console.log("simple menu"); } });
- 70. これをふまえて
- 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"); } }; }
- 76. 2. 設定画面
- 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; } // ... 続く
- 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. 英語ページ
- 93. Jetpack Gallery Jetpack Feature がいっ ぱいある http://jetpackgallery.mozill alabs.com/ リンク
- 94. Jetpack ソースコード hg clone http://hg.mozilla.org/labs/ jetpack/ jetpack-src でソースコードを取得 http://hg.mozilla.org/labs/j etpack/ リンク
- 95. 日本語ページ
- 100. ローカルの Jetpack Feature ファイルを インストールする Feature http://d.hatena.ne.jp/terama ko/20091201 リンク
- 103. ありがとう ございました