支持热更新的浏览器插件开发框架和工具推荐

核心工具 CRXJS

官网：https://crxjs.dev/zh

github 地址：https://github.com/crxjs/chrome-extension-tools

CRXJS 实测下来还挺好用的，使用它的项目初始化的教程，可以快速上手。

使用CRXJS

初始化，推荐直接用它的脚手架，可以使用vue或者react，都是可以的

npm i

npm run dev

运行之后，在开发环境会自动生成一个 dist 文件夹就是源码，开发的时候chrome浏览器加载这个文件夹就可以了

扩展

可以扩展使用一些工具插件比如

• autoprefixer
• postcss
• tailwindcss
• unplugin-auto-import
• unplugin-vue-components

遇到的问题

tailwindcss 安装和使用过程中的问题

[vite] (client) Pre-transform error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
  Plugin: vite:css
  File: E:/learn/chrome-extensions/my-crx/src/content/views/App.vue?vue&type=style&index=0&scoped=ce0f0a9b&lang.css:undefined:NaN
[postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

解决：

问题是，tailwindcss v4官方文档中，已经将 PostCSS 插件部分移至单独的包 @tailwindcss/postcss，需要安装 @tailwindcss/postcss 这个包，然后配置 postcss.config.js 文件。

export default {
  plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}