refactor: Swapped from bun to esbuild, other changes to playground app

Author: royanger

playground/browser-extension-js/README.md

@@ -57,10 +57,16 @@ pnpm pkglab:add
 
 ### 4. Install dependencies
 
-This playground is not a pnpm workspace member, so use `bun install` to install dependencies:
+This playground is not a pnpm workspace member, so use `pnpm install` to install dependencies:
 
 ```bash
-bun install
+pnpm install --ignore-workspace
+```
+
+The first time you install packages you will will may to approve builds. Use:
+
+```bash
+pnpm approve-builds --ignore-workspace
 ```
 
 ### 5. Set up environment
@@ -104,10 +110,17 @@ When you make changes to `@clerk/chrome-extension` (or its dependencies), rebuil
 
 ```bash
 # From repo root
-pnpm turbo build --filter=@clerk/chrome-extension...
-pnpm pkglab pub @clerk/chrome-extension
+pnpm turbo build --filter=@clerk/chrome-extension... && pnpm pkglab pub @clerk/chrome-extension
+
 
 # From this playground
-bun install
-pnpm build
+
+# If you haven't approved build yet
+pnpm install --ignore-workspace
+pnpm approve-builds
+pnpm dev 
+
+# If you have approved builds already
+pnpm install
+pnpm dev
 ```

playground/browser-extension-js/build/manifest.json

@@ -3,8 +3,13 @@
   "name": "Clerk Extension JS Demo",
   "description": "A Chrome extension demo using @clerk/chrome-extension with plain TypeScript.",
   "version": "0.0.1",
-  "permissions": ["cookies", "storage"],
-  "host_permissions": ["http://localhost/*"],
+  "permissions": [
+    "cookies",
+    "storage"
+  ],
+  "host_permissions": [
+    "http://localhost/*"
+  ],
   "action": {
     "default_title": "Clerk Extension Demo",
     "default_popup": "popup.html"

playground/browser-extension-js/build/popup.css

@@ -1,9 +1,53 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { width: 300px; min-height: 300px; background: #111; color: #fff; font-family: system-ui, sans-serif; }
-#app { display: flex; flex-direction: column; min-height: 300px; }
-#content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
-h1 { font-size: 1.1rem; font-weight: 600; }
-#nav { display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; background: #222; border-top: 1px solid #333; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 600px;
+  max-height: 600px;
+  height: 600px;
+  background: #111;
+  color: #fff;
+  font-family: system-ui, sans-serif;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 600px;
+}
+
+#content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  padding: 1rem;
+}
+
+h1 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  text-align: center;
+}
+
+#nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem 1rem;
+  background: #222;
+  border-top: 1px solid #333;
+}
+
+#nav:has(#sign-out-btn) {
+  justify-content: space-between;
+}
+
 #sign-in-btn {
   background: #2563eb;
   color: #fff;
@@ -14,8 +58,33 @@ h1 { font-size: 1.1rem; font-weight: 600; }
   cursor: pointer;
   transition: background 0.15s;
 }
-#sign-in-btn:hover { background: #1d4ed8; }
-#sign-in-btn:active { background: #1e40af; }
+
+#sign-in-btn:hover {
+  background: #1d4ed8;
+}
+
+#sign-in-btn:active {
+  background: #1e40af;
+}
+
+#sign-out-btn {
+  background: #6C47FF;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+#sign-out-btn:hover {
+  background: #5639CC;
+}
+
+#sign-out-btn:active {
+  background: #4A30B3;
+}
 
 .user-card {
   width: 100%;
@@ -26,32 +95,38 @@ h1 { font-size: 1.1rem; font-weight: 600; }
   padding: 0.75rem;
   text-align: left;
 }
+
 .user-card-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 0.75rem;
 }
+
 .user-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   object-fit: cover;
 }
+
 .user-name {
   font-size: 1rem;
   font-weight: 600;
 }
+
 .user-info-row {
   display: flex;
   justify-content: space-between;
   padding: 0.3rem 0;
   font-size: 0.8rem;
   border-top: 1px solid #2a2a2a;
 }
+
 .info-label {
   color: #888;
 }
+
 .info-value {
   color: #fff;
   text-align: right;

playground/browser-extension-js/build/popup.html

@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clerk Extension Demo</title>
   <link rel="stylesheet" href="popup.css" />
 </head>
+
 <body>
   <div id="app">
+    <div>
+      <h1>Clerk JS Chrome Extension Quickstart</h1>
+    </div>
     <div id="content"></div>
     <nav id="nav"></nav>
   </div>
   <script src="popup.js"></script>
 </body>
+
 </html>