wxt 提供了 chrome 扩展开发的包装和热更新。另外默认的初始化项目是 popup 项目，并没有直接创建 side panel 项目的方式。但是可以直接改 popup 目录为 sidepanel，这样可以直接编译输出为 sidepanel。但是还有问题 pnpm dev 模式 sidepanel 就不支持 content script，而 pnpm build 版本又支持。

这样需要配置 wxt.config.ts 直接添加 content_scripts 声明。总之编译输出需要什么权限，都可以在这添加。

import { defineConfig } from "wxt";

// See https://wxt.dev/api/config.html
export default defineConfig({
  srcDir: "src",
  modules: ["@wxt-dev/module-svelte"],
  manifest: {
    content_scripts: [
      { matches: ["*://*/*"], js: ["content-scripts/content.js"] },
    ],
  },
});

另外在 background.ts 中引用 chrome 对象时，为了不让开发工具报错，需要安装 pnpm add -D @types/chrome。

另外 wxt 的热更新非常有必要，不用重新打开浏览器重新加载扩展。content.js、background.js 和 sidepanel 分别相当于三个页面，需要通过三个 devtools 的 console 来查看不同的日志。

如果通过 background.js 来中转发送数据到 sidepanel，需要 sidepanel 提前监听，不然会报一个发送错误。