2013-08-05 58 views
3

我試圖與Firefox插件SDK(以前稱爲Jetpack,據我所知)握手,但我在使用DOM時遇到問題。Firefox插件SDK和DOM操作問題

當網頁加載並對其中包含的某些字符串進行更改時,我需要迭代DOM中的所有文本節點。我已經發布了我在下面做的簡化版本(JavaScript新手,所以請原諒我的任何古怪)。

// test.js 

    function parseElement(Element) 
    { 
     if (Element == null) 
     return; 

     var i = 0; 
     var Result = false; 

     if (Element.hasChildNodes) 
     { 
     var children = Element.childNodes; 
     while (i <= children.length - 1) 
     { 
      var child = children.item(i); 
      parseElement(child); 
      i++; 
     } 
     } 

     if (Element.nodeType == 3) 
     { 
     // For testing - see what the text node contains 
     alert(Element.nodeValue); 
     Result = true; 
     } 

     return Result; 
    } 

    window.addEventListener("load", function load(event) 
    { 
     window.removeEventListener("load", load, false); 
     parseElement(document.body); 
    } 

當我創建一個基本的HTML文檔:

<!-- test.html --> 

    <html> 
     <head> 
     <script type="text/javascript" src="test.js"></script> 
     </head> 
     <body> 
     <b>hello world</b> 
     <p>foo</p> 
     <i>test</i> 
     </body> 
    </html> 

...包括HEAD部分此Javascript文件,然後在Firefox中打開它,將 「警報」 顯示包含6個對話框:

1) "hello world" 
    2) blank -> no visible characters, just a newline 
    3) "foo" 
    4) blank -> no visible characters, just a newline 
    5) "test" 
    6) blank -> no visible characters, just a newline 

正是我期望看到的。

的問題,當我從我的main.js創建插件和使用test.js作爲頁面-MOD內容腳本文件(修改後刪除「的addEventListener」的一部分)產生。當我使用「cfx run」啓動安裝了我的插件的Firefox時,然後打開相同的HTML文檔(對於test.js文件的「腳本」部分註釋),警報根本不顯示

所以這是第一個難題。不過話說也導航到其他網頁 - 例如,YouTube視頻頁面 - 警報程序會顯示幾個對話框,但它們包括很奇怪的字符串腳本標籤主要內容:

編輯我不沒有足夠的信譽來嵌入圖像,所以這裏不是顯示諸如此類的事情,我的意思,而不是一個鏈接:http://img46.imageshack.us/img46/5994/mtpd.jpg

再次,我希望看到文本不存在。

道歉一些冗餘的下方,但僅僅是明確的:這是我main.js:

main.js 

    var data = require("sdk/self").data; 
    var data = require("sdk/self").data; 

    exports.main = function() 
    { 
     pageMod.PageMod({ 
     include: "*", 
     contentScriptFile: [data.url("test.js")] 
     }); 
    } 

和JavaScript文件的修改後的版本是相同的「test.js」上市以上,但對於部:

test.js 

    <snip> 
     ... 
     return Result; 
    } 

    parseElement(document.body); 

我包括我的項目文件在壓縮(如果我可以這樣稱呼),如果它使事情變得更容易想象:http://www.mediafire.com/?774iprbngtlgkcp

我試圖改變

parseElement(document.body); 

parseElement(unsafeWindow.document.body); 

的情況下,這有什麼差別,但結果是一樣的。

所以我很困惑發生了什麼。我無法理解爲什麼測試。當我將它用作插件的一部分時,js文件並沒有從DOM中挑選出文本節點(只有文本節點),但是當將其作爲腳本包含在HTML文檔中時,我完全可以預料到這一點。任何人都可以對此有所瞭解嗎?

預先感謝您。

回答

2

您的lib代碼和contentScripts中的錯誤通常會記錄到錯誤控制檯。檢查那裏打印什麼。另請參閱SDK控制檯模塊。

您的頁面模塊將不會運行,因爲默認情況下頁面模塊只會在加載事件之後運行。 請參閱contentScriptWhen文檔。

腳本標記實際上通常具有包含內聯腳本源的文本節點子元素。因此,列舉這些也是絕對正常的。

有關行走的樹節點的一些討論,請參見:getElementsByTagName() equivalent for textNodes 不過,如果你是特定的ID /類的文字後,可以考慮使用document.querySelector/.querySelectorAll,或者如果你有一個特定的XPath節點後,使用document.evaluate 。這很可能會快很多。

除此之外,我無法確切地告訴您剩下的問題究竟是什麼以及您想要在第一個位置完成什麼,因此我無法就此提出建議。

+1

嗨,非常感謝您的回覆。我的迴應有點遲來,因爲我想在繼續之前做更多的實驗。 首先,關於我在測試HTML文件中沒有任何文本節點被枚舉的問題 - 我發現當通過File-> Open File訪問文檔時,我的附加組件不會被執行。 – AMarch

+0

我不確定這是否是有意設計的,但似乎不太可能會有疏漏。當我將測試文件上傳到我的主機並從那裏訪問它時,文本節點按預期顯示。 – AMarch

+0

其次,我發現,我期望在YouTube視頻頁面上找到的文本值是「混雜在一起」的原因是這些值的第一個實例存儲在DOM內的JSON響應內(從我可以說的)。 此外,由於頁面的「AJAX」性質,這些文本值的可見出現丟失 - 我的節點枚舉發生在這些值添加到頁面之前,因此它們錯過了它們。現在我監視文檔更改並在檢測到更改時重新運行枚舉。 – AMarch

1

你想知道的是

我發現我的附加是不是當一個文檔 通過文件 - >打開文件訪問執行。

這是設計。在match-pattern,它表示

一個星號與http,https或ftp方案匹配任何URL。 對於其他方案,如文件,資源或數據,請按照以下方式使用一個跟着 的方案,並加上星號。

您可以使用正則表達式/.*/來匹配所有網站和所有模式。

+1

謝謝 - 我仍然需要回到這裏並完成我的項目的這一部分,所以這非常有用。 – AMarch