vue3+antd+sass+crxjs搭建项目编写chrome插件，支持热更新

vue3：https://cn.vuejs.org/
axios：https://www.axios-http.cn/docs/api_intro
antd：https://www.antdv.com/components/config-provider-cn
sass：https://blog.youkuaiyun.com/randy521520/article/details/131242242
crxjs：https://crxjs.dev/vite-plugin
谷歌插件参考文档：https://developer.chrome.google.cn/docs/extensions/reference/api?hl=lv

一、初始化项目

1.cmd打开终端工具，运行：yarn create vite

2.输入项目名称，键盘方向键选择vue

3.键盘方向键选择JavaScript

4.项目创建成功

5.开发者工具打开项目，打开开发者工具的终端，运行yarn install，安装package.json中的依赖包，安装成功后运行

6.安装成功后运行yarn dev，点击控制台上的url，页面可以正常显示，说明vue已经安装成功

二、谷歌插件开发manifest.json文件

manifest.json文件在Chrome插件开发中起着关键的作用。它不仅提供了插件的基本信息，还定义了插件的行为、权限和资源等。当加载一个插件时，Chrome 会查找 manifest.json 文件并根据其中的信息确定插件的名称、版本号、描述等基本信息。然后，Chrome 会检查权限列表并确定插件是否有足够的权限来执行所需的任务。最后，Chrome 根据指示加载所需的脚本文件和图标，并将其添加到浏览器中。官网：https://developer.chrome.google.cn/docs/extensions/reference/manifest?hl=lv
1.manifest_version：清单文件的版本，必须字段，当前应为3。

"manifest_version": 2

2.name：插件的名称，必须字段。

"name": "jsEnv",

3.version：插件的版本号，必须字段。

"version": "1.0.0"

4.action：用来定义浏览器操作栏（浏览器旁边的插件图标）的行为，例如弹出页面等，生命周期很短, 需要长时间运行的代码不要写在popup中

"action": {
    "default_icon": {  // 默认图标的文件路径
        "16": "images/icon16.png",  
        "24": "images/icon24.png", 
        "32": "images/icon32.png"
    },
    "default_title": "Hover Me", // 鼠标指针悬停在浏览器操作按钮上显示的默认标题
    "default_popup": "popup.html" // 弹出窗口的 HTML 文件路径
}

5.background：定义后台持久性脚本或持久性页面。

"background": {
    "scripts": ["background.js"], // 后台脚本文件列表
    "service_worker": "service_worker.js",//指定一个 Service Worker 脚本作为后台页面。如果定义了此字段，则 scripts字段都将被忽略
    "type": "module"   // 指定‘module’, 可以正常使用 i