Toolboxに新しいツールを追加するアドオンを作成する方法。

この機能はFirefox 34で新しく追加されました。

現時点では、これらのAPIで開発されたツールを使用してリモートターゲット(Firefox OS、Firefox OS Simulator、Android用Firefoxなど)をデバッグすることはできません。 私たちはこの制限を取り除くことに取り組んでいます。

この記事では、Toolboxに新しいツールを追加するアドオンを作成する方法について説明します。 作成するツールは、リモートデバッグプロトコル用の最小限のREPLです。これにより、デバッガサーバーにメッセージを送信し、サーバーからの応答を表示できます。

GitHub上にアドオンの全ソースコードがあります: https://github.com/mdn/repl-panel.

前提条件

まだAdd-on SDKを使用していない場合は、まずSDKをインストールして、Getting Startedチュートリアルに従ってください。

これを実行したら、新しいディレクトリを作成し、コマンドラインでそのディレクトリに移動し、jpm initと入力して新しいアドオンのスケルトン構造を作成します。

また、Firefox 34以降が必要です。

アドオンの作成

新しいツールを追加するために、dev/panelPanelクラスを拡張するREPLPanelクラスを定義します。

A Panel represents a panel in the toolbox, like the panels occupied by the built-in JavaScript Debugger or the Web Console. You specify the panel's content and behavior using HTML, CSS, and JavaScript. When a panel is created, the framework passes it a debuggee object. The panel can use debuggee to exchange JSON messages with the debugger server running inside Firefox.

Our add-on will define a REPLPanel, which passes the debuggee into a script running inside the panel's document. The panel's document will define a textarea for the user to enter JSON messages to send the server, and a pre block to display the response. The script will use debuggee to:

  • textareaの内容をサーバーに送信する
  • サーバーからのメッセージをリッスンし、結果をpreブロックに表示する

main.js

The SDK's jpm init command creates a file called "main.js" in the "lib" directory under the add-on's root. Open this file and replace its contents with this:

// require the SDK modules
const { Panel } = require("dev/panel");
const { Tool } = require("dev/toolbox");
const { Class } = require("sdk/core/heritage");
const self = require("sdk/self");

// define a REPLPanel class
// that inherits from dev/panel
const REPLPanel = Class({
  extends: Panel,
  label: "REPL",
  tooltip: "Firefox debugging protocol REPL",
  icon: self.data.url("plane_64.png"),
  url: self.data.url("repl-panel.html"),
  // when the panel is created,
  // take a reference to the debuggee
  setup: function(options) {
    this.debuggee = options.debuggee;
  },
  dispose: function() {
    this.debuggee = null;
  },
  // when the panel's script is ready,
  // send it a message containing
  // the debuggee
  onReady: function() {
    this.debuggee.start();
    this.postMessage("init", [this.debuggee]);
  }
});
exports.REPLPanel = REPLPanel;

// create a new tool,
// initialized with the
// REPLPanel's constructor
const replTool = new Tool({
  panels: { repl: REPLPanel }
});

First, we're defining a REPLPanel constructor, supplying:

  • four properties: icon, label, url, and a tooltip
  • two functions: setup() and dispose()
  • one event handler: onReady

The icon, label, and tooltip properties are all used to help identify the panel to the user in the Toolbox toolbar. The icon property is a resource:// URL pointing to an icon stored in the add-on's "data" directory. The url property is also a resource:// URL pointing to a resource in the "data" directory, but in this case it's an HTML source file, "repl-panel.html", containing the specification for the panel's user interface.

The setup() function is called when the panel is created. It's passed an options object containing a single property debuggee. debuggee is a MessagePort object that you can use to exchange messages with the debugger server. In this setup we're just keeping a reference to debuggee. The dispose() function is called when the panel is about to be destroyed. You can use it to do any cleanup.

The ready event is dispatched after the document in the panel becomes interactive. It's equivalent to  document.readyState === "interactive". At this point you can send the panel document messages. In this ready event handler we're sending debuggee to the panel document. The panel will then be able to use debuggee to exchange messages with the debugger server.

最後に、新しいツールを作成し、新しく定義されたコンストラクタで初期化します。

plane_64.png

In this example we've used the "plane_64.png" icon for the new tool. This was created by http://handdrawngoods.com/ and is used under the Creative Commons Attribution 3.0 Unported license (CC BY 3.0): http://creativecommons.org/licenses/by/3.0/. You can find in the example add-on's GitHub repository.

Whether you use this icon or a different one, save it in the "data" directory under your add-on's root directory, and make sure it's correctly referenced by the icon property in the REPLPanel constructor.

repl-panel.html

アドオンの "data" ディレクトリに "repl-panel.html" というファイルを作成し、以下の内容を記載します。

<html>
  <head>
    <meta charset="utf-8">
    <link href="./repl-panel.css"rel="stylesheet"></link>
  </head>
  <body>
      <pre id="response"></pre>
      <textarea name="request" id="request" rows="10" cols="40"></textarea>
  </body>
  <script src="./repl-panel.js"></script>
</html>

The HTML for the panel defines a textarea element for the user to type a JSON request to send the server, and a pre block to display the response from the server. It also includes CSS and JavaScript source files.

repl-panel.js

アドオンの "data" ディレクトリに "repl-panel.js" というファイルを作成します。 これは次のようになります。

window.addEventListener("message", function(event) {
  window.port = event.ports[0];
  window.port.onmessage = receive;
});

var request = document.getElementById("request");
var response = document.getElementById("response");

request.addEventListener("keyup", send, false);

function send(event) {
  if ((event.keyCode == 13) && (event.getModifierState("Control") == true)) {
    window.port.postMessage(JSON.parse(request.value));
  }
}

function receive(event) {
  response.textContent = JSON.stringify(event.data, undefined, 2);
}

The script loaded into the panel, "repl-panel.js", listens for the message from main.js that contains debuggee. The debuggee is a communications channel with the debugger server. Messages we send it are sent to the server as remote debugging protocol requests. Messages we get from it are responses to those requests.

So when "repl-panel.js" receives the debuggee object, it starts listening for messages from the debugger server, and displays the results in the "response" element. It also listens to keyup events in the "request" element, and on Control+Enter we send its contents to the debugger server.

repl-panel.css

最後に、アドオンの "data" ディレクトリ(repl-panel.css)に次のようなファイルを作成します。

#request {
  position: fixed;
  width: 40%;
}

#response {
  float: right;
  width: 50%;
  color: blue;
  font-family: monospace;
}

最終セットアップ

あなたのディレクトリ構造は次のようになります:

  • repl-panel
    • data
      • plane_64.png
      • repl-panel.css
      • repl-planel.html
      • repl-panel.js
    • lib
      • main.js
    • package.json

アドオンの実行

コマンドプロンプトに戻り、次のコマンドを実行します。

jpm run

Firefoxが起動するはずです。 開発者用ツールを開くと、"REPL" というラベルの新しいタブが表示されます。そのタブに切り替え、JSONリクエストを入力して Ctrl + Enter を押して送信します。

 

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,