feat: migrate to wxt

.env.example

@@ -1,6 +1,6 @@
 # Supabase
-PLASMO_PUBLIC_SUPABASE_URL=""
-PLASMO_PUBLIC_SUPABASE_ANON_KEY=""
+VITE_SUPABASE_URL=""
+VITE_SUPABASE_ANON_KEY=""
 
 # OpenPanel Analytics
-PLASMO_PUBLIC_OPEN_PANEL_KEY=""
+VITE_OPEN_PANEL_KEY=""

.github/workflows/publish.yml

@@ -33,17 +33,24 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: chrome-${{ github.sha }}
-          path: build/chrome-mv3-prod
+          path: build/*-chrome.zip
 
       - name: 🗃️ Archive Firefox artifact
         uses: actions/upload-artifact@v4
         with:
           name: firefox-${{ github.sha }}
-          path: build/firefox-mv2-prod
+          path: build/*-firefox.zip
 
       - name: 💨 Publish!
-        uses: PlasmoHQ/bpp@v3
-        with:
-          chrome-file: build/chrome-mv3-prod.zip
-          firefox-file: build/firefox-mv2-prod.zip
-          keys: ${{ secrets.SUBMIT_KEYS }}
+        run: |
+          bun wxt submit \
+            --chrome-zip build/*-chrome.zip \
+            --firefox-zip build/*-firefox.zip --firefox-sources-zip build/*-sources.zip
+        env:
+          CHROME_EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
+          CHROME_CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+          CHROME_CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+          CHROME_REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+          FIREFOX_EXTENSION_ID: ${{ secrets.FIREFOX_EXTENSION_ID }}
+          FIREFOX_JWT_ISSUER: ${{ secrets.FIREFOX_JWT_ISSUER }}
+          FIREFOX_JWT_SECRET: ${{ secrets.FIREFOX_JWT_SECRET }}

.gitignore

@@ -6,10 +6,11 @@ node_modules
 .pnp.js
 
 # extension
-.plasmo
 build/
-.cache
-keys.json
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
 
 # misc
 .DS_Store

package.json

@@ -6,22 +6,21 @@
   "author": "Bartosz Zagrodzki",
   "scripts": {
     "build": "run-p build:chrome build:firefox",
-    "build:chrome": "plasmo build --src-path=src/app --zip",
-    "build:firefox": "plasmo build --src-path=src/app --target=firefox-mv2 --zip",
+    "build:chrome": "wxt zip",
+    "build:firefox": "wxt -b firefox zip",
     "dev": "bun dev:chrome",
-    "dev:chrome": "plasmo dev --src-path=src/app",
-    "dev:firefox": "plasmo dev --src-path=src/app --target=firefox-mv2",
+    "dev:chrome": "wxt",
+    "dev:firefox": "wxt -b firefox",
     "lint": "biome check",
     "lint:fix": "biome check --write",
     "prepare": "husky",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "postinstall": "wxt prepare"
   },
   "dependencies": {
     "@biomejs/biome": "^1.9.4",
     "@hookform/resolvers": "^3.9.1",
     "@openpanel/web": "^1.0.1",
-    "@plasmohq/messaging": "0.6.2",
-    "@plasmohq/storage": "1.12.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
@@ -39,13 +38,13 @@
     "marked": "^14.1.3",
     "next-themes": "^0.3.0",
     "npm-run-all": "^4.1.5",
-    "plasmo": "0.89.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.53.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "vite-plugin-svgr": "^4.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -54,23 +53,16 @@
     "@commitlint/types": "19.0.3",
     "@tailwindcss/typography": "^0.5.15",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/bun": "latest",
+    "@types/bun": "^1.1.13",
     "@types/chrome": "0.0.270",
     "@types/node": "20.16.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@wxt-dev/auto-icons": "^1.0.2",
+    "@wxt-dev/module-react": "^1.1.2",
     "husky": "^9.1.6",
-    "typescript": "^5.6.3"
-  },
-  "manifest": {
-    "name": "__MSG_extensionName__",
-    "default_locale": "en",
-    "host_permissions": ["<all_urls>"],
-    "permissions": ["storage", "sidePanel", "scripting", "cookies"],
-    "browser_specific_settings": {
-      "gecko": {
-        "id": "[email protected]"
-      }
-    }
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.5",
+    "wxt": "^0.19.16"
   }
 }

src/app/background/index.ts

@@ -1,11 +1,9 @@
-import { setupStorage } from "~/lib/storage";
-
-const main = async () => {
-  await setupStorage();
+import { defineBackground } from "wxt/sandbox";
 
+const main = () => {
   console.log(
     "Background service worker is running! Edit `src/app/background` and save to reload.",
   );
 };
 
-void main();
+export default defineBackground(main);

src/app/devtools/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DevTools</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

src/app/devtools/main.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { browser } from "wxt/browser";
+
+import { Main } from "~/components/common/main";
+import { Layout } from "~/components/layout/layout";
+
+browser.devtools.panels.create(
+  browser.i18n.getMessage("extensionName"),
+  "icons/128.png",
+  "popup.html",
+);
+
+browser.devtools.panels.elements
+  .createSidebarPane(browser.i18n.getMessage("extensionName"))
+  .then((sidebar) => {
+    sidebar.setPage("<p>siema</p>");
+  });
+
+console.log("siema");
+
+const DevTools = () => {
+  return (
+    <Layout className="p-8">
+      <Main filename="app/devtools" />
+    </Layout>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <DevTools />
+  </React.StrictMode>,
+);

src/app/devtools/panels/panel/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <title>TurboStarter Panel</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="url:~src/styles/globals.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DevTools Panel</title>
+    <meta name="manifest.type" content="browser_action" />
   </head>
-
   <body>
     <div id="root"></div>
-    <script src="url:./index.tsx" type="module"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>

src/app/devtools/panels/panel/index.tsx → src/app/devtools/panels/panel/main.tsx

@@ -1,4 +1,5 @@
-import { createRoot } from "react-dom/client";
+import React from "react";
+import ReactDOM from "react-dom/client";
 
 import { Main } from "~/components/common/main";
 import { Layout } from "~/components/layout/layout";
@@ -11,7 +12,8 @@ const Panel = () => {
   );
 };
 
-const element = document.getElementById("root");
-
-const root = element ? createRoot(element) : null;
-root?.render(<Panel />);
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <Panel />
+  </React.StrictMode>,
+);

src/app/newtab/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>New Tab</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

src/app/newtab/index.tsx → src/app/newtab/main.tsx

@@ -1,6 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
 import { Main } from "~/components/common/main";
 import { Layout } from "~/components/layout/layout";
-import "~/styles/globals.css";
 
 const NewTab = () => {
   return (
@@ -10,4 +12,8 @@ const NewTab = () => {
   );
 };
 
-export default NewTab;
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <NewTab />
+  </React.StrictMode>,
+);