Add background worker, update repo and apps (#3)

* wip(extension) Testing background scripts

* Updated web app and extension, added background worker to extension

apps/chrome-extension/package.json

@@ -13,24 +13,25 @@
     "dev:firefox": "plasmo dev --target=firefox-mv2",
     "package": "plasmo package",
     "package:firefox": "plasmo package --target=firefox-mv2",
-    "start": "web-ext run --source-dir ./build/chrome-mv3-dev -t chromium --start-url chrome://newtab",
     "start:firefox": "web-ext run --source-dir ./build/firefox-mv2-dev"
   },
   "dependencies": {
-    "@clerk/chrome-extension": "1.1.6-snapshot.v6146fa5",
+    "@clerk/chrome-extension": "2.0.0-snapshot.v4fb8995",
+    "@clerk/shared": "^2.4.0",
     "plasmo": "0.88.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.25.1",
     "tailwindcss": "3.4.1",
-    "web-ext": "^8.2.0"
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@types/chrome": "0.0.258",
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "@types/webextension-polyfill": "^0.10.7",
     "postcss": "8.4.33",
     "prettier": "3.2.4",
     "typescript": "5.3.3"
@@ -41,8 +42,8 @@
       "storage"
     ],
     "host_permissions": [
-      "http://localhost/*",
-      "https://$CLERK_FRONTEND_API/*"
+      "$CLERK_FRONTEND_API/*",
+      "$PLASMO_PUBLIC_CLERK_SYNC_HOST/*"
     ],
     "key": "$CRX_PUBLIC_KEY"
   }

apps/chrome-extension/src/background/index.ts

@@ -0,0 +1,27 @@
+import { __unstable__createClerkClient as createClerkClient } from '@clerk/chrome-extension/background';
+
+console.log('Background Script w/ Clerk createClerkClient() demo loaded')
+
+const publishableKey = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY
+if (!publishableKey) {
+  throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY to the .env.development file')
+}
+
+async function getToken() {
+  const clerk = await createClerkClient({
+    publishableKey,
+    syncHost: process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST
+  });
+  return await clerk.session?.getToken();
+}
+
+// create a listener to listen for messages from content scripts
+// NOTE: A runtime listener cannot be async.
+//       It must return true, in order to keep the connection open and send a response later.
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log('Handling request for the user\s current token')
+  getToken().then((token) => sendResponse({ token }));
+  return true;
+});
+
+

apps/chrome-extension/src/popup/index.tsx

@@ -1,5 +1,4 @@
 
-import React from "react";
 import "../style.css";
 import { RouterProvider, createMemoryRouter } from "react-router-dom";
 
@@ -11,6 +10,7 @@ import { SignInPage } from "./routes/sign-in";
 import { SignUpPage } from "./routes/sign-up";
 import { Index } from "./routes";
 import { Settings } from "./routes/settings";
+import { SDKFeatures } from "./routes/sdk-features";
 
 // Create the router
 // This removes the need for an App.tsx file
@@ -22,6 +22,7 @@ const router = createMemoryRouter([
       { path: "/sign-in", element: <SignInPage /> },
       { path: "/sign-up", element: <SignUpPage /> },
       { path: "/settings", element: <Settings /> },
+      { path: "/sdk-features", element: <SDKFeatures /> }
     ],
   },
 ]);

apps/chrome-extension/src/popup/layouts/root-layout.tsx

@@ -7,7 +7,7 @@ import {
 } from "@clerk/chrome-extension";
 
 const PUBLISHABLE_KEY = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY
-
+console.log('pub key', PUBLISHABLE_KEY)
 if (!PUBLISHABLE_KEY) {
   throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY to the .env.development file')
 }
@@ -23,14 +23,15 @@ export const RootLayout = () => {
       routerReplace={(to) => navigate(to, { replace: true })}
       publishableKey={PUBLISHABLE_KEY}
       afterSignOutUrl="/"
-      syncSessionWithTab
+      syncHost="http://localhost:5173"
     >
-      <div className="plasmo-w-[785px] plasmo-h-[600px]">
-        <main>
+      <div className="plasmo-w-[785px] plasmo-h-[600px] plasmo-flex plasmo-flex-col">
+        <main className="plasmo-grow plasmo-border-2 plasmo-border-red-500">
           <Outlet />
         </main>
-        <footer>
+        <footer className="plasmo-border-2 plasmo-border-green-500">
           <SignedIn>
+            <Link to="/sdk-features">SDK Features</Link>
             <Link to="/settings">Settings</Link>
             <UserButton />
           </SignedIn>

apps/chrome-extension/src/popup/routes/sdk-features.tsx

@@ -0,0 +1,16 @@
+export const SDKFeatures = () => {
+  return (
+    <>
+      <p>Background Worker</p>
+      <button
+        onClick={() => {
+          chrome.tabs.create({
+            url: "./tabs/background-worker-demo.html"
+          })
+        }}>
+        open tab page
+      </button>
+
+    </>
+  )
+}

apps/chrome-extension/src/tabs/background-worker-demo.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Clerk Background Worker demo</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+
+<body></body>
+
+</html>

apps/chrome-extension/src/tabs/background-worker-demo.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export default function NewTab() {
+  const [token, setToken] = React.useState<string | null>(null);
+
+  const getToken = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    // send a message to the background service worker
+    chrome.runtime.sendMessage({ greeting: 'get-token' }, response => {
+      console.log('MESSAGE RESPONSE', JSON.stringify(response));
+      setToken(response.token);
+    });
+  };
+
+  return (
+    <div>
+      <p>Clerk Background Worker demo</p>
+      <div className="App">
+        <p>This new tab simluates a content page where you might want to access user information, or make a request to your backend server and include a user token in the request.</p>
+        <p>Make sure that you are signed into the extension. You can have the popup closed.</p>
+        <button
+          type='button'
+          onClick={getToken}
+          className='button invert'
+        >
+          Get Token (Service Worker)
+        </button>
+        {token && <p>Token: {token}</p>}
+      </div>
+
+    </div>
+  )
+}
+
+
+

apps/chrome-extension/tsconfig.json

@@ -9,6 +9,7 @@
     "./**/*.tsx"
   ],
   "compilerOptions": {
+    "jsx": "react-jsx",
     "paths": {
       "~*": [
         "./src/*"

apps/web-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "clerk-react-quickstart",
+  "name": "web-app",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -13,7 +13,8 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.2.7",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",

apps/web-app/src/layouts/root-layout.tsx

@@ -0,0 +1,37 @@
+import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { ClerkProvider, SignedIn, SignedOut, UserButton } from '@clerk/clerk-react'
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Missing Publishable Key')
+}
+
+export default function RootLayout() {
+  const navigate = useNavigate()
+
+  return (
+    <ClerkProvider
+      routerPush={(to) => navigate(to)}
+      routerReplace={(to) => navigate(to, { replace: true })}
+      publishableKey={PUBLISHABLE_KEY}
+    >
+      <header className="header">
+        <div>
+          <div>
+            <p>Clerk + React + React Router App</p>
+          </div>
+          <SignedIn>
+            <UserButton />
+          </SignedIn>
+          <SignedOut>
+            <Link to="/sign-in">Sign In</Link>
+          </SignedOut>
+        </div>
+      </header>
+      <main>
+        <Outlet />
+      </main>
+    </ClerkProvider>
+  )
+}

apps/web-app/src/main.tsx

@@ -1,19 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
-import { ClerkProvider } from '@clerk/clerk-react';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+// Import the layouts
+import RootLayout from './layouts/root-layout'
 
-if (!PUBLISHABLE_KEY) {
-  throw new Error('Missing Publishable Key');
-}
+// Import the components
+import IndexPage from './routes'
+import SignInPage from './routes/sign-in'
+import SignUpPage from './routes/sign-up'
+
+const router = createBrowserRouter([
+  {
+    element: <RootLayout />,
+    children: [
+      { path: '/', element: <IndexPage /> },
+      { path: '/sign-in/*', element: <SignInPage /> },
+      { path: '/sign-up/*', element: <SignUpPage /> },
+    ],
+  },
+])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <App />
-    </ClerkProvider>
-  </React.StrictMode>
-);
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)

apps/web-app/src/routes/index.tsx

@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom'
+
+export default function IndexPage() {
+  return (
+    <div>
+      <h1>This is the index page</h1>
+      <div>
+        <ul>
+          <li>
+            <Link to="/sign-up">Sign Up</Link>
+          </li>
+          <li>
+            <Link to="/sign-in">Sign In</Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}

apps/web-app/src/routes/sign-in.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from '@clerk/clerk-react'
+
+export default function SignInPage() {
+  return <SignIn path="/sign-in" />
+}

apps/web-app/src/routes/sign-up.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from '@clerk/clerk-react'
+
+export default function SignUpPage() {
+  return <SignUp path="/sign-up" />
+}

package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "prettier": "^3.3.3",
-    "turbo": "^2.0.10",
+    "turbo": "^2.0.14",
     "typescript": "^5.5.4"
   },
   "pnpm": {