DEV Community

Cover image for Creating a Vue-Vite Chrome Extension

Posted on • Updated on

Creating a Vue-Vite Chrome Extension

My first post on and its inspiration is based on @jacksteamdev's post on creating a Create a Vite-React Chrome Extension in 90 seconds the author of the CRXJS Vite Plugin

I initially tried to create a Vite-Vue based Chrome Extension using the guidelines presented in his post and everything was going great, however, when running: npm run dev, it didn't run correctly and I was getting the error:
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

I messaged @jacksteamdev and he kindly offered support and gave the following examples:

After inspecting my code and setup I cleaned up some stuff and managed to get the extension working fine in Chrome.

I've included the steps to help get everyone started:

Create Project

Firstly, using Vite, create your project by following the prompts:

npm init vite@latest
Enter fullscreen mode Exit fullscreen mode

Install CRXJS Vite Plugin

Then install the crxjs vite plugin using:

npm i @crxjs/vite-plugin -D
Enter fullscreen mode Exit fullscreen mode

Update the Vite Config

Setup the vite.config.js file as the following:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
    plugins: [vue(), crx({manifest})],
    // ...
Enter fullscreen mode Exit fullscreen mode

Create Manifest file

Setup the manifest.json file as the following:

    "manifest_version": 3,
    "name": "Vue Vite Chrome Extension Example",
    "version": "1.0.0",
    "action": {
        "default_title": "Vue Vite",
        "default_popup": "index.html"
    "description": "Vue Vite Chrome Extension made with 'crxjs':",
    "options_page": "index.html"
Enter fullscreen mode Exit fullscreen mode

Compile and Hot-Reload for Development

npm run dev
Enter fullscreen mode Exit fullscreen mode

Adding the Extension to Chrome

Add the extension to Chrome via the path: chrome://extensions/
Chrome Extension path
or by going to: Menu > Settings > Extensions
Chrome Settings: Extension
Ensure that "Developer mode" is enabled
Chrome Developer mode

Click "Load unpacked" Add the dist folder and voila!
Vue-Vite Chrome Extension

Again, all credit to @jacksteamdev and his CRXJS Vite Plugin. Check out his Github page and give him a ⭐

Check out my Github Vue Vite Chrome Extension template

Top comments (0)