開発方法
| Add-on Builder |
Jetpack SDK |
 |
 |
開発に必要なもの
- Firefox 3.6 （4.0系は現在未対応）
- addons.mozilla.org のアカウント
- Add-on Builder Helper アドオン
Hello, World!
- メイン関数
exports.main
- 標準関数
console.log でエラーコンソールへ文字列出力
exports.main = function() {
console.log("Hello, World!");
};
標準モジュール
require 関数でモジュールをインポートtimer.setInterval は window.setInterval と同等
const timer = require("timer");
exports.main = function() {
timer.setInterval(function() {
console.log(new Date().toLocaleTimeString());
}, 1000);
};
天気をアドオンバーに表示したい
使用するモジュール
Widget API （アドオンバーへのボタン追加）
Request API （GoogleのAPIで天気を取得）
Widget モジュールでボタン追加
Widget コンストラクタでボタンを生成add メソッドでボタンをアドオンバーへ追加
const widgets = require("widget");
exports.main = function() {
var button = widgets.Widget({
label : "Tenki",
width : 200,
content: "<html><body>Tenki</body></html>"
});
widgets.add(button);
};
Request モジュールでHTTP通信
Request コンストラクタでHTTP通信インスタンスを生成get メソッドでGET通信開始
const widgets = require("widget");
const requests = require("request");
exports.main = function() {
...
var req = requests.Request({
url: "http://www.google.com/ig/api?hl=ja&weather=Tokyo",
onComplete: function() {
var xml = this.response.xml;
var cond = xml.querySelector("current_conditions > condition").
getAttribute("data");
button.content = "<html><body>" + cond + "</body></html>";
}
});
req.get();
};
使用するモジュール
Widget API （アドオンバーへのボタン追加）
Request API （GoogleのAPIで天気を取得）
Simple Persona API （ペルソナ風に画像を表示）
自作モジュールの追加
Simple Persona モジュール実装
require("chrome") で XPCOM へアクセスexports.メソッド名 = function() { ... };
const {Cc, Ci} = require("chrome");
function getBrowserWindow() {
var svc = Cc["@mozilla.org/appshell/window-mediator;1"].
getService(Ci.nsIWindowMediator);
return svc.getMostRecentWindow("navigator:browser");
}
exports.setBackground = function(url) {
var root = getBrowserWindow().document.documentElement;
root.style.background = "url(" + url + ") white repeat left top";
root.setAttribute("lwtheme", "true");
};
Simple Persona モジュールを使用
const widgets = require("widget");
const requests = require("request");
const simplePersona = require("simple-persona");
exports.main = function() {
...
onComplete: function() {
...
var icon = xml.querySelector("current_conditions > icon").
getAttribute("data");
...
simplePersona.setBackground("http://www.google.com" + icon);
}
...
};
動作確認
さらなる展望
- 天気情報を定期的に更新したい
⇒Timer API の setInterval で繰り返し処理
- 現在地に応じた天気情報を取得したい
⇒Geolocation API を自作？
- 新しいウィンドウにもペルソナを適用したい
⇒Window Tracker API を利用？
- 自作の画像を表示させたい
⇒Attachments として画像ファイルを追加し、 Self API で参照
