Chrome 内容脚本不起作用：DOMContentLoaded 侦听器不执行

我正在尝试编写可纠正 1 个论坛上的拼写错误的扩展代码。

我正在尝试访问<p>标签，带有内容脚本，但它不会改变任何内容（使用下面的代码）：

document.addEventListener("DOMContentLoaded", function() {
    document.getElementsByTagName("P")[4].innerHTML = "correct_word"; 
}); 

作为扩展添加时它不会改变任何东西，显然如果我wget页面，并将脚本放在那里，一切正常。有什么想法吗？

My 清单.json file:

{
    "manifest_version": 2,
    "name": "Extension",
    "description": "Description",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": ["http://example.com/"],
        "js": ["script.js"]
    }],
    "web_accessible_resources": ["Filedeleted(really).html"]
}

我知道内容脚本和 WWW 页面有不同的沙箱，也许内容脚本无法访问页面（和标签）？

您在监听火灾事件后注入脚本（在本例中，DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）。因此，侦听器中的任何代码都不会被执行，因为在添加侦听器后该事件永远不会触发。

In Chrome extensions and Firefox WebExtensions, when specifying a time for a content script https://developer.chrome.com/extensions/content_scripts to be injected, you can specify "document_start", "document_end", or "document_idle".¹ In a manifest.json this is the value stated for the run_at property. For tabs.executeScript() https://developer.chrome.com/extensions/tabs#method-executeScript, it is the runAt property.

• document_start
  注入发生在创建 DOM 或运行页面脚本之前。这意味着document.body and document.head还不存在。这DOMContentLoaded and window load事件尚未触发。您可以通过将内容添加到document.documentElement。您可能需要使用MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver监视您感兴趣的元素被添加到 DOM，或者等待类似的事件DOMContentLoaded来表明 DOM 可用。
• document_end（默认）
  注入发生在 DOM 完成之后、子资源（例如图像和框架）加载之前。这通常是在之后DOMContentLoaded已开火，但在此之前window load事件发生。

• document_idle
  注射发生在一段时间后document_end并立即在window load事件发生。这回答“run_at: document_idle 内容脚本何时运行？” https://stackoverflow.com/a/33248636/3773011表明这是以下较早的一个：

  • 之后window load事件火灾，或
  • 200ms后DOMContentLoaded事件被触发。

  这意味着您的内容脚本将在之后注入DOMContentLoaded已经解雇了，但是window load事件可能已经触发，也可能尚未触发。

当聆听时DOMContentLoaded https://developer.chrome.com/extensions/content_scripts, or window load，你应该检查document.readyState https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState first

任何时候你使用DOMContentLoaded听众，或window load听众，你应该经常检查document.readyState https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState在添加侦听器之前确保您在添加侦听器之前添加侦听器DOMContentLoaded事件被触发（或在load事件被触发，如果这是您正在监听的内容）。当您想要监听这些事件时，这应该是正常习惯。如果在事件触发后添加侦听器，则侦听器将永远不会运行。

用于添加一个DOMContentLoaded听众，你应该使用类似的东西：

if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded',afterDOMLoaded);
} else {
    afterDOMLoaded();
}

function afterDOMLoaded(){
    //Everything that needs to happen after the DOM has initially loaded.
}

用于添加一个window load听众，你可以使用类似的东西：

if(document.readyState !== 'complete') {
    window.addEventListener('load',afterWindowLoaded);
} else {
    afterWindowLoaded();
}

function afterWindowLoaded(){
    //Everything that needs to happen after the window is fully loaded.
}

1. 如果您正在使用tabs.executeScript()，您提供的价值runAt仅表示您希望最早注入脚本。如果你正在执行tabs.executeScript()在此时间之前，则将注射延迟到指定时间。请注意，对于document_start执行时的点tabs.executeScript()对于新页面有效是一个复杂的主题，值得有自己的问题/答案。
2. 该答案的部分内容复制自我对“检测并处理活动 HTML 页面中的按钮单击”的回答 https://stackoverflow.com/a/42559512/3773011.