如何寫一個按鈕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"/>