javascript – Chrome内容脚本无效：DOMContentLoaded侦听器无法执行

我正在尝试编码扩展,以纠正1个论坛上的拼写错误.

我正在尝试访问< p>标签,内容脚本,但它不会改变任何东西(使用下面的代码)：

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

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

我的manifest.json文件：

{
    "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).因此,您在侦听器中的任何代码都不会被执行,因为在添加侦听器后事件永远不会触发.

在Chrome扩展程序和Firefox WebExtensions中,指定注入content script的时间时,可以指定“document_start”,“document_end”或“document_idle”.1在manifest.json中,这是run_at属性的值.对于tabs.executeScript(),它是runAt属性.

> document_start
注入发生在创建DOM之前,或者来自正在运行的页面的脚本.这意味着document.body和document.head尚不存在. DOMContentLoaded和窗口加载事件尚未触发.您可以通过将它们添加到document.documentElement来向DOM添加内容.您可能需要使用MutationObserver来监视您有兴趣添加到DOM的元素,或者等待DOMContentLoaded之类的事件来指示DOM可用.
> document_end(默认)
注入在DOM完成之后但在加载子资源(例如图像和帧)之前进行.这通常是在DOMContentLoaded被触发之后但在窗口加载事件触发之前.
> document_idle
注入发生在document_end之后的某个时间以及窗口加载事件触发后. answer to “When does a run_at: document_idle content script run?”表明这是较早的：

>窗口加载事件触发后,或
触发DOMContentLoaded事件后> 200ms.

这意味着在DOMContentLoaded被触发后将注入您的内容脚本,但窗口加载事件可能已经或可能没有被触发.

在收听DOMContentLoaded或窗口加载时,应首先检查document.readyState

无论何时使用DOMContentLoaded侦听器或窗口加载侦听器,都应该在添加侦听器之前检查document.readyState,以确保在触发DOMContentLoaded事件之前(或者在加载事件被触发之前)添加侦听器,如果这是你正在听的).当你想听这些事件时,这应该是正常的习惯.如果在事件触发后添加侦听器,则永远不会运行侦听器.

要添加DOMContentLoaded侦听器,您应该使用以下内容：

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

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

要添加窗口加载侦听器,您可以使用以下内容：

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

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

>如果使用tabs.executeScript(),则为runAt提供的值仅表示您希望脚本最早注入的值.如果您在此之前执行tabs.executeScript(),则注入将延迟到指定的时间.请注意,对于document_start,执行tabs.executeScript()的点对新页面有效是一个复杂的主题,值得自己提问/回答.
>这个答案的部分内容是从my answer to “Detect and handle a button click in the active HTML page”复制的.

标签：content-script,javascript,google-chrome,google-chrome-extension
来源： https://codeday.me/bug/20190929/1831442.html