DEV Community

Jack Steam
Jack Steam

Posted on • Edited on

Create a Vite-React Chrome Extension in 90 seconds

#vite #react #tutorial #webdev

The bundler configuration for a Chrome Extension can be pretty complex. When I started making Chrome Extensions, they were small projects for clients who wanted to automate a task. I was starting a new Chrome Extension almost every week, and it took too much time to configure a new project. Then I thought, "We already have a manifest; why do we need more config files?"

That's the idea behind CRXJS Vite Plugin. My name is Jack Steam, and I've been hard at work over the creating a Vite plugin for Chrome Extensions. So today, I'm excited to invite you to try out CRXJS with Vite.

CRXJS makes it easy to set up a Chrome Extension project with a modern development experience. How easy? Let me show you.

Create your project

Use your favorite package manager to scaffold a new project and follow the prompts to create a React project.

CRXJS doesn't yet work with Vite 3, but support is coming soon!

npm init vite@^2
Enter fullscreen mode Exit fullscreen mode

Install CRXJS Vite Plugin

Now install the latest release of CRXJS using your favorite package manager.

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

Update the Vite config

Update vite.config.js to match the code below.

// vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { crx } from "@crxjs/vite-plugin";
// Node 14 & 16
import manifest from './manifest.json'
// Node >=17
import manifest from './manifest.json' assert { type: 'json' } 

export default defineConfig({
  plugins: [react(), crx({ manifest })],
});
Enter fullscreen mode Exit fullscreen mode

Create a file named manifest.json next to vite.config.js.

// manifest.json
{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}
Enter fullscreen mode Exit fullscreen mode

And run the dev command.

npm run dev
Enter fullscreen mode Exit fullscreen mode

That's it! CRXJS will do the rest. Your project directory should look like this:

CRXJS File Structure

Add the extension to Chrome

Let's try it out.

When the build completes, open Chrome or Edge and navigate to chrome://extensions. Make sure to turn on the developer mode switch.

Chrome Edge
Top right corner Middle left sidebar
Chrome developer mode switch Edge developer mode switch

Drag your dist folder into the Extensions Dashboard to install it. Your extension icon will be in the top bar. The icon will be the first letter of the extension's name.

Chrome Extension Action Context Menu

Profit with Vite HMR

Once you've found the extension icon, right-click it and choose "Inspect popup window". This will open the popup and the popup dev tools window. We need to inspect the popup to keep it open while making changes.

Popup without min-width

That popup is pretty tiny; let's add some CSS to make it wider.

/* App.css */
.App {
  text-align: center;
+ min-width: 350px;
}
Enter fullscreen mode Exit fullscreen mode

And boom! HMR magic at work.

Popup with min-width

If you enjoyed this how-to guide, check out CRXJS on GitHub and give us a star!

Top comments (5)

Collapse
 
dodobird profile image
Caven •

After vite build, popup is invalid.

Collapse
 
jacksteamdev profile image
Jack Steam •

We fixed this regression and added e2e tests to guard against recurrences.

Collapse
 
jacksteamdev profile image
Jack Steam •

Thanks for the feedback! Care to elaborate?

Collapse
 
dodobird profile image
Caven •

The image is a screenshot of the after build.

image

/dist/index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body></html>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
dodobird profile image
Caven •

Basic Project - github.com/keyding/vite-rpce-test. Thanks

Read next

ibn_abubakre profile image

Hiding Elements in CSS: The Accessible Way

Abdulqudus Abubakre -

dhruvikdonga profile image

SimplySocket: A Lightweight WebSocket Wrapper for Go

Dhruvik Donga -

hamzakhan profile image

🌀 State Management in React: Comparing Redux Toolkit vs. Zustand 📊

Hamza Khan -

eransakal profile image

Develop 10x Faster with AI: Unlock the Power of AI for Developers

Eran Sakal -