Firefox擴展：爲現有的Chrome XUL元素添加功能

Question

對於踢腿和咯咯，我試圖編寫一個Firefox擴展。只是一個非常簡單的。我已經瀏覽了我找到的教程，並且已經獲得了基本的「Hello，World」應用程序的工作。

我想要做的是將一個事件監聽器添加到瀏覽器的 Firefox應用程序DOM（即選項卡）中的現有元素。到目前爲止，我所能找到的所有資源都顯示瞭如何將新元素添加到應用程序，然後使用javascript爲其添加操作。我已經嘗試了幾種添加javascript函數（我知道可行，因爲我已經成功地將函數添加了元素）添加到現有元素的幾種方法。

我最近在此嘗試的結構如下：

<?xml version="1.0"?> 
<!-- in myExtension.xul --> 

<overlay id="myExtension" 
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <script type="application/x-javascript"> 
    var tabs = document.getElementsByTagName("tabbrowser-tab") 
    var len = tabs.length; 
    for (var i = 0; i < len; i++) { 
     tabs[i].ondblclick = function() { 
     alert('bam!'); 
     } 
    }; 
    </script> 

</overlay> 

這個東西沒有工作。就像我說過的，我對這個東西完全陌生，而且我對一個週末項目也有點啓發。也許有一些方法確保我正在訪問chrome文檔而不是頁面文檔？ 雖然當我嘗試使用這種技術獲取頁面元素（即「p」）時，這也不起作用，所以這可能是死路一條。

[編輯] 嘗試清除了一些混亂：

我的意思的「瀏覽器的DOM」的元素是鉻接口的一部分，不網頁元素。我正在討論如何將一個事件監聽器專門放在一個已經作爲Firefox應用程序UI的一部分存在的元素上，比如一個選項卡（不是選項卡的內容，而是選項卡本身），或者說是Home按鈕。我想重新定義Firefox應用程序GUI部分的行爲。例如，假設我想在每次點擊「新標籤」按鈕或「關閉標籤」按鈕時添加警報。或者，如果我想重新定義「重新加載」按鈕以重定向到當前選項卡的域的根目錄，而不是僅重新加載頁面。這些都是Firefox的現有部分，我想重新定義它們/通過擴展覆蓋它們，特別是通過向它們添加JavaScript操作。

[注]嵌入式JavaScript允許在xul中嗎？或者它需要在一個單獨的文件？[/註釋]

任何人有任何意見嗎？謝謝。

Answer 1

爲了得到當前查看的選項卡的頁面元素，你首先需要獲得文檔本身gBrowser.selectedBrowser.contentDocument

所以基本上，如果你有一個<p id='test'>blah</p>元素和u需要處理它你可以做var p = gBrowser.selectedBrowser.contentDocument.getElementById('test');，然後用它做任何你想要的。

關於「添加一個事件監聽器到瀏覽器的DOM中的現有元素（即標籤）」，我很抱歉，但我不明白你想要什麼，你想操縱瀏覽器GUI（即添加一個按鈕到導航欄），還是要操縱選項卡的DOM內容（即查看的站點）？ （基本上「瀏覽器」可以意味着很多東西:)）。

Answer 2

覆蓋代碼中的JavaScript代碼不起作用，因爲它比gbrowser運行得早，它包含任何選項卡。

在Firefox（或Thunderbird）擴展您通常在負荷事件監聽器啓動您的分機：

window.addEventListener("load", 
         pinfresh.init, 
         false); 

，隨後的初始化函數需要註冊事件偵聽器的各種標籤事件：

pub.init = function() { 
    var container = gBrowser.tabContainer; 

    container.addEventListener("TabOpen", tabOpened, false); 
    container.addEventListener("TabClose", tabRemoved, false); 
    }; 

當一個新標籤打開時，我們註冊另一個聽衆，當用戶雙擊標籤時將觸發標籤重新加載：

tabOpened = function(e) { 
    var tab = e.target; 
    tab.addEventListener("dblclick", tabDoubleClicked, false); 
    } 

    tabDoubleClicked = function(e) { 
    gBrowser.reloadTab(e.target); 
    } 

完整的代碼如下所示：

<overlay id="pinfresh" 
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <script type="application/x-javascript"> 
    pinfresh = function() { 
     var pub = {}; 

     tabOpened = function(e) { 
     var tab = e.target; 
     tab.addEventListener("dblclick", tabDoubleClicked, false); 
     } 

     tabRemoved = function(e) { 
     var tab = e.target; 

     tab.removeEventListener("dblclick", tabDoubleClicked, false); 
     } 

     tabDoubleClicked = function(e) { 
     gBrowser.reloadTab(e.target); 
     } 

     pub.init = function() { 
     var container = gBrowser.tabContainer; 

     container.addEventListener("TabOpen", tabOpened, false); 
     container.addEventListener("TabClose", tabRemoved, false); 
     }; 

     return pub; 
    }(); 

    window.addEventListener("load", 
          pinfresh.init, 
          false); 

    </script> 
</overlay> 

代碼片斷與標籤的工作我推薦Tab Browser頁面在Mozilla的開發中心。

我建議將Javascript代碼放在它自己的文件中，而不是將其包含在XUL文件中。外部Javascript文件中的錯誤顯示在Firefox的錯誤控制檯中，這使調試變得更容易。