实现控件

我们想要控件做两件事：

• 点击鼠标左键，控件应当启用或禁用注释器。
• 点击鼠标右键，控件应当显示用户创建注释的清单。

因为控件无法区分鼠标左右键的点击，我们应当使用内容脚本来捕获单击事件并发送相应的消息到附加组件。

控件将有两个图标：一个在注释器启用时显示，一个在禁用时显示。

因此，我们需要创建三个文件：控件的内容脚本和两个图标。

在data子目录创建一个widget子目录，我们将把控件的文件保存在这里（注意，这个不是强制性的：你可以仅仅把它们放在data里，但分类放置会更加整洁）。

控件的内容脚本

控件的内容脚本仅仅监听鼠标的左右单击并发送相应的消息到附加组件代码：

this.addEventListener('click', function(event) {
  if(event.button == 0 && event.shiftKey == false)
    self.port.emit('left-click');

  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
    self.port.emit('right-click');
    event.preventDefault();
}, true);

把它保存在data/widget并命名为widget.js。

控件图标

你可以从这里复制图标：

或者自己动手做你觉得有创造性的图标。把它们保存在data/widget目录。

main.js

现在在lib目录创建main.js并添加下列内容：

var widgets = require('sdk/widget');
var data = require('sdk/self').data;

var annotatorIsOn = false;

function toggleActivation() {
  annotatorIsOn = !annotatorIsOn;
  return annotatorIsOn;
}

exports.main = function() {

  var widget = widgets.Widget({
    id: 'toggle-switch',
    label: 'Annotator',
    contentURL: data.url('widget/pencil-off.png'),
    contentScriptWhen: 'ready',
    contentScriptFile: data.url('widget/widget.js')
  });

  widget.port.on('left-click', function() {
    console.log('activate/deactivate');
    widget.contentURL = toggleActivation() ?
              data.url('widget/pencil-on.png') :
              data.url('widget/pencil-off.png');
  });

  widget.port.on('right-click', function() {
      console.log('show annotation list');
  });
}

注释器默认禁用。它创建控件并通过切换注释器的活动状态来回应来自控件内容脚本的消息。注意，由于bug 626326，附加组件状态栏的环境菜单会显示，尽管在控件的内容脚本中调用了event.preventDefault()。由于我们没有任何代码来显示注释，所以我们们仅仅记录右击事件到控制台。

现在在注释器目录输入cfx run，你应该看见在附加组件状态栏的控件：

左击和右击应当产生合适的调试输出，同时左击应当改变控件的图标为启用状态。

下一步，我们将添加代码来创建注释器。