Jetpack SDK 0.5 開発デモ

SDK 0.5 開発デモ

Gomita

1. 開発環境準備・Pythonインストール・SDKセットアップ

2. 「Hello, World」パッケージ作成・マニフェストファイル・メインプログラム・インストーラ

3. 「Copy Title + URL」パッケージ・メインプログラム・自作ライブラリ

1. 開発環境準備・Pythonインストール・SDKセットアップ

2. 「Hello, World」パッケージ作成・マニフェストファイル・メインプログラム・インストーラ

3. 「Copy Title + URL」パッケージ・メインプログラム・自作ライブラリ

入手先

Pythonhttp://www.python.org/download/Jetpack SDKhttps://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

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

exports.main = function(options, callbacks) { console.log("Hello, World!");};

テスト実行

パッケージのルートフォルダ内で...

cfx run -a firefox

標準ライブラリ使用

require 関数で標準の timer ライブラリをインポート

timer.setInterval は window.setIntervalと同等

const timer = require("timer");

exports.main = function(options, callbacks) { timer.setInterval(function() { console.log(new Date().toLocaleTimeString()); }, 1000);};

インストーラ作成

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

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/

ありがとうございました