jetpack sdk 0.5 開発デモ
TRANSCRIPT
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 <[email protected]>"}
メインプログラム
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); };};
ありがとうございました