编辑:我的Chrome浏览器出现问题并与我的脚本产生冲突,无论问题来源是什么,都可以完全重新安装。如果我碰巧找出导致它的原因,我会把它包含在这里。
编辑2:只是为了让在2017年阅读此内容的人知道我没有忘记这一点,自从我之前的编辑以来我从未遇到过这个问题。
编辑3:这是2019年,到目前为止,我再也没遇到过这个问题。
我一直在学习如何创建一个简单的Chrome扩展程序,这是一个用户脚本端口。该脚本与Tampermonkey完美配合,设置run at
到document-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
时插入/运行,否则它将错过早期必要的事件,但不能太早到无法将孩子附加到documentElement
or 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
在manifest.json
上运行的Chrome扩展内容脚本(从document_start
运行)会在document.readyState
Doc达到interactive
之前触发 - 这是你想要开始搞乱大多数页面元素的最早版本。
但是,如果您愿意,可以立即注入大多数<script>
节点。只是不要对document.head
或document.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!";
}
你的问题在于,当使用"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...
});