Skip to content

Latest commit

 

History

History
84 lines (62 loc) · 1.67 KB

README.zh_CN.md

File metadata and controls

84 lines (62 loc) · 1.67 KB

vite-plugin-crx-mv3

使用 Vite 构建 Chrome 扩展

English | 简体中文

特性

  • Chrome扩展页面和注入脚本支持使用vue、react等等；
  • Content_scripts的css配置项支持.scss或.less文件；js配置项支持.js(x)或.ts(x)文件；
  • background.service_worker配置项支持.js或.ts文件；
  • 在开发环境，修改content_scripts和background.service_worker之后，content_scripts注入的页面和Chrome扩展程序会自动重载；

用法

安装

# pnpm
pnpm add vite-plugin-crx-mv3 -D
# npm
npm install vite-plugin-crx-mv3 -D
# yarn
yarn add vite-plugin-crx-mv3 -D

插件参数

port

  • Type: number
  • Default: 8181

建立一个websocket连接。在contentscript和servicework文件发生变化时，通知Chrome扩展客户端重载。

manifest

  • Type: string
  • Required : true

Chrome扩展的manifest.json文件路径。

配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import crx from 'vite-plugin-crx-mv3'

export default defineConfig({
  plugins: [
    vue(),
    crx({
      manifest: './src/manifest.json'
    }),
  ],
})

运行

# development
pnpm dev
# production
pnpm build

例子

在本仓库下的examples目录下：

  • crx-contentscript-sass-less
  • crx-executescript-function
  • crx-jquery
  • crx-react
  • crx-solid
  • crx-vue
  • crx-vue-drawer
  • crx-vue-mult-page

查看这个GIF预览效果。

注意事项

  • 启动项目后，第一次需要手动刷新页面，这样客户端和服务端便建立了websocket连接。
  • 修改manifest.json后需要重新运行命令启动。