如何写一个按钮Firefox插件

Question

我有一个Firefox插件尝试，但我是新来的这一点，并不会介意轻轻一推。如果我想写一个简单的插件，它只不过是一个按钮，单击该按钮时，显示如“你好”或类似的警告消息。这个附加组件的js将如何显示？

编辑：我也想，它可能并不一定是一个按钮在工具栏按钮，可能只是在某个地方出现在页面上，可以激活一个按钮。但不知道这种方法是否存在使用实际工具栏按钮的缺点。

Answer 1

您可以使用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"}); 
    } 
} 

Answer 2

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

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"/>