feat: migrate from crxjs

from-crxjs/manifest.config.ts

@@ -1,20 +1,22 @@
-import { defineManifest } from '@crxjs/vite-plugin'
-import pkg from './package.json'
+import { defineManifest } from "@crxjs/vite-plugin";
+import pkg from "./package.json";
 
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
   version: pkg.version,
   action: {
     default_icon: {
-      16: 'public/logo.png',
-      48: 'public/logo.png',
-      128: 'public/logo.png',
+      16: "./src/assets/logo.png",
+      48: "./src/assets/logo.png",
+      128: "./src/assets/logo.png",
     },
-    default_popup: 'src/popup/index.html',
+    default_popup: "src/popup/main.tsx",
   },
-  content_scripts: [{
-    js: ['src/content/main.js'],
-    matches: ['https://*/*'],
-  }],
-})
+  content_scripts: [
+    {
+      js: ["src/content/main.js"],
+      matches: ["https://*/*"],
+    },
+  ],
+});

from-crxjs/package.json

@@ -4,23 +4,29 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "dev": "web-extend rsbuild:dev --open",
+    "build": "web-extend rsbuild:build",
+    "preview": "web-extend preview",
+    "zip": "web-extend zip"
   },
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.32",
+    "@rsbuild/core": "^1.3.3",
+    "@rsbuild/plugin-react": "^1.0.7",
     "@types/chrome": "^0.0.313",
     "@types/node": "^22.13.14",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "@web-extend/rsbuild-plugin": "0.0.1-beta.5",
     "typescript": "~5.7.2",
     "vite": "^6.2.0",
-    "vite-plugin-zip-pack": "^1.2.4"
+    "vite-plugin-zip-pack": "^1.2.4",
+    "web-ext": "^8.5.0",
+    "web-extend": "0.0.1-beta.6"
   }
 }

from-crxjs/rsbuild.config.ts

@@ -0,0 +1,24 @@
+import { resolve } from "node:path";
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { pluginWebExtend } from "@web-extend/rsbuild-plugin";
+import manifest from "./manifest.config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": `${resolve(__dirname, "src")}`,
+    },
+  },
+  plugins: [
+    pluginReact(),
+    pluginWebExtend({
+      manifest,
+    }),
+  ],
+  server: {
+    cors: {
+      origin: "*",
+    },
+  },
+});

from-crxjs/src/content/views/App.tsx

@@ -10,7 +10,7 @@ function App() {
     <div className="popup-container">
       {show && (
         <div className={`popup-content ${show ? 'opacity-100' : 'opacity-0'}`}>
-          <h1>HELLO CRXJ</h1>
+          <h1>Hello CRXJS + WebExtend</h1>
         </div>
       )}
       <button className="toggle-button" onClick={toggle}>

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
-  - "*"
+  - "from-*"
+  - "with-*"