How to Build a Vue‑Powered Chrome Extension with Vite and Rollup

Project Setup

Initialize the project with Vite: $ pnpm create vite Create public/manifest.json with the following content (excerpt):

{
    "name": "ngptcommit",
    "version": "1.0",
    "description": "ngptcommit自动生成git commit信息",
    "manifest_version": 2,
    "browser_action": { "default_popup": "index.html" },
    "icons": { "16": "images/favicon-16x16.png", "48": "images/favicon-32x32.png", "64": "images/android-chrome-192x192.png", "128": "images/android-chrome-192x192.png" },
    "background": { "scripts": ["background/background.js"] },
    "permissions": ["tabs","storage","http://*/*","https://*/*","activeTab","contextMenus","notifications","webRequest","webRequestBlocking","cookies","unlimitedStorage","webNavigation","identity","identity.email","identity.read","identity.write","identity.launch.webauthn","identity.manage.accounts"]
}

Resulting directory layout:

chrome-extension
├── README.md
├── index.html
├── package.json
├── public
│   ├── images
│   └── manifest.json
├── src
│   ├── App.vue
│   ├── background.ts
│   ├── components
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Adjusting the Build for Multiple Entrypoints

Vite targets web apps by default, but a Chrome extension also requires a compiled background.ts. Adding a second entry in vite.config.ts lets Vite (which uses Rollup) bundle both the UI and the background script:

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'index.html'),
        background: 'src/background.ts',
      },
      output: {
        entryFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
        chunkFileNames: `[name].js`,
      },
    },
  },
})

Key points: output.entryFileNames is set without a hash so Chrome can load files during debugging. rollupOptions mirrors Rollup’s configuration, allowing direct use of Rollup plugins.

Updating package.json Scripts

Add commands for the background script:

{
  "name": "@node-gptcommit/chrome-extension",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "rimraf dist && vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "dev:background": "vite --config vite.config.ts --mode development",
    "build:background": "vite build --config vite.config.ts"
  }
}

UI Development

Install the UI component library tdesign-vue-next: pnpm add tdesign-vue-next Example of sending a summary request from src/App.vue:

const getSummary = () => {
  chrome.runtime.sendMessage({
    type: 'summary',
    data: { diffs: [] }
  }, (response) => {
    console.log(response)
  })
}

Writing background.ts

import { getSummary } from '@node-gptcommit/summarize'

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  const { type = 'fetch', data } = request;
  if (type === 'summary') {
    getSummary(data).then(res => {
      sendResponse(res);
    })
  }
});

Debugging Tips

After a normal build, Vite adds a hash to filenames (e.g., index.33addf.js), causing Chrome to fail to reload the extension. The fix is to set output.entryFileNames without a hash, as shown in the configuration above.

For rapid iteration, enable watch mode during development:

{
  "scripts": {
    "dev": "vue-tsc && vite build --watch",
    "build": "rimraf dist && vue-tsc && vite build",
    "preview": "vite preview"
  }
}

This keeps the build output up‑to‑date without manual rebuilding, while the final production build omits the --watch flag.

Conclusion

Chrome extension development combines standard web pages with a background script, requiring both UI and service‑side code.

Vite’s core is Rollup; understanding Rollup’s options makes custom Vite configurations straightforward.

Vue is chosen for its rich ecosystem of UI libraries, which speeds up development.

GitHub repository: https://github.com/node-ngptcommit