From c09a64a353c5436dbe647cc11357783d0116b29c Mon Sep 17 00:00:00 2001
From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
Date: Wed, 17 Sep 2025 19:28:18 +0000
Subject: [PATCH] ui: enable chrome extension download (#423)

![image.png](https://app.graphite.dev/user-attachments/assets/22834a69-840e-45e3-a7d1-ea5827fb5f58.png)
---
 apps/web/components/views/integrations.tsx | 46 ++++++++++++++++++----
 apps/web/lib/analytics.ts                  | 16 ++++----
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/views/integrations.tsx b/apps/web/components/views/integrations.tsx
index 4ac44c027..b3e3c92d7 100644
--- a/apps/web/components/views/integrations.tsx
+++ b/apps/web/components/views/integrations.tsx
@@ -334,23 +334,53 @@ export function IntegrationsView() {
 			</div>
 
 			{/* Chrome Extension */}
-			<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden opacity-75">
+			<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
 				<div className="p-4 sm:p-5">
 					<div className="flex items-start gap-3">
 						<div className="p-2 bg-orange-500/20 rounded-lg flex-shrink-0">
 							<ChromeIcon className="h-5 w-5 text-orange-400" />
 						</div>
-						<div className="flex-1 min-w-0">
-							<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-1">
+						<div className="flex-1 min-w-0 mb-3">
+							<div className="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-2 mb-1">
 								<h3 className="text-white font-semibold text-base">
 									Chrome Extension
 								</h3>
-								<div className="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full flex-shrink-0 w-fit">
-									Coming Soon
-								</div>
+								<Button
+									className="text-white bg-secondary w-fit"
+									onClick={() => {
+										window.open(
+											"https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc",
+											"_blank",
+											"noopener,noreferrer",
+										)
+										analytics.extensionInstallClicked()
+									}}
+									size="sm"
+									variant="ghost"
+								>
+									<ChromeIcon className="h-3 w-3 mr-1" />
+									Add to Chrome
+								</Button>
 							</div>
-							<p className="text-white/70 text-sm leading-relaxed">
-								Save web content with one click
+						</div>
+					</div>
+					<div className="space-y-2">
+						<div className="flex items-center gap-3">
+							<div className="w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" />
+							<p className="text-white/80 text-sm">
+								Save any webpage to supermemory
+							</p>
+						</div>
+						<div className="flex items-center gap-3">
+							<div className="w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" />
+							<p className="text-white/80 text-sm">
+								Import All your Twitter Bookmarks
+							</p>
+						</div>
+						<div className="flex items-center gap-3">
+							<div className="w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" />
+							<p className="text-white/80 text-sm">
+								Bring all your chatGPT memories to Supermemory
 							</p>
 						</div>
 					</div>
diff --git a/apps/web/lib/analytics.ts b/apps/web/lib/analytics.ts
index b1fd09d55..28f1d4fe4 100644
--- a/apps/web/lib/analytics.ts
+++ b/apps/web/lib/analytics.ts
@@ -1,4 +1,4 @@
-import posthog from "posthog-js";
+import posthog from "posthog-js"
 
 export const analytics = {
 	userSignedOut: () => posthog.capture("user_signed_out"),
@@ -7,11 +7,11 @@ export const analytics = {
 	tourSkipped: () => posthog.capture("tour_skipped"),
 
 	memoryAdded: (props: {
-		type: "note" | "link" | "file";
-		project_id?: string;
-		content_length?: number;
-		file_size?: number;
-		file_type?: string;
+		type: "note" | "link" | "file"
+		project_id?: string
+		content_length?: number
+		file_size?: number
+		file_type?: string
 	}) => posthog.capture("memory_added", props),
 
 	memoryDetailOpened: () => posthog.capture("memory_detail_opened"),
@@ -41,4 +41,6 @@ export const analytics = {
 
 	mcpViewOpened: () => posthog.capture("mcp_view_opened"),
 	mcpInstallCmdCopied: () => posthog.capture("mcp_install_cmd_copied"),
-};
+
+	extensionInstallClicked: () => posthog.capture("extension_install_clicked"),
+}