Chrome擴展導致jQuery和一些頁面上的JavaScript問題

Question

我有一個小的Chrome擴展，我想用它來改變文本。它按我希望的方式工作（單擊圖標更改文本），但在某些頁面上，現有的jquery在啓用應用程序時停止工作。我究竟做錯了什麼？

文件：manifest.json中，myscript.js和background.html

manifest.json的內容：

{ 
    "name": "My extension", 
    "version": "1.0", 
    "background_page": "background.html", 
    "permissions": [ 
    "tabs", "http://*/*" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
    "matches": ["https://*/*"], 
     "js": ["myscript.js"] 
    } 
    ], 
"browser_action": { 
    "default_icon": "icon.png" 
    } 
} 

myscript.js內容：

var array = {"not":" NOT ", "like":" LIKE ", "job":"JOBS"} 

for (var val in array) 
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp(val, "g"),  array[val]); 

background.html內容：

<script> 
chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, 
         {file:"myscript.js"}); 
}); 
</script> 

Answer 1

document.body.innerHTML非常糟糕。

當您使用它時，您將DOM節點視爲原始文本。那些DOM節點具有事件處理程序，即使是簡單的document.body.innerHTML+='...'也會將現有節點發送到遺忘處，創建新節點，而無需事件處理程序。

相反，您需要遍歷文檔(*see here how)中的所有文本節點，並分別對每個文本節點執行一次innerHTML。

Sănătate！