Question

我正在尝试使用firefox插件，但我是新手，并不介意一点推动。如果我想编写一个简单的插件，它只是一个按钮，当单击该按钮时，它会显示一条警告消息，如“hello”或其他内容。这个附加组件的js怎么样？

编辑：我也在想，它可能不一定是工具栏按钮中的按钮，可能只是一个出现在页面某个位置并可以激活的按钮。但是不确定这种方法相对于使用实际的工具栏按钮是否有任何缺点。

Answer 1

首先，您应该阅读这些文件。

https://developer.mozilla.org/en/XUL/Events

https://developer.mozilla.org/en/DOM/event.button

https://developer.mozilla.org/en/XUL/button

在XUL中，您可以动态地在事件之后创建元素。

https://developer.mozilla.org/en/DOM/document.createEvent https://developer.mozilla.org/en/DOM/document.createElement https://developer.mozilla.org/En/DOM/Node.appendChild

这是一个简单的例子，欲了解更多详情，请阅读以上链接。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                alert('Left button clicked.');
            break;
            case 1:
                alert('Middle button clicked.');
            break;
            case 2:
                alert('Right button clicked.');
            break;
            default:
                alert('Unexpected code: ' + btnCode);
        }
    }
}
</script>

<row><button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with Mouse</button></row>

<row><button label="Press Me"
        oncommand="alert('You pressed me!');"/></row>

<row><button label="Click Me"
        oncommand="alert('The width is ' + this.boxObject.width);"/></row>
</window>

例如：如果您想动态创建内容，这就是其中之一。

<script>
function addToBox()
{
var existingEl  = document.getElementById('addbutton');
  var capt   = document.createElement('groupbox');
  existingEl.appendChild(capt);
var captionEl   = document.createElement('button');
  capt.appendChild(captionEl);
  captionEl.setAttribute('label', 'contact' );
  captionEl.setAttribute('style', 'color: blue;');

}
</script>


<row><button label="Add" oncommand="addToBox()"/></row>
<box id="addbutton"/>

Answer 2

您可以使用addon builder制作a restartless addon like this one来做您想做的事情，如下所示：

exports.main = function(options) {
  // create the toolbar buton
  var tbb = require("toolbarbutton").ToolbarButton({
    id: "extension-tbb-id",
    label: "Button Name",
    image: "http://...",
    onCommand: function() {
      alert("hello");
    }
  });

  // move the toolbar button to the navigation bar
  if ("install" == options.loadReason) {
    tbb.moveTo({toolbarID: "nav-bar"});
  }
}

如何写一个按钮firefox附加组件

2 个答案: