Creating a Vue-Vite Chrome Extension
Tags: vite, vue, tutorial, webdev
Published: 2022-05-31 21:02:00

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](https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7) the author of the [CRXJS Vite Plugin](https://github.com/crxjs/rollup-plugin-chrome-extension) 

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: 
- [Vue Extension Page](https://github.com/crxjs/chrome-extension-tools/tree/main/packages/vite-plugin/tests/e2e/mv3-vite-vue-page)
- [Vue Content Script](https://github.com/crxjs/chrome-extension-tools/tree/main/packages/vite-plugin/tests/e2e/mv3-vite-vue-content-script)

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:
```sh
npm init vite@latest
```
## Install CRXJS Vite Plugin
Then install the crxjs vite plugin using:
```sh
npm i @crxjs/vite-plugin -D
```
## Update the Vite Config
Setup the `vite.config.js` file as the following:
```js
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:
```json
{
    "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

```sh
npm run dev
```
## Adding the Extension to Chrome
Add the extension to Chrome via the path: `chrome://extensions/`
![Chrome Extension path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9r3qck7qfofsuxnxvxi.png)
or by going to: Menu > Settings > Extensions
![Chrome Settings: Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mcg0cd1nif1amu8yp5a.png)
Ensure that "Developer mode" is enabled
![Chrome Developer mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ycb7i4h99mkevaplyro.png)

Click "Load unpacked" Add the `dist` folder and voila! 
![Vue-Vite Chrome Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn07mu1okf723e5u3a89.png)

Again, all credit to @jacksteamdev and his [CRXJS Vite Plugin](https://github.com/crxjs/rollup-plugin-chrome-extension). Check out his Github page and give him a ⭐ 

Check out my Github [Vue Vite Chrome Extension template](https://github.com/Ibz786/vue-vite-chrome-extension-template)