使用crxjs插件编写浏览器扩展插件遇到的问题 Waiting for the extension service worker...-CSDN博客

本文链接：https://blog.csdn.net/qq_18676843/article/details/147242770

目前最新的@vitejs/plugin-vue和@crxjs/vite-plugin不兼容，在crxjs官网有写在这里插入图片描述
修改插件版本如下：

"devDependencies": {
    "@crxjs/vite-plugin": "^1.0.14",
    "@vitejs/plugin-vue": "^2.3.4",
    "vite": "^2.9.9",
    "vue": "^3.5.13"
  }

然后启动不报错了，在manifest.json中添加content_scripts配置后，浏览器扩展插件展示报错
在这里插入图片描述
猜测可能是新版浏览器和@crxjs/vite-plugin不兼容，毕竟1.0.14也是三年前的版本了。经过排查之后发现是node_modules/@crxjs/vite-plugin/dist/index.cjs 中 3448行：

var workerHmrClient = "const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;\nself.addEventListener(\"fetch\", (fetchEvent) => {\n  const url = new URL(fetchEvent.request.url);\n  if (url.origin === ownOrigin) {\n    fetchEvent.respondWith(sendToServer(url));\n  }\n});

url.origin === ownOrigin 这两个值一直不相等，问了下AI说：“Chrome扩展在开发模式下每次热更新时，Vite可能会生成新的扩展ID”，查了下2.0.0-beta.32版本中对应的代码

const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;
// 改为
const ownOrigin = `chrome-extension://${chrome.runtime.id}`;

就可以了