使用vue来开发浏览器扩展

创建项目

自己搭建项目有点麻烦（主要是自己水平有点低，不会搞😀），这里借助第三方插件。以下都是基于vue3

安装vue脚手架

npm install -g vue-cli

创建vue项目

vue create 项目名称

安装依赖

vue add chrome-extension-cli

执行完命令后，会有一些问答。根据实际情况进行选择。依赖git地址：vue-cli-plugin-chrome-extension-cli

打包

• 使用 npm run build-watch运行开发模式，将生成一个dist文件。 安装Extension Reloader，以便在热更新。 （注意，- 当您更改 manifest.json 文件时，它不会自动加载，您需要点选 extension 页面中的更新）
• 生产模式 npm run build，并将其压缩成 zip 并部署到 chrome 商店中。

效果

安装依赖
基本上只需要下载一个element就好，其他的用不到

npm install element-plus --save

引入element
在popup.js引入

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "../view/popup.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

重新打包加载

项目地址

如果懒的搭建可以直接用我处理好的基本项目：

https://gitee.com/idonotyou/chrome-test.git