Weitere ähnliche Inhalte
Ähnlich wie Try Jetpack (20)
Kürzlich hochgeladen (10)
Try Jetpack
- 1. JetpackでFirefox
を拡張しよう
2010/02/20
mollifier
http://d.hatena.ne.jp/mollifier/
- 4. Jetpack とは
拡張を書く:基本編
拡張を書く:応用編
参考ページ
- 5. Jetpack とは
拡張を書く:基本編
拡張を書く:応用編
参考ページ
- 13. TabGroup
Organizer
http://jetpackgallery.mozill
alabs.com/jetpacks/164
インストールページ
- 19. ステータスバーに
ボタンを追加
右クリックメニューに
追加
- 21. Jetpack とは
拡張を書く:基本編
拡張を書く:応用編
参考ページ
- 24. 必要なもの
Firefox
Jetpack 本体
Firebug
好きなエディタ
- 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 名"
- 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 の $
- 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 が使える
- 56. onReady: function(widget) {
// 略 ...
$.get(
"http://www.google.co.jp/search",
{q: word},
function(data) {
var info = $(data, widget).
find("#resultStats").text();
コンテキストを指定する
必要がある。
- 59. onReady: function(widget) {
// 略 ...
$.get(
function(data) {
var info = $(data, widget).
find("#resultStats").text();
widget が追加したパネルの
Document オブジェクトになっ
ているので、うまくいく。
- 60. Jetpack とは
拡張を書く:基本編
拡張を書く:応用編
参考ページ
- 74. function(c) {
return {
// c.node で右クリックした対象の
// DOM node が参照できる
label:
"hide <" + c.node.nodeName + ">",
command: function() {
$(c.node).fadeOut("fast");
}
};
}
- 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 に対応
- 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");
- 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 とは
拡張を書く:基本編
拡張を書く:応用編
参考ページ
- 94. Jetpack ソースコード
hg clone http://hg.mozilla.org/labs/
jetpack/ jetpack-src
でソースコードを取得
http://hg.mozilla.org/labs/j
etpack/
リンク