javascript - Chrome 扩展：通过内容脚本修改 DOM 元素的问题

Question

我在使用内容脚本修改https://lichess.org/tv上的 DOM 元素时遇到问题。最终的目标是在用户名下方显示附加信息（例如，他/她是在玩侵略性/防御性国际象棋吗，...）——因此，我开始尝试更改用户名：

targetNode[0].innerHTML = "test"

但它似乎对这个特定元素没有影响（我通过 querySelector 获取元素 - 使用 console.log() 验证）。当我尝试更改网站上的其他元素时，它可以工作：

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

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

清单.json

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

内容.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"

标签： javascriptgoogle-chrome-extensioncontent-script