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/
ありがとうございました