ext-hmr-webpack-plugin

Chrome Extension HMR（热模块替换）开发插件，适用于 Vue CLI 4 + Webpack 4 项目。

让 Manifest V3 扩展页面在开发时享受 真正的 HMR，无需整页刷新。

原理

┌──────────────────────────┐
│  webpack-dev-server      │  ← vue-cli-service serve
│  (http://localhost:PORT) │
│  - 提供 JS/CSS           │
│  - WebSocket HMR 推送    │
└──────────┬───────────────┘
           │  <script src="http://localhost:PORT/js/app.js">
           │
┌──────────▼───────────────┐
│  Chrome Extension (磁盘)  │
│  newtab.html  → 从 dev server 加载脚本 → HMR ✅
│  manifest.json → CSP 自动注入 localhost
│  background.js → 本地文件 (Service Worker)
└──────────────────────────┘

关键：MV3 的 CSP 允许 script-src 'self' http://localhost:*，因此扩展页面可以从本地 dev server 加载脚本。

安装

# 本地包引用
npm install ./ext-hmr-webpack-plugin --save-dev

使用

在 vue.config.js 中：

const { applyExtHmr } = require('ext-hmr-webpack-plugin')

const config = {
  // ... 你的 Vue CLI 配置
}

// 在 module.exports 之前调用
applyExtHmr(config, {
  port: 3200,                              // dev server 端口（默认 3200）
  browser: process.env.VUE_APP_BROWSER     // 当前浏览器环境变量
})

module.exports = config

在 package.json 中添加 HMR 脚本：

{
  "scripts": {
    "hmr:chrome": "cross-env NODE_ENV=development vue-cli-service serve --mode yourChromeMode"
  }
}

API

applyExtHmr(config, options)

将扩展 HMR 配置应用到 Vue CLI config 对象。仅在 serve 模式 + 扩展浏览器环境下生效，其他情况不做任何修改。

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | config | Object | — | Vue CLI config 对象 | | options.port | number | 3200 | dev server 端口 | | options.browser | string | '' | 当前浏览器标识 | | options.nonExtBrowsers | string[] | ['web', 'tsbrowser'] | 非扩展的浏览器标识 |

返回 boolean：是否应用了 HMR 配置。

ExtHmrManifestPlugin

Webpack 插件类，单独使用时仅负责向输出的 manifest.json 注入 CSP。

new ExtHmrManifestPlugin({ port: 3200 })

HMR 效果

| 修改类型 | 行为 | |---------|------| | Vue 组件（template / script / style） | ✅ 就地热更新，保留状态 | | CSS / SCSS | ✅ 热替换 | | Vuex Store | ✅ 热替换 | | background.js（Service Worker） | ❌ 需手动刷新 | | content-script.js | ❌ 需手动刷新 |

开发步骤

1. npm run hmr:chrome
2. 等待编译完成
3. Chrome → chrome://extensions/ → 加载已解压的扩展（指向 output 目录）
4. 打开新标签页
5. 修改代码，自动热更新 🎉

要求

• Vue CLI 4 + Webpack 4
• Chrome Manifest V3
• Node.js >= 12

License

MIT