WXT框架下从popup.html访问内容脚本失败,内容脚本未初始化的问题求助
WXT框架下从popup.html访问内容脚本失败,内容脚本未初始化的问题求助
各位好,我最近在用WXT开发浏览器扩展,碰到了个卡壳的问题,想请大家帮忙看看。
最开始我想在扩展里创建一个视频元素来测试DOM操作,结果在后台worker里写代码时直接报错document is not defined——后来才搞明白后台脚本根本没法直接访问页面DOM和存储相关内容,得靠内容脚本才行。
于是我转向内容脚本的方案,但折腾了半天发现我的内容脚本完全没初始化,不管怎么操作都没反应。我试了两种消息传递的思路:
- 直接从popup.html给content.ts发消息,没收到任何响应
- 先从popup给background.ts发消息(这步是成功的,后台能收到日志),再让后台转发给content.ts,还是不行
下面是我的代码和配置文件,麻烦各位帮忙排查下问题出在哪:
代码片段
popup.html 中的逻辑
const [tab] = await browser.tabs.query({ active: true, currentWindow: true }) if (!tab?.id) throw new Error("No tab found!") console.log("tab ", tab) const resp = await browser.tabs.sendMessage(tab.id, "to_content_script") console.log("resp ", resp)
background.ts
import { browser } from "wxt/browser"; export default defineBackground(() => { console.log("background worker initialized") })
content.ts
export default defineContentScript({ matches: ["*://*/*"], async main() { console.log("content script initialized") }, });
wxt.config.ts
import { defineConfig } from 'wxt'; export default defineConfig({ extensionApi: 'chrome', srcDir: 'src', modules: ['@wxt-dev/module-react'], runner: { startUrls: ["https://wxt.dev"], }, manifest: { version: "0.0.1", permissions: ["activeTab", "tabCapture", "tabs", "webRequest", "scripting"], host_permissions: ["<all_urls>"], background: { service_worker: "background.ts", type: "module" }, content_scripts: [ { "matches": ["<all_urls>"], "js": ["content-scripts/content.js"] } ], content_security_policy: { extension_pages: "script-src 'self'; object-src 'self';", }, web_accessible_resources: [ { resources: ["*"], matches: ["<all_urls>"], }, ], } });
我自己琢磨了下,会不会是WXT的defineContentScript和我在manifest里手动配置的content_scripts冲突了?毕竟WXT应该会自动处理内容脚本的manifest配置吧?另外我启动扩展时打开的是https://wxt.dev,按照matches规则应该能触发内容脚本,但页面控制台里完全看不到"content script initialized"的日志,就像内容脚本根本没加载一样。
有没有大佬遇到过类似的问题,或者能帮我指出配置里的错误?
备注:内容来源于stack exchange,提问作者Aniket
相关产品推荐
相关产品推荐

