We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS




注意你现在还不能使用用这些API开发的工具调试远程目标 (比如,火狐操作系统, 火狐操作系统模拟器,或者安卓火狐)。我们正工作在去除这个限制上。

这篇文章解释了如何去写一个附件添加一个新的工具到 工具箱。我们将要创建的工具是一个很小的用于 remote debugging protocol的 REPL它能够让你发送消息到调试服务器,显示服务器的响应信息。

你可以在GitHub上找到这个附件的完整代码: https://github.com/mdn/repl-panel.


在此之前如果你没有用过 Add-on SDK ,你首先要安装SDK 然后学习入门教程

但如果你用过这个附件开发包, 那创建一个文件夹, 在命令行中进入这个文件夹,键入 jpm init 为这个新的附件去创建基本架构。



为了添加一个新工具我们将要定义一个 REPLPanel 类,这个类扩展自 dev/panel 中的Panel 类 。

一个Panel 在工具箱中代表一个面板, 就像已有的 JavaScript Debugger 或者 Web Console。你通过使用HTML,CSS,和JavaScript指定面板的内容。当一个面板被创建,框架会批准它成为一个 debuggee (debuggee)对象,面板能够使用 debuggee 和运行在火狐内部的调试服务器交换JSON数据。

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:

  • send the contents of the textarea to the server
  • listen for messages from the server, and display the results in the pre block


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.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.

Finally, we create a new tool, initializing it with the newly defined constructor.


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.


Create a file in the add-on's "data" directory called "repl-panel.html", and give it the following contents:

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

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.


Create a file in the add-on's "data" directory called "repl-panel.js". It looks like this:

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)) {

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.


Finally, create a file in the add-on's "data" directory called "repl-panel.css" that looks like this:

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

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

Final setup

Your directory structure should now look like:

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

Running the add-on

Back at the command prompt, run:

jpm run

You should see Firefox launch. Open the developer tools, and you'll see a new tab labeled "REPL". Switch to that tab, enter a JSON request, and press Ctrl+Enter to send it:



此页面的贡献者: StorytellerF
最后编辑者: StorytellerF,