Google chrome 如何访问网页DOM而不是扩展页DOM？

我正在编写一个Chrome扩展，并试图在popup.html文件中单击按钮后，立即在当前网页上覆盖一个

当我从popup.html中访问

document.body.insertBefore

方法时，它会覆盖弹出窗口上的

，而不是当前网页

---

我是否必须在background.html和popup.html之间使用消息传递才能访问网页的DOM？我想在popup.html中完成所有操作，如果可能的话，也可以使用jQuery。

扩展页面/脚本，如browser\u action popup或ManifestV2后台脚本，都有自己的DOM、

文档、
窗口和
chrome扩展：//
URL（使用扩展来检查它）。ManifestV3服务工作者没有任何DOM/文档

您需要一个访问网页DOM的工具并与选项卡内容交互。内容脚本将在选项卡中作为该页面的一部分执行，而不是作为扩展的一部分执行

方法1。声明的
manifest.json：

“内容脚本”：[{
“匹配项”：[“*：//*.example.com/*”]，
“js”：[“contentScript.js”]
}],

当页面加载时，它将运行一次。之后，请使用但请注意，它不能发送DOM元素、映射、集合、ArrayBuffer、类、函数等等，它只能发送与JSON兼容的简单对象和类型，因此您需要手动提取所需的数据，并将其作为简单数组或对象传递

方法2。纲领性

ManifestV2:

用于按需注入内容脚本

此方法的回调接收内容脚本中最后一个表达式的结果，因此可以使用它提取必须与JSON兼容的数据，请参见上面的方法1注释

manifest.json中所需的权限：


最佳情况：，适用于对用户操作的响应（通常单击工具栏中的扩展图标）。安装扩展时不显示权限警告


通常：
“*：//*.example.com/”
以及您想要的任何其他网站


最坏情况：
”

manifest.json中所需的
权限
：


“脚本编写”
-必须
“activeTab”
-理想的场景，请参见上面的ManifestV2注释

如果理想情况不可能，请将允许的站点添加到manifest.json中的
host\u权限


为了演示编程注入，让我们在单击浏览器操作时添加该div

宣言2

简单呼叫：

chrome.tabs.executeScript（{code:`（${inContent1}）（`}）；
函数inContent1（）{
const el=document.createElement（'div'）；
el.style.cssText='位置：固定；顶部：0；左侧：0；右侧：0；背景：红色'；
el.textContent='DIV'；
文件.正文.附件（el）；
}


使用参数调用并接收结果：

chrome.tabs.executeScript({
代码：`（${inconte2}）（${JSON.stringify（{foo:'bar'}）}）`
}，（[结果]=[]）=>{
如果（！chrome.runtime.lastError）{
console.log（result）；//显示在弹出窗口的devtools中
}
});
函数inContent2（参数）{
const el=document.createElement（'div'）；
el.style.cssText='位置：固定；顶部：0；左侧：0；右侧：0；背景：红色'；
el.textContent=params.foo；
文件.正文.附件（el）；
返回{
成功：没错，
html:document.body.innerHTML，
};
}

这个例子使用了
inContent
函数的代码到字符串的自动转换，这里的好处是IDE可以应用语法高亮和linting。明显的缺点是浏览器在解析代码时浪费时间，但通常不到1毫秒，因此可以忽略不计



宣言3
请不要忘记manifest.json中的权限，有关更多信息，请参阅其他答案


简单呼叫：

异步函数tabAddDiv（）{
const[tab]=await chrome.tabs.query（{active:true，currentWindow:true}）；
等待chrome.scripting.executeScript({
目标：{tabId:tab.id}，
函数：incont1，//请参见上面的ManifestV2示例中的incont1
});
}


调用和接收结果：

异步函数tabAddDiv（）{
const[tab]=await chrome.tabs.query（{active:true，currentWindow:true}）；
让我们重新来过；
试一试{
res=等待chrome.scripting.executeScript({
目标：{tabId:tab.id}，
函数：inconte2，//请参见上面的ManifestV2示例中的inconte2
});
}捕获（e）{
//必要时处理错误，或者忽略它
返回；
}
//res[0]包含选项卡主页的结果
document.body.textContent=JSON.stringify（res[0].result）；
}

使用参数调用并接收结果：

将来executeScript将具有

args

参数，请参阅，同时您还必须使用消息传递

---

这非常有帮助，正是我需要知道的。谢谢！我知道这是一段很长的时间，但如何才能真正发送dom内容？