javascript - 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", "@");
}

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