设置为`run_at``document_start`的Chrome扩展程序运行得太快了?

问题描述 投票:12回答:2

编辑:我的Chrome浏览器出现问题并与我的脚本产生冲突,无论问题来源是什么,都可以完全重新安装。如果我碰巧找出导致它的原因,我会把它包含在这里。

编辑2:只是为了让在2017年阅读此内容的人知道我没有忘记这一点,自从我之前的编辑以来我从未遇到过这个问题。

编辑3:这是2019年,到目前为止,我再也没遇到过这个问题。


我一直在学习如何创建一个简单的Chrome扩展程序,这是一个用户脚本端口。该脚本与Tampermonkey完美配合,设置run atdocument-start,所有需要从头开始捕获的必要事件都被捕获。

但是,当我在Chrome扩展程序中设置相同的设置时,我发现相同的运行设置比Tampermonkey更快,导致第一个函数失败:(Uncaught TypeError: Cannot call method 'appendChild' of null.),因为它试图将一个脚本元素附加到head部分,该部分没有t存在直到0.010s之后。

到目前为止,我的脏解决方案是使用setInterval函数,将计时器设置为10来检查document.head是否存在,然后在条件为真时继续执行代码。

有没有什么方法可以让我正确地工作,而不必诉诸setInterval或者复制Tampermonkey的grant none选项,它似乎在网页上下文中运行用户脚本?

以下是我的manifest.json文件:

{
    "manifest_version": 2,
    "content_scripts": [ {
        "js":        [ "simpleuserscript.user.js" ],
        "matches":   [ "https://www.google.com/*"],
        "run_at":    "document_start"
    } ],
    "converted_from_user_script": true,
    "description":  "Chrome extension",
    "name":         "Testing",
    "version":      "1"
}

如果Chrome采用afterscriptexecute事件,所有这一切都可以避免,但在此之前,我仍然坚持使用load事件。我提前感谢你提供的任何帮助。


编辑:我已经尝试了回复中的建议:使用不同的run at点,使用DOMContentLoaded并附加到document.documentElement。所有都不成功,因为:1和2使脚本错过早期事件,3返回与尝试追加到document.head时相同的TypeError。

该脚本必须在document.readyState = loading时插入/运行,否则它将错过早期必要的事件,但不能太早到无法将孩子附加到documentElementor head

simpleuserscript.user.js中的代码示例:

var script = document.createElement("script");
script.textContent = "console.log('success')";
if(document.head) {
    document.head.appendChild(script);
} else if(document.documentElement) {
    document.documentElement.appendChild(script);
}

控制台将显示TypeError: Cannot call method 'appendChild' of null

javascript google-chrome google-chrome-extension userscripts content-script
2个回答
19
投票

manifest.json上运行的Chrome扩展内容脚本(从document_start运行)会在document.readyStateDoc达到interactive之前触发 - 这是你想要开始搞乱大多数页面元素的最早版本。

但是,如果您愿意,可以立即注入大多数<script>节点。只是不要对document.headdocument.body因为它们还不存在。 附加到documentElement。例如:

var s = document.createElement ("script");
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js";
s.async = false;
document.documentElement.appendChild (s);

要么

var s = document.createElement ("script");
s.src = chrome.extension.getURL ("MyPwnCode.js");
s.async = false;
document.documentElement.appendChild (s);

如果要添加或修改其他DOM元素,请在document_start运行的脚本中等到DOMContentLoaded事件,如下所示:

document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);

function fireContentLoadedEvent () {
    console.log ("DOMContentLoaded");
    // PUT YOUR CODE HERE.
    //document.body.textContent = "Changed this!";
}

7
投票

你的问题在于,当使用"run_at": "document_start"时,DOM中唯一允许存在的元素是<html>元素。如果你想避免相对于页面加载的错误,比如试图访问一些尚未创建的元素,你将不得不:

  • 让你的脚本在"document_idle""document_end"上运行。虽然"document_end"仍然不会授予您页面的所有元素和资源都已完全加载(但DOM已经被解析),但"document_idle"关键字将确保DOM已经被解析并且所有元素和在脚本运行之前已正确加载资源。
  • 或者,您可以继续使用"document_start"将代码包装在"DOMContentLoaded"侦听器中,这将使DOM在完全加载和解析时运行,类似于"document_idle"。这是一个例子: document.addEventListener("DOMContentLoaded", function() { // Run your code here... });
© www.soinside.com 2019 - 2024. All rights reserved.