Chrome 扩展在某些页面上导致 jquery 和 javascript 出现问题答案

【问题标题】：Chrome extension causes problems with jquery and javascript on some pagesChrome 扩展在某些页面上导致 jquery 和 javascript 出现问题
【发布时间】：2012-05-23 06:48:55
【问题描述】：

我有一个小的 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>

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

document.body.innerHTML 非常糟糕。

当您使用它时，您将 DOM 节点视为原始文本。这些 DOM 节点具有事件处理程序，即使是简单的document.body.innerHTML+='...' 也会将现有节点发送到遗忘，创建新节点，而无需事件处理程序。

因此，您需要遍历文档(*see here how) 中的所有文本节点，并分别对每个节点执行一次innerHTML。

Sănătate！

【讨论】：