document_start 和 document_end 处的 Chrome 扩展 content_script

Question

大家好，正如你所看到的，我对 Chrome 扩展程序很陌生。

您可以在 DOM 或页面完全加载之前和之后从content_scripts运行脚本吗？

喜欢：

"content_scripts": [ {
    "matches": ["<all_url>"],
    "js": ["content.js"],
    "all_frames": true,
    "run_at": "document_start",
    "run_at": "document_end"
} ]

或类似的东西：

 "content_scripts": [ {
    "matches": ["<all_url>"],
    "js": ["content1.js"],
    "all_frames": true,
    "run_at": "document_start"
} ],
"content_scripts": [ {
    "matches": ["<all_url>"],
    "js": ["content2.js"],
    "all_frames": true,
    "run_at": "document_end"
} ]

Answer 1

您只能有一个content_scripts条目，因此它类似于：

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content1.js"],
    "all_frames": true,
    "run_at": "document_start"
  },{
    "matches": ["<all_urls>"],
    "js": ["content2.js"],
    "all_frames": true,
    "run_at": "document_end"
}]

使用此设置， content1.js会在开始和运行content2.js底。

Answer 2

您正朝着正确的方向前进：您可以使用run_at属性，但您的清单需要如下所示：

"content_scripts": [
{
    "matches": ["<all_url>"],
    "js": ["content1.js"],
    "all_frames": true,
    "run_at": "document_start"
},
{
    "matches": ["<all_url>"],
    "js": ["content2.js"],
    "all_frames": true,
    "run_at": "document_end"
}]

它应该是一个定义所有内容脚本的对象数组，而不是两次声明content_script属性。

---

如果您使用 jQuery，您还可以像这样使用$(document).ready() ：

 const func1 = params => { // Stuff that will happen as soon as it can }; $(document).ready(() => { // stuff that will happen when DOM is ready });

如果您不使用 jQuery，您可以在 google 上快速搜索以在 vanilla js 中找到$(document).ready替代品。

---

其他解决方案，您可以使用它使用chrome.tabs.executeScript() docs从后台脚本以编程方式注入内容脚本。