SDK 0.

5 開発デモ
Gomita

1. 開発環境準備
・Pythonインストール
・SDKセットアップ
2. 「Hello, World」パッケージ作成
・マニフェストファイル
・メインプログラム
・インストーラ
3. 「Copy Title + URL」パッケージ
・メインプログラム
・自作ライブラリ

1. 開発環境準備
・Pythonインストール
・SDKセットアップ
2. 「Hello, World」パッケージ作成
・マニフェストファイル
・メインプログラム
・インストーラ
3. 「Copy Title + URL」パッケージ
・メインプログラム
・自作ライブラリ

入手先
Python
http://www.python.org/download/
Jetpack SDK
https://jetpack.mozillalabs.com/

SDKを起動する

bin\activate

SDKドキュメントを表示する

cfx docs

1. 開発環境準備
・Pythonインストール
・SDKセットアップ
2. 「Hello, World」パッケージ作成
・マニフェストファイル
・メインプログラム
・インストーラ
3. 「Copy Title + URL」パッケージ
・メインプログラム
・自作ライブラリ

パッケージのフォルダ構成
フォルダ/ファイル

概要

jetpack-sdk-0.5
packages
hello-world

ルートフォルダ

package.json

マニフェストファイル

lib

プログラム格納フォルダ
main.js

メインプログラム

マニフェストファイル
パッケージのメタ情報をJSON形式で記述
hello-world \ package.json
{
"name": "hello-world",
"fullName": "Hello, World!",
"version": "0.1",
"description": "This is my first package.",
"author": "Gomita <gomita@xuldev.org>"
}

メインプログラム
hello-world \ lib \ main.js
exports.main = function(options, callbacks) {
console.log("Hello, World!");
};

console.log は標準のグローバル関数

テスト実行
パッケージのルートフォルダ内で...

cfx run -a firefox

標準ライブラリ使用
require 関数で標準の timer ライブラリをインポート
const timer = require("timer");
exports.main = function(options, callbacks) {
timer.setInterval(function() {
console.log(new Date().toLocaleTimeString());
}, 1000);
};

timer.setInterval は window.setIntervalと同等

インストーラ作成
パッケージから配布用インストーラを作成

cfx xpi
Firefox 3.7場合、
再起動せずにインストール可能

1. 開発環境準備
・Pythonインストール
・SDKセットアップ
2. 「Hello, World」パッケージ作成
・マニフェストファイル
・メインプログラム
・インストーラ
3. 「Copy Title + URL」パッケージ
・メインプログラム
・自作ライブラリ

完成イメージ

実装の概要
コンテキストメニューへ項目を追加する
→ Context Menu ライブラリを使用
現在のタブのタイトルとURLを取得する
→ Tabs ライブラリを使用
タイトルとURLをクリップボードへコピー
→ 標準のライブラリでは実現不可
→ Clipboard ライブラリを自分で作成

パッケージのフォルダ構成
フォルダ/ファイル

概要

jetpack-sdk-0.5
packages
copy-title-url

ルートフォルダ

package.json

マニフェストファイル

lib

プログラム格納フォルダ
main.js

メインプログラム

clipboard.js

自作ライブラリ

コンテキストメニューへの項目追加
const contextMenu = require("context-menu");
exports.main = function(options, callbacks) {
var newItem = contextMenu.Item({
label: "Copy Title and URL",
onClick: handleClick
});
contextMenu.add(newItem);
};
function handleClick(contextObj, item) {
// ToDo
}

現在のタブのタイトルとURLを取得
const contextMenu = require("context-menu");
const tabs = require("tabs");
exports.main = function(options, callbacks) {
...(snip)...
};
function handleClick(contextObj, item) {
var title = tabs.activeTab.title;
var url = tabs.activeTab.location;
console.log(title + "\n" + url);
}

ClipboardライブラリのAPI
メソッド

概要

setText( text )

引数 text をクリップボードへコピーする。

getText()

クリップボードにコピーされた文字列を
戻り値として返す。

Clipboardライブラリの実装
nsIClipboardHelper というXPCOMで内部処理を実装
copy-title-url \ lib \ clipboard.js
var clipboardHelper = Cc["@mozilla.org/widget/clipboardhelper;1"]
.getService(Ci.nsIClipboardHelper);
exports.setText = function(text) {
clipboardHelper.copyString(text);
};
exports.getText = function() {
// ToDo
};

タイトルとURLをコピー
const contextMenu = require("context-menu");
const tabs = require("tabs");
const clipboard = require("clipboard");
exports.main = function(options, callbacks) {
...(snip)...
};
function handleClick(contextObj, item) {
var title = tabs.activeTab.title;
var url = tabs.activeTab.location;
clipboard.setText(title + "\n" + url);
}

その他の標準ライブラリ
Widget ライブラリ
Request ライブラリ
Selection ライブラリ
まだまだ他にも色々あります
https://jetpack.mozillalabs.com/sdk/0.5/docs/

Widgetライブラリ
const widgets = require("widget");
exports.main = function(options, callbacks) {
var button = widgets.Widget({
label: "test",
image: "chrome://browser/skin/Geo.png",
onClick: function(event) { ...(snip)... }
});
widgets.add(button);
};

Requestライブラリ
XMLHttpRequest を使いやすくしたもの
const request = require("request");
exports.main = function(options, callbacks) {
var req = request.Request({
url: "http://api.twitter.com/1/statuses/public_timeline.json",
onComplete: function () {
var tweet = this.response.json[0];
console.log("User: " + tweet.user.screen_name);
console.log("Tweet: " + tweet.text);
}
});
req.get();
};

Selectionライブラリ
選択範囲を取得する
const selection = require("selection");
exports.main = function(options, callbacks) {
selection.onSelect = function() {
console.log(selection.html);
};
};

Add-ons Builder

http://builder.mozillalabs.com/

ありがとうございました