feat(browser): migrate browser extension to use plasmo (#48)

Author: chenxin-yan

.github/workflows/browser.yml

@@ -0,0 +1,41 @@
+name: "Submit to Web Store"
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/browser/**"
+      - "packages/server/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment: deploy-browser
+    defaults:
+      run:
+        working-directory: ./apps/browser
+    env:
+      CRX_PUBLIC_KEY: ${{ secrets.CRX_PUBLIC_KEY }}
+      CLERK_FRONTEND_API: ${{ secrets.CLERK_FRONTEND_API }}
+
+    steps:
+      - name: 💾 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 📦 Setup bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: 📦 Install dependencies
+        run: bun ci
+
+      - name: 🛠️ Build the Chrome Extension
+        run: bun run build
+
+      - name: 🛠️ Package the extension into a zip artifact
+        run: bun run package
+
+      - name: 🚀 Browser Platform Publish
+        uses: PlasmoHQ/bpp@v3
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: ./apps/browser/build/chrome-mv3-prod.zip

.github/workflows/chrome.yaml

@@ -0,0 +1,39 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

apps/browser/.gitignore

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

apps/browser/README.md

@@ -0,0 +1,18 @@
+{
+  "root": false,
+  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+  "extends": "//",
+  "files": {
+    "includes": ["**", "!build", "!src/components/ui"]
+  },
+  "linter": {
+    "rules": {
+      "suspicious": {
+        "noUnknownAtRules": "off"
+      }
+    },
+    "domains": {
+      "react": "recommended"
+    }
+  }
+}

apps/browser/assets/icon.png

@@ -0,0 +1,41 @@
+{
+  "name": "browser",
+  "displayName": "Browser",
+  "version": "0.0.1",
+  "description": "A course registration companion for Albert",
+  "author": "Tech@NYU <[email protected]>",
+  "scripts": {
+    "dev": "doppler run -- plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package",
+    "check": "biome check",
+    "check:types": "tsc -noEmit"
+  },
+  "dependencies": {
+    "@clerk/chrome-extension": "^2.7.7",
+    "convex": "^1.28.0",
+    "plasmo": "0.90.5",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "tailwindcss": "4.1.14"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.1.24",
+    "@types/node": "24.8.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "postcss": "8.5.6",
+    "typescript": "5.9.3"
+  },
+  "manifest": {
+    "key": "$CRX_PUBLIC_KEY",
+    "permissions": [
+      "cookies",
+      "storage"
+    ],
+    "host_permissions": [
+      "$PLASMO_PUBLIC_CLERK_SYNC_HOST/*",
+      "$CLERK_FRONTEND_API/*"
+    ]
+  }
+}

apps/browser/biome.json

@@ -0,0 +1,8 @@
+/**
+ * @type {import('postcss').ProcessOptions}
+ */
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

apps/browser/package.json

@@ -0,0 +1,27 @@
+import { ClerkProvider, useAuth } from "@clerk/chrome-extension";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+const PUBLISHABLE_KEY = process.env
+  .PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY as string;
+const SYNC_HOST = process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST as string;
+
+const convex = new ConvexReactClient(
+  process.env.PLASMO_PUBLIC_CONVEX_URL as string,
+);
+
+const ConvexWithClerkProvider = ({ children }) => {
+  return (
+    <ClerkProvider
+      publishableKey={PUBLISHABLE_KEY}
+      syncHost={SYNC_HOST}
+      afterSignOutUrl={chrome.runtime.getURL("popup.html")}
+    >
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        {children}
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+};
+
+export default ConvexWithClerkProvider;

apps/browser/postcss.config.js

@@ -0,0 +1,14 @@
+const SignIn = () => {
+  const handleSignIn = () => {
+    chrome.tabs.create({
+      url: `${process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST}/signin`,
+    });
+  };
+  return (
+    <button type="button" onClick={handleSignIn}>
+      Sign in
+    </button>
+  );
+};
+
+export default SignIn;