turbostarter · Bartek532 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/.env.example b/.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=""
diff --git a/.github/workflows/publish.yml b/.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 }}
diff --git a/.gitignore b/.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

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -18,12 +18,12 @@ Description of the project files and directories.
 ├── .github/                      # Github related files (workflows, templates)
 ├── .husky/                       # Husky config
 ├── .vscode/                      # VSCode settings (extensions, settings)
-├── assets/                       # Static assets (fonts, images, svgs, etc.)
 ├── src/                          # Source code for the extension
 │    ├── app/                     # Entry files for each part of the extension (background, popup, options, etc.)
+│    ├── assets/                  # Static assets (fonts, images, svgs, etc.)
 │    ├── components/              # Shared components
 │    ├── lib/                     # Utility functions and third-party libraries
-│    ├── styles/                  # Global styles
+│    ├── public/                  # Public assets (fonts, locales, etc.)
 │    ├── types/                   # TypeScript types
 │    └── typings/                 # Custom type definitions
 ├── .cursorrules                  # Cursor rules
@@ -33,24 +33,24 @@ Description of the project files and directories.
 ├── bun.lockb                     # Bun lockfile
 ├── commitlint.config.ts          # Config for CommitLint - to enforce commit consistency
 ├── components.json               # shadcn/ui configuration
-├── keys.template.json            # Publishing API keys template
 ├── package.json                  # Dependencies and additional informations about the project
 ├── tailwind.config.ts            # Tailwind configuration
 ├── tsconfig.json                 # TypeScript config
+├── wxt.config.ts                 # WXT configuration
 ```
 
 ### `/app`
 
 Extro ships with the following extension pages preconfigured:
 
-- `background` - [background service worker](https://docs.plasmo.com/framework/background-service-worker)
-- `contents` - [content scripts](https://docs.plasmo.com/framework/content-scripts) that run in the context of web pages
-- `devtools` - [devtools](https://docs.plasmo.com/framework/devtools) page with custom panels
-- `newtab` - [new tab](https://docs.plasmo.com/framework/newtab) page
-- `options` - [options](https://docs.plasmo.com/framework/options) page
-- `popup` - [popup](https://docs.plasmo.com/framework/popup) window
-- `sidepanel` - [side panel](https://docs.plasmo.com/framework/sidepanel)
-- `tabs` - [tabs](https://docs.plasmo.com/framework/tabs) pages (custom pages delivered with the extension)
+- `background` - [background service worker](https://wxt.dev/guide/essentials/entrypoints.html#background)
+- `content` - [content scripts](https://wxt.dev/guide/essentials/content-scripts.html) that run in the context of web pages
+- `devtools` - [devtools](https://wxt.dev/guide/essentials/entrypoints.html#devtools) page with custom panels
+- `newtab` - [new tab](https://wxt.dev/guide/essentials/entrypoints.html#newtab) page
+- `options` - [options](https://wxt.dev/guide/essentials/entrypoints.html#options) page
+- `popup` - [popup](https://wxt.dev/guide/essentials/entrypoints.html#popup) window
+- `sidepanel` - [side panel](https://wxt.dev/guide/essentials/entrypoints.html#side-panel)
+- `tabs` - [unlisted](https://wxt.dev/guide/essentials/entrypoints.html#unlisted-pages) pages (custom pages delivered with the extension)
 
 ## Styleguide
 
@@ -95,12 +95,13 @@ Component.displayName = "Component";
 | ---------------------------------------------- | ----------------------------------------------------------------------------- |
 | [TypeScript](https://www.typescriptlang.org/)  | Static type-checking programming language                                     |
 | [React](https://reactjs.org/)                  | Library for building user interfaces                                          |
-| [Plasmo](https://www.plasmo.com/)              | Next.js for browser extensions                                                |
+| [WXT](https://wxt.dev/)                        | Next-gen Web Extension Framework                                              |
 | [Supabase](https://supabase.com/)              | Open source Firebase alternative                                              |
 | [shadcn/ui](https://ui.shadcn.com/)            | Extendable component library                                                  |
 | [Tailwind](https://tailwindcss.com/)           | Utility-first CSS framework                                                   |
 | [OpenPanel](https://openpanel.dev/)            | Open source analytics                                                         |
 | [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation                                             |
+| [Vite](https://vitejs.dev/)                    | Next generation frontend tool                                                 |
 | [Bun](https://bun.sh/)                         | Package manager and build tool                                                |
 | [Husky](https://github.com/typicode/husky)     | Git hooks                                                                     |
 | [Biome](https://biomejs.dev/)                  | Linting and formatting                                                        |
diff --git a/README.md b/README.md
@@ -23,7 +23,8 @@
 ![GitHub license](https://img.shields.io/github/license/turbostarter/extro)
 <a href="https://discord.gg/KjpK2uk3JP" target="_blank"><img src="https://discord.com/api/guilds/1280456871693779006/widget.png"/></a>
 
-
+> This boilerplate
+> has [Plasmo version](https://github.com/turbostarter/extro/tree/plasmo)
 
 </div>
 
@@ -53,7 +54,7 @@
 
 - 🔒 Full type-safety with Typescript
 - 📄 All pages (background, popup, options etc.)
-- 📜 Content scripts
+- 📜 Content scripts (UI)
 - 🔐 Authentication (OAuth)
 - 💾 Storage
 - 💬 Messaging
@@ -77,12 +78,13 @@
 | ---------------------------------------------- | ----------------------------------------------------------------------------- |
 | [TypeScript](https://www.typescriptlang.org/)  | Static type-checking programming language                                     |
 | [React](https://reactjs.org/)                  | Library for building user interfaces                                          |
-| [Plasmo](https://www.plasmo.com/)              | Next.js for browser extensions                                                |
+| [WXT](https://wxt.dev/)                        | Next-gen Web Extension Framework                                              |
 | [Supabase](https://supabase.com/)              | Open source Firebase alternative                                              |
 | [shadcn/ui](https://ui.shadcn.com/)            | Extendable component library                                                  |
 | [Tailwind](https://tailwindcss.com/)           | Utility-first CSS framework                                                   |
 | [OpenPanel](https://openpanel.dev/)            | Open source analytics                                                         |
 | [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation                                             |
+| [Vite](https://vitejs.dev/)                    | Next generation frontend tool                                                 |
 | [Bun](https://bun.sh/)                         | Package manager and build tool                                                |
 | [Husky](https://github.com/typicode/husky)     | Git hooks                                                                     |
 | [Biome](https://biomejs.dev/)                  | Linting and formatting                                                        |
@@ -130,7 +132,7 @@ bun dev:chrome
 2. Open Chrome and go to `chrome://extensions`
 3. Check `Developer mode`
 4. Click `Load unpacked`
-5. Select the `build/chrome-mv3-dev` directory at root
+5. Select the `build/chrome-mv3` directory at root
 
 #### Firefox
 
@@ -142,7 +144,7 @@ bun dev:firefox
 
 2. Open Firefox and go to `about:debugging#/runtime/this-firefox`
 3. Click `Load Temporary Add-on...`
-4. Select the `build/firefox-mv2-dev/manifest.json` file at root
+4. Select the `build/firefox-mv2/manifest.json` file at root
 
 > [!NOTE]  
 > In Firefox you're adding a plugin in _temporary_ mode - that means it'll disappear after you close the browser.
@@ -156,22 +158,22 @@ bun dev:firefox
 
 #### CI/CD
 
-1. Copy `keys.template.json` to `keys.json` and update the keys (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)
-2. Set content of `keys.json` as [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under `SUBMIT_KEYS` name
+1. Obtain all the [required API keys](https://wxt.dev/guide/essentials/publishing.html#github-action) for your submission (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)
+2. Set your API keys as [Github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under appropriate names
 3. Run `CI / Publish` workflow
 
 ### Pages
 
 Extro ships with the following extension pages preconfigured:
 
-- `background` - [background service worker](https://docs.plasmo.com/framework/background-service-worker)
-- `contents` - [content scripts](https://docs.plasmo.com/framework/content-scripts) that run in the context of web pages
-- `devtools` - [devtools](https://docs.plasmo.com/framework/devtools) page with custom panels
-- `newtab` - [new tab](https://docs.plasmo.com/framework/newtab) page
-- `options` - [options](https://docs.plasmo.com/framework/options) page
-- `popup` - [popup](https://docs.plasmo.com/framework/popup) window
-- `sidepanel` - [side panel](https://docs.plasmo.com/framework/sidepanel)
-- `tabs` - [tabs](https://docs.plasmo.com/framework/tabs) pages (custom pages delivered with the extension)
+- `background` - [background service worker](https://wxt.dev/guide/essentials/entrypoints.html#background)
+- `content` - [content scripts](https://wxt.dev/guide/essentials/content-scripts.html) that run in the context of web pages
+- `devtools` - [devtools](https://wxt.dev/guide/essentials/entrypoints.html#devtools) page with custom panels
+- `newtab` - [new tab](https://wxt.dev/guide/essentials/entrypoints.html#newtab) page
+- `options` - [options](https://wxt.dev/guide/essentials/entrypoints.html#options) page
+- `popup` - [popup](https://wxt.dev/guide/essentials/entrypoints.html#popup) window
+- `sidepanel` - [side panel](https://wxt.dev/guide/essentials/entrypoints.html#side-panel)
+- `tabs` - [unlisted](https://wxt.dev/guide/essentials/entrypoints.html#unlisted-pages) pages (custom pages delivered with the extension)
 
 ## Community 💬 <a name="community"></a>
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/keys.template.json b/keys.template.json
diff --git a/package.json b/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",
@@ -31,6 +30,7 @@
     "@supabase/supabase-js": "^2.46.1",
     "@t3-oss/env-core": "0.11.1",
     "@tanstack/react-query": "^5.59.16",
+    "@webext-core/messaging": "^2.1.0",
     "ai": "^3.4.32",
     "chrome-ai": "^1.11.1",
     "class-variance-authority": "^0.7.0",
@@ -39,13 +39,14 @@
     "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",
+    "react-router-dom": "^6.28.0",
     "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 +55,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"
   }
 }
diff --git a/src/app/background/index.ts b/src/app/background/index.ts
@@ -1,11 +1,16 @@
-import { setupStorage } from "~/lib/storage";
-
-const main = async () => {
-  await setupStorage();
+import { StorageKey, getStorage } from "@/lib/storage";
+import { defineBackground } from "wxt/sandbox";
+import { Message, onMessage } from "~/lib/messaging";
 
+const main = () => {
   console.log(
     "Background service worker is running! Edit `src/app/background` and save to reload.",
   );
 };
 
-void main();
+onMessage(Message.USER, () => {
+  const storage = getStorage(StorageKey.USER);
+  return storage.getValue();
+});
+
+export default defineBackground(main);
diff --git a/src/app/background/messages/user.ts b/src/app/background/messages/user.ts
diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button";
+import ReactDOM from "react-dom/client";
+import { browser } from "wxt/browser";
+import { createShadowRootUi } from "wxt/client";
+import { defineContentScript } from "wxt/sandbox";
+
+import "~/assets/styles/globals.css";
+
+const ContentScriptUI = () => {
+  return (
+    <Button onClick={() => alert("This is injected UI!")}>
+      {browser.i18n.getMessage("contentScriptUI")}
+    </Button>
+  );
+};
+
+export default defineContentScript({
+  matches: ["<all_urls>"],
+  cssInjectionMode: "ui",
+
+  async main(ctx) {
+    console.log(
+      "Content script is running! Edit `src/app/content` and save to reload.",
+    );
+
+    const ui = await createShadowRootUi(ctx, {
+      name: "extro-ui",
+      position: "overlay",
+      anchor: "body",
+      onMount: (container) => {
+        const app = document.createElement("div");
+        container.append(app);
+
+        const root = ReactDOM.createRoot(app);
+        root.render(<ContentScriptUI />);
+        return root;
+      },
+      onRemove: (root) => {
+        root?.unmount();
+      },
+    });
+
+    ui.mount();
+  },
+});