Firefox扩展正在阻止Javascript运行

Question

我正在编写一个简单的Firefox Web扩展，它将用扩展版本替换某些单词（例如首字母缩略词）。我的代码如下：

var replacements = [];
replacements["example1"] = "My First Example";
replacements["example2"] = "Second Example";

if(!window.location.href.startsWith('https://ignore.thissite.com/')){
    for(key in replacements){
        replaceOnDocument(new RegExp('\\b'+key+'\\b', 'gi'), '{{{REPLACE_'+key+'}}}');
        document.body.innerHTML = document.body.innerHTML.replace(new RegExp('{{{REPLACE_'+key+'}}}', 'g'), '<abbr title="'+key+'">'+replacements[key]+'</abbr>');
    }
}

function replaceOnDocument(pattern, string){
    Array.from(document.querySelectorAll("body, body *:not(script):not(noscript):not(style):not(code):not(pre)"))
        .forEach(someNode => Array.from(someNode.childNodes)
        .filter(childNode => childNode.nodeType == 3)
        .forEach(textNode => textNode.textContent = textNode.textContent.replace(pattern, string)));
}

这似乎取代了预期的所有实例，但我注意到Javascript似乎无法在运行脚本的页面上正确运行。我现在一直在盯着代码半小时，无法理解为什么会出现这种情况。更糟糕的是，问题似乎是间歇性的（虽然经常发生）。

有关为什么我的代码会阻止Javascript按预期运行的任何想法？

Answer 1

我已经推测替换body.innerHTML的内容可能会导致问题，那么如何使用以下方法替换文本呢？ codepen example

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  {
    // filter / exclude tags
    acceptNode: function (node) {
      return node.parentElement.nodeName === "SCRIPT" ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
    }
  }
);

while (walker.nextNode()) {
  // replace every H with @
  walker.currentNode.nodeValue = walker.currentNode.nodeValue.replace("H", "@");
}

这将迭代除脚本文本节点之外的每个文本节点并替换其内容。