javascript - 代码在控制台和 youtube.com 上的内容脚本中的行为不同

Question

我正在尝试使用 chrome 扩展从 youtube.com 中删除一个元素。内容脚本运行（它可以将数据记录到控制台）但不会删除元素。但是，如果我将内容脚本的代码复制到开发人员模式控制台中，它会按预期更改页面。尝试使用内容脚本更改其他站点上的 DOM 时不会出现此问题。修改页面中的其他元素，例如删除整个正文。我使用 setTimeout 来确保页面已加载。（我知道有更好的方法，但我想快速模拟一下这个问题）

elem = document.getElementById("items")
elem.parentNode.removeChild(elem)

这两行删除推荐的视频，但仅在粘贴到控制台时。

清单文件：

{
  "manifest_version": 2,

  "name": "Test",
  "version": "1.0",

  "permissions": ["tabs","storage","declarativeContent","*://*.youtube.com/*"],
  "content_scripts": [
    {
        "matches": ["*://*.youtube.com/*"],
        "js": ["youtubeDomChange.js"]
    }
  ],
}

youtubeDomChange.js：

setTimeout(function(){

    console.log("ran")
    elem = document.getElementById("items")
    elem.parentNode.removeChild(elem)

},6000);

编辑1： console.log(element.parentNode)确实从内容脚本返回不同的输出并将代码手动粘贴到控制台中。不会引发错误。 控制台输出

标签： javascriptgoogle-chrome-extension