From Scratch

install CRXJS from scratch.

install CRXJS from scratch

Create a new project

mkdir crxjs-project
cd  crxjs-project

Create package.json

package.json
{
  "name": "crxjs-project",
  "type": "module",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

Install Vite and CRXJS

npm
pnpm
bun
yarn
npm i -D vite @crxjs/vite-plugin

Create index.html

index.html
<body>
  <h1>Hello CRXJS</h1>
</body>

<style>
  body {
    width: 160px;
    color: #f3bae5;
    text-align: center;
    background-color: #288cd7;
  }
</style>

Create manifest.config.js

manifest.config.js
import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  manifest_version: 3,
  name: 'CRXJS from scratch',
  version: '1.0.0',
  action: {
    default_popup: 'index.html',
  },
})

Create vite.config.js

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

export default defineConfig({
  plugins: [
    crx({ manifest }),
  ],
  server: {
    cors: {
      origin: [
        /chrome-extension:\/\//,
      ],
    },
  },
})

Project Structure

Project Structure
  • crxjs-project
    • index.html
    • manifest.config.js
    • package.json
    • vite.config.js

Development Server

npm
pnpm
bun
yarn
npm run dev
Edit this page
create-crxjs
How to install CRXJS.
Loading
Now that you've setup your project, it's time to give it a test run in the browser.