Javascript Chrome扩展：通过内容脚本修改DOM元素

我在使用内容脚本修改DOM元素时遇到问题。最终目标是显示其他信息（例如，他/她是否在下攻击性/防御性国际象棋…）——为此，我开始尝试更改用户名：

targetNode[0].innerHTML = "test"

但是它似乎对这个特定的元素没有影响（我通过querySelector获得该元素-通过console.log（）验证）。当我尝试更改站点上的其他元素时，它仍然有效：

const otherNode = document.querySelectorAll(".player > a");
otherNode[0].innerHTML = "othertest"

我是开发扩展/javascript的新手，所以我很难弄清楚我在做什么——任何见解都会有帮助。谢谢

manifest.json

{
  "name": "SomeExtension",
  "version": "0.0.0",
  "description": "Description.",
  "content_scripts": [
    {
      "matches": [ "http://*.lichess.org/*", "https://*.lichess.org/*" ],
      "js": [ "content.js" ]
    }
  ],
  "manifest_version": 2
}

content.js

console.log("Hello, World from content.js!");

//node(s) I want to change
const targetNode = document.querySelectorAll(".ruser > a");
console.log(targetNode[0].innerHTML);

targetNode[0].innerHTML = "test"

document.addEventListener('keypress', k);
function k(e) {
  console.log(`${e.code}`)
  targetNode[0].innerHTML = "test"
}

//other node where it works
const otherNode = document.querySelectorAll(".player > a");
otherNode[0].innerHTML = "othertest"

---

内容脚本运行后，页面会自动更新。使用MutationObserver检测它，并在修改消失后重新应用修改。另外，不要将页面元素分配给innerHTML—它会删除站点附加到元素内部内容的事件侦听器。另一个想法是，

.ruser>a

由页面重新创建，因此

targetNode

引用指向无用的分离节点。只需到处使用

document.querySelector（“.ruser>a”）

（注意，它没有[0]）。谢谢！使用变异观察者和使用

document.querySelector

无处不在的组合解决了我的问题。