Question

我正在使用chrome扩展程序将代码注入网页，以便在文本与特定字符串匹配时更改部分内容。它正确地替换了文本，但似乎使网页处于无休止的加载状态，并且在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

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

1 个答案: