浏览器插件 Vue.js 3 + Vite 2开发出简易的浏览器插件

一、使用 vite 创建项目

vite 是由 vue 作者尤雨溪开发的一种最新的脚手架工具，相比我们熟悉的 webpack 它有一下几个特点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，
完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。

1.1 环境搭建

使用 vite 前要确保 node 版本在 12.0.0 以上。NodeJS官网下载

1.2 安装vite工具

全局安装 create-vite-app

npm i -g create-vite-app@1.18.0

1.3 创建vite项目

create-vite-app project_name

1.4 进入项目并安装依赖

cd project_name
npm install

1.5 修改端口

编辑 package.json 文件:

"scripts": {
    "dev": "vite --port 8080",
    "build": "vite build"
},

1.6 运行项目

npm run dev

二、创建项目资源配置文件

在根目录文件夹下创建文件 vite.config.js。

2.1 设置vite项目资源路径

设置 vite 打包加载资源路径为相对路径。

module.exports = {
  base: "./",
};

2.2 设置资源目录

因为 vite 打包出来的资源文件默认为 _assets 但是浏览器插件在安装的时候不支持以 _ 开头的文件，所以要进行设置，设置打包资源目录为 assets。

module.exports = {
  assetsDir: "assets",
};

2.3 配置别名

配置别名是为了让我们在开发时书写路径更加方便。

const path = require("path");
module.exports = {
  alias: {
    "/@/": path.resolve(__dirname, "./src"),
  },
};

2.4 完整配置文件展示

vite.config.json 全部配置如下所示：

const path = require("path");
module.exports = {
  alias: {
    "/@/": path.resolve(__dirname, "./src"),
  },
  assetsDir: "assets",
  base: "./",
};

三、创建浏览器插件配置文件——manifest.json

在当前项目 public 文件夹下添加 manifest.json，并进行一下简单配置：

{
  "name": "我的插件",
  "version": "1.12.0",
  "manifest_version": 2,
  "description": "开发的第一款浏览器插件",
  "icons": {
    "48": "./logo.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  }
}

123456789101112

四、vite项目打包

npm run build

五、浏览器插件打包

将生成的dist文件夹进行打包操作：

zip -rqo dist.zip dist

打包出的浏览器插件压缩包dist.zip即为OK！！！