Creating a Vue-Vite Chrome Extension

#vite #vue #tutorial #webdev

My first post on dev.to 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

Install CRXJS Vite Plugin

Then install the crxjs vite plugin using:

npm i @crxjs/vite-plugin -D

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})],
    // ...
});

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': https://github.com/crxjs/chrome-extension-tools",
    "options_page": "index.html"
}

Compile and Hot-Reload for Development

npm run dev

Adding the Extension to Chrome

Add the extension to Chrome via the path: chrome://extensions/

or by going to: Menu > Settings > Extensions

Ensure that "Developer mode" is enabled