Skip to content

用于开发 Chromium manifest v3 插件的 Vite 插件,主要提供热重载功能,快速更新,高效开发

Notifications You must be signed in to change notification settings

bingoogolapple/bga-vite-plugin-crx-hmr

Repository files navigation

bga-vite-plugin-crx-hmr

npm npm

用于开发 Chromium manifest v3 插件的 Vite 热更新插件

功能介绍

  1. 主要提供开发期间的热重载能力,监听文件变化后自动编译浏览器插件,并通知插件 background(Service Worker)自动重新加载、自动刷新页面
  2. 该 Vite 插件内部添加了浏览器插件开发常用多入口配置
  3. 已自测该 Vite 插件支持使用 React 和 Vue 来开发浏览器插件

基本使用

  1. 安装依赖
pnpm add @bgafe/vite-plugin-crx-hmr -D
  1. 在 vite.config.ts 中使用 crxHmrPlugin
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import crxHmrPlugin from '@bgafe/vite-plugin-crx-hmr'

export default defineConfig(async ({ mode }) => {
  const isDev = process.env.NODE_ENV === 'development'

  return {
    plugins: [react(), crxHmrPlugin({ mode, isDev })],
  }
})
  1. 根据截图里的说明信息新建你业务所需的入口、新建并配置 public/manifest.json、配置 package.json 的 scripts

usage

扩展配置

  1. 如果要新增 iife 脚本,直接新建对应入口,在 package.json 的 script 中添加相应的 build:xxx 即可

  2. 插件内部针对 build:page(构建所有页面入口命令)预置了这些入口「newtab、history、bookmarks、popup、options、side-panel、devtools、devtools-panel、elements-sidebar-pane、recorder、update-version、sandbox、main」

usage

如果这些默认页面入口名称不能满足你的业务需求,可在 vite.config.ts 中初始化 crxHmrPlugin 时通过 pageInput 参数指定新的页面入口

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import crxHmrPlugin from '@bgafe/vite-plugin-crx-hmr'
import { resolve } from 'path'

export default defineConfig(async ({ mode }) => {
  const isDev = process.env.NODE_ENV === 'development'

  return {
    plugins: [
      react(),
      crxHmrPlugin({
        mode,
        isDev,
        // 通过 pageInput 增加新的页面入口
        // 仅需指定页面名称记录,例如指定 ['page1'],则插件内部会自动添加 resolve(process.cwd(), 'src/entries/page1/page1.html')
        pageInput: ['page1', 'page2'],
      }),
    ],
  }
})

About

用于开发 Chromium manifest v3 插件的 Vite 插件,主要提供热重载功能,快速更新,高效开发

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published