从零开始

从零开始安装CRXJS。

从零开始安装CRXJS

创建新项目

mkdir crxjs-project
cd  crxjs-project

创建 package.json

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

安装 Vite 和 CRXJS

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

创建 index.html

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

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

创建 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',
  },
})

创建 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
  • crxjs-project
    • index.html
    • manifest.config.js
    • package.json
    • vite.config.js

开发服务器

npm
pnpm
bun
yarn
npm run dev
编辑此页面
快速开始
使用create-crxjs快速启动项目。
加载
项目设置完成后，现在可以在浏览器中进行测试运行了。