@run-at
用于指定脚本何时被注入到页面中执行。
// @run-at document-start
描述:document-start事件在文档开始加载之前触发。此时文档的DOM结构尚未构建。
用途:
- 可以用于注入脚本或样式表,以便在文档加载时立即生效。
- 适用于执行需要在文档加载之前完成的初始化工作或拦截某些资源加载。
// @run-at document-body
如果 body 元素存在,脚本将被注入。
描述:虽然没有一个正式的document-body事件,但通常指的是文档的<body>标签被解析并添加到DOM中的时刻。
用途:
- 可以用于在<body>标签加载完成后进行一些初始化操作,比如设置全局事件监听器。
- 适合执行需要访问<body>元素或其内容的脚本。
// @run-at document-end
脚本将在文档解析完成后立即执行,即 DOMContentLoadedevent 时或之后注入,这意味着,脚本可以修改文档的结构,但是如果页面中存在大量的脚本需要执行,脚本可能需要等待较长时间才能执行。
描述:document-end事件在文档加载完成之后触发,即DOM已经构建完毕。
用途:
- 可以用于在文档加载完成后执行一些操作,如初始化页面交互、加载额外的脚本或资源。
- 适用于任何需要在文档完全加载后进行的操作。
实现方式:通常可以通过监听DOMContentLoaded事件来实现类似效果。
DOMContentLoadedevent 事件是在文档(HTML 或 XML)完全加载和解析后触发的事件,不需要等待样式表、图像和子框架的加载完成。也就是说,当 DOM 树构建完成后,DOMContentLoaded 事件就会被触发。
<script>
debugger;
window.addEventListener("DOMContentLoaded", function() {
debugger;
console.log("DOM fully loaded and parsed");
});
</script>
<body>
<h1>Hello World!</h1>
</body>
// @run-at document-idle
如果没有给出@run-at 标记,则这是默认值。表示脚本将在文档解析完成后,等待所有资源加载完成后再执行。这意味着,如果页面中存在大量的资源需要加载,脚本可能需要等待较长时间才能执行。另外,由于脚本是在 DOMContentLoaded 事件之后执行的,因此它不能修改文档的结构。
描述:如前所述,document-idle指的是文档处于空闲状态时触发的事件,意味着网页加载完成且没有用户操作。
用途:
- 可以用于执行一些后台任务或优化性能的操作,以避免影响用户的交互体验。
- 适合进行数据分析、预加载、缓存更新等不影响用户体验的操作。
实现方式:可以通过requestIdleCallback API来实现类似的功能。
表示脚本将在用户右键单击页面时执行。也就是说,当用户在页面上右键单击时,脚本将被注入到页面中执行。注意: 如果使用这个值,将忽略所有 @include 和 @exclude 语句,但是以后可能會更改。
|