Vue3+Vite开发Chrome扩展：如何启用HMR实现热更新？

Yes, HMR is fully feasible for Chrome extensions built with Vite and Vue 3. The CSP error you encountered is the primary obstacle, but it’s solvable with targeted configuration changes. Here’s how to get it working:

Step 1: Fix Your Vite Configuration #

Your original approach of building first then serving isn’t optimized for HMR. Instead, use Vite’s dev server with these adjustments:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './', // Use relative paths to keep assets local to the extension
  server: {
    port: 3303,
    hmr: {
      host: 'localhost',
      protocol: 'ws', // Explicitly specify websocket protocol for HMR
    },
    fs: {
      strict: false, // Allow Vite to access files outside the project root if needed
    },
  },
})

Step 2: Update Manifest.json’s CSP for Development #

Chrome extensions enforce strict content security policies. To allow HMR, you need to whitelist the websocket connection and temporarily enable unsafe-eval (required for Vue’s dynamic component updates). This should only be applied to your development manifest—never use this in production:

// manifest.json (development)
{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval' ws://localhost:3303; object-src 'self'",
    "content_scripts": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  },
  // ... rest of your manifest settings
}

• ws://localhost:3303 permits the HMR websocket to connect to your local dev server.
• 'unsafe-eval' enables Vue’s HMR to dynamically update components without full rebuilds. Remove this line in your production manifest.

Step 3: Load the Dev Build in Chrome #

Run vite dev—this will generate a dist folder (or your configured output directory) with HMR-enabled assets. Load this folder as an unpacked extension in Chrome’s extension manager. Now, any changes to your Vue components will trigger instant HMR updates, no full rebuild required.

Optional: Use a Vite Plugin for Simplified Setup #

For a smoother workflow, use vite-plugin-chrome-extension. It automatically handles manifest validation, CSP adjustments for development, and asset routing specific to extensions:

1. Install the plugin:

npm install vite-plugin-chrome-extension --save-dev

2. Update your Vite config:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import chromeExtension from 'vite-plugin-chrome-extension'

export default defineConfig({
  plugins: [vue(), chromeExtension()],
  server: {
    port: 3303,
    hmr: true,
  },
})

This plugin eliminates the need to manually edit your manifest’s CSP for development.

Why Your Original Setup Failed #

Setting base: 'http://localhost:3303' forced Vite to load assets from a remote server, which violates Chrome’s extension CSP. Even with permissions, the CSP didn’t whitelist the ws://localhost websocket connection required for HMR. Using relative paths (base: './') keeps assets local, and adjusting the CSP explicitly allows the HMR connection.

内容的提问来源于stack exchange，提问作者Matt Bryson