このチュートリアルを行うには SDK をインストール し、cfx の基本 について学んでいる必要があります。
このチュートリアルは、Firefox 29 以降で使用可能な アクションボタン API を使用しています。
ポップアップダイアログを表示するには、panel モジュールを使用します。パネルのコンテンツは HTML を使用して定義されます。パネル内でコンテンツのスクリプトを実行できます: パネル内で実行されるスクリプトは、アドオンのメインコードには直接アクセスできませんが、パネルのスクリプトとアドオンのコードの間でメッセージを交換できます。
このチュートリアルでは、クリックした際にパネルを表示する アクションボタン をツールバーに追加したアドオンを作成します。パネルには、<textarea> 要素のみが含まれています: return キーを押すと、<textarea> 内のコンテンツがメインのアドオンコードに送信されます。メインのアドオンコードでは、メッセージをコンソールログに表示 します。
アドオンは 6 つのファイルで構成されています:
main.js: アドオンのメインコードで、ボタンとパネルを生成しますget-text.js: パネルのコンテンツとインタラクティブなコンテンツスクリプトですtext-entry.html: パネルのコンテンツそのもので、HTML で記述されますicon-16.png、icon-32.png、icon-64.png: 3 つの異なるサイズのボタン用アイコンです
"main.js" は以下のようになっています:
var data = require("sdk/self").data;
// Construct a panel, loading its content from the "text-entry.html"
// file in the "data" directory, and loading the "get-text.js" script
// into it.
var text_entry = require("sdk/panel").Panel({
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
// Create a button
require("sdk/ui/button/action").ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
// Show the panel when the user clicks the button.
function handleClick(state) {
text_entry.show();
}
// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
text_entry.on("show", function() {
text_entry.port.emit("show");
});
// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});
コンテンツスクリプト "get-text.js" は、以下のようになっています:
// When the user hits return, send the "text-entered"
// message to main.js.
// The message payload is the contents of the edit box.
var textArea = document.getElementById("edit-box");
textArea.addEventListener('keyup', function onkeyup(event) {
if (event.keyCode == 13) {
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
self.port.emit("text-entered", text);
textArea.value = '';
}
}, false);
// Listen for the "show" event being sent from the
// main add-on code. It means that the panel's about
// to be shown.
//
// Set the focus to the text area so the user can
// just start typing.
self.port.on("show", function onShow() {
textArea.focus();
});
そして、"text-entry.html" ファイルで <textarea> 要素を定義します:
<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
body {
background-color: gray;
}
</style>
</head>
<body>
<textarea rows="13" cols="33" id="edit-box"></textarea>
</body>
</html>
3 種類のアイコンファイルを "data" ディレクトリに保存します:
 |
icon-16.png |
 |
icon-32.png |
 |
icon-64.png |
試してください: "main.js" をアドオン内の lib ディレクトリに保存し、他の 5 つのファイルをアドオン内のdata ディレクトリに保存してください:
my-addon/
data/
get-text.js
icon-16.png
icon-32.png
icon-64.png
text-entry.html
lib/
main.js
アドオンを実行し、ボタンをクリックすると、パネルが表示されます。テキストを入力し、"return" を押すと、コンソールに出力されます。
Firefox 30 以降では、トグルボタン を使用すると、 ボタンからパネルを呼び出せます。
詳しく学ぶ
panel モジュールについてさらに学ぶには、panel API リファレンス をご覧ください。