背景

我常用的插件LocalStorage Manager突然被下架了，估计和最近的Chrome插件隐私风波有关。想着，用别人的时不时还得关注隐私问题，下架了还用不了，从商店里找了几款也不是想要的插件，那不如做一个。

众所周知，Chrome插件本质也就是网页，那么用Vue怎么去搭建一个呢？由于插件的相关技术和生态是跟着Chrome走的，国内相关教程就很少，好不容易在dev.to上找到了一个教程，尝试之后就准备写下来，算是给想要做同样事情的同志一个参照。

技术准备和步骤

Vue2/3、Vite3+、Chrome插件API（不会看文档）

推荐使用PNPM作为包管理器，以下命令都是使用PNPM，使用其他包管理器的请转换成对应的命令

创建Vue项目

pnpm create vue@latest

创建完成后使用pnpm i安装依赖

添加CRXJS

CRXJS是一个基于Rollup的插件，现在分为Rollup和Vite插件，使用原生的可以用其Rollup插件

Vue2: pnpm i @crxjs/vite-plugin@latest -D

Vue3: pnpm i @crxjs/vite-plugin@beta -D

配置`vite.config.*`

在配置之前建议先在package.json里添加"type": "module"，或者将vite.config.js/ts改成vite.config.mjs/mts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
// 引入插件
import { crx } from '@crxjs/vite-plugin';
// 使用TS的请将manifest.json加入到tsconfig.json
import manifest from './manifest.json';

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }),
  ],
})

在根目录创建manifest.json文件

{
  // 文件版本，涉及API使用，MV2即将被淘汰
  "manifest_version": 3,
  // 插件名称
  "name": "CRXJS Vue Vite Example",
  // 插件版本，注意Chrome不遵循Semver，具体规则请看文档
  "version": "1.0.0.0",
  // 页面路径
  "action": { "default_popup": "index.html" }
}