javascript - Chrome 扩展程序会破坏网页，使它们看起来永远加载？

Question

我正在使用 Chrome 扩展将代码注入(inject)网页，以更改部分文本(如果它们与某个字符串匹配)。它正确地替换了文本，但似乎使网页处于无休止的加载状态，并且弄乱了 Facebook 等网站上的某些元素。

    var actualCode = '(' + function() {
    document.body.innerHTML = document.body.innerHTML.replace(/10:00/g, "11:00 AM");
    } + ')();';
    var script = document.createElement('script');
    script.textContent = actualCode;
    (document.head||document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);

Answer 1

替换 innerHTML 还将替换 script 标记内的属性和文本。要仅替换非脚本标记内的文本节点，请使用 TreeWalker。

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT),
    textNode;

while(textNode = treeWalker.nextNode()) {
  if(textNode.parentElement.tagName !== 'SCRIPT') {
    textNode.nodeValue = textNode.nodeValue.replace(/10:00/g, "11:00 AM");
  }
}

此外，您无需将脚本附加到 DOM 即可访问其内容。内容脚本可以修改 DOM。

JSBin Demo