CRXJS Chrome Extension Tools is a set of utilities designed to simplify the development of Chrome extensions using modern web technologies. It provides a seamless integration with Vite, allowing developers to build extensions using frameworks like React, Vue, and Svelte with hot module replacement (HMR) support.

Pros

• Enables the use of modern web frameworks and tools for Chrome extension development
• Supports hot module replacement (HMR) for faster development cycles
• Integrates well with Vite, leveraging its speed and efficiency
• Simplifies the build process for Chrome extensions

Cons

• Limited to Chrome extensions, not applicable for other browser extension development
• Requires familiarity with Vite and modern JavaScript tooling
• May have a learning curve for developers used to traditional extension development methods
• Documentation could be more comprehensive for advanced use cases

Code Examples

1. Basic Vite configuration for a Chrome extension:

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

export default defineConfig({
  plugins: [crx({ manifest })],
})

2. Using React with CRXJS:

// popup.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import Popup from './Popup.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Popup />
  </React.StrictMode>
)

3. Content script injection:

// content.js
console.log('Content script loaded')

document.body.style.backgroundColor = 'lightblue'

Getting Started

1. Install CRXJS in your project:

   npm install @crxjs/vite-plugin -D
   

2. Create a manifest.json file for your extension.

3. Set up your vite.config.js file:

   import { defineConfig } from 'vite'
   import { crx } from '@crxjs/vite-plugin'
   import manifest from './manifest.json'
   
   export default defineConfig({
     plugins: [crx({ manifest })],
   })
   

4. Run the development server:

   npm run dev
   

5. Load the dist folder as an unpacked extension in Chrome for testing.