feat: Update Browser Use extension to n8n rebrand (no-changelog) (#41096)

packages/@n8n/mcp-browser-extension/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "n8n Browser Use",
 	"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvRoWEdJjhgP9qs6R1jcemywrw+I91EJZtYur5C97hjjUc5nPao4jSv1qXFksdKuMddb9IEvzBElr5EYsXSaiVqdbRl8Gge0xYV1gGga653T2d9BuXL7NKv/wZxJ2i/coHSjhhIULQUBAVwu0JFMbHY5T8LfqrzBljuY7u1Xa7jmLmx0QrsoKLbGUoOBVZz4ztEGKEQHEelgg+ph2LrcYJczMBZ80PaHQAaWrvbCYF4vnZLd++Svy70ZCt7gr93L8BXHc8j1c3VojQTk+Uvqhm/4nZdYHlEmruQkd0pE+zTyegbcDlw0oc+6sLbsc0CqmJz8zH0OvSTfSVK7h6LNwbQIDAQAB",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"description": "Let n8n AI set up credentials, fill out forms, and automate anything in your browser",
 	"permissions": ["debugger", "activeTab", "tabs", "storage", "webNavigation"],
 	"host_permissions": ["<all_urls>"],

packages/@n8n/mcp-browser-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n8n/mcp-browser-extension",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": true,
   "description": "Chrome extension that lets n8n AI control browser tabs via CDP",
   "scripts": {

packages/@n8n/mcp-browser-extension/src/ui/App.vue

@@ -149,9 +149,9 @@ const showConnectPrompt = computed(() => hasRelayUrl.value && isRelayAllowed.val
 	height: min(700px, calc(100dvh - 2 * var(--spacing--md)));
 	min-height: 420px;
 	background: var(--background--subtle);
-	border: var(--border-width) var(--border-style) var(--color--foreground--tint-1);
+	border: var(--border);
 	border-radius: var(--radius--xl);
-	box-shadow: var(--shadow--light);
+	box-shadow: var(--shadow--sm);
 	overflow: hidden;
 
 	// In a popup window the window itself is the card — no chrome, fill the viewport
@@ -177,14 +177,8 @@ const showConnectPrompt = computed(() => hasRelayUrl.value && isRelayAllowed.val
 }
 
 .logo {
-	display: block;
+	justify-content: flex-start;
 	margin-bottom: var(--spacing--lg);
-
-	:deep(svg) {
-		margin-left: 0;
-		width: auto;
-		height: 24px;
-	}
 }
 
 .title {
@@ -193,13 +187,13 @@ const showConnectPrompt = computed(() => hasRelayUrl.value && isRelayAllowed.val
 	gap: var(--spacing--xs);
 	font-size: var(--font-size--lg);
 	font-weight: var(--font-weight--medium);
-	color: var(--color--text--shade-1);
+	color: var(--text-color);
 	margin: 0 0 var(--spacing--lg);
 }
 
 .status-dot {
-	width: 12px;
-	height: 12px;
+	width: var(--height--4xs);
+	height: var(--height--4xs);
 	border-radius: 50%;
 	background: var(--color--success);
 	flex-shrink: 0;
@@ -213,7 +207,7 @@ const showConnectPrompt = computed(() => hasRelayUrl.value && isRelayAllowed.val
 
 .divider {
 	border: none;
-	border-top: var(--border-width) var(--border-style) var(--color--foreground--tint-1);
+	border-top: var(--border);
 	margin: 0;
 }
 
@@ -229,10 +223,10 @@ const showConnectPrompt = computed(() => hasRelayUrl.value && isRelayAllowed.val
 	border-radius: var(--radius);
 	cursor: pointer;
 	font-size: var(--font-size--xs);
-	color: var(--color--text--shade-1);
+	color: var(--text-color);
 
 	&:hover {
-		background: var(--color--background);
+		background: var(--background--hover);
 	}
 }
 

packages/@n8n/mcp-browser-extension/src/ui/components/InfoRow.vue

@@ -37,8 +37,8 @@ defineProps<{
 	width: var(--row-marker-size);
 	height: var(--row-marker-size);
 	border-radius: 50%;
-	background: var(--color--background);
-	color: var(--color--text--shade-1);
+	background: var(--background--subtle);
+	color: var(--text-color);
 }
 
 .info-content {
@@ -50,7 +50,7 @@ defineProps<{
 .info-title {
 	font-size: var(--font-size--sm);
 	font-weight: var(--font-weight--medium);
-	color: var(--color--text--shade-1);
+	color: var(--text-color);
 }
 
 .info-description {

packages/@n8n/mcp-browser-extension/src/ui/components/RememberedHosts.vue

@@ -45,7 +45,7 @@ defineEmits<{ forget: [host: string] }>();
 	align-items: center;
 	gap: var(--spacing--2xs);
 	padding: var(--spacing--2xs) var(--spacing--xs);
-	border: var(--border-width) var(--border-style) var(--color--foreground--tint-1);
+	border: var(--border);
 	border-radius: var(--radius);
 }
 
@@ -56,7 +56,7 @@ defineEmits<{ forget: [host: string] }>();
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: var(--font-size--xs);
-	color: var(--color--text--shade-1);
+	color: var(--text-color);
 }
 
 .host-remove {
@@ -72,8 +72,8 @@ defineEmits<{ forget: [host: string] }>();
 	color: var(--text-color--subtler);
 
 	&:hover {
-		background: var(--color--background);
-		color: var(--color--text--shade-1);
+		background: var(--background--hover);
+		color: var(--text-color);
 	}
 }
 </style>

packages/@n8n/mcp-browser-extension/src/ui/components/TabItem.vue

@@ -68,7 +68,7 @@ function hideFavicon(event: Event): void {
 	cursor: pointer;
 
 	&:hover {
-		background: var(--background--surface--hover);
+		background: var(--background--hover);
 	}
 }
 
@@ -79,8 +79,8 @@ function hideFavicon(event: Event): void {
 }
 
 .tab-favicon {
-	width: 24px;
-	height: 24px;
+	width: var(--height--xs);
+	height: var(--height--xs);
 	border-radius: var(--radius--sm);
 }
 

packages/@n8n/mcp-browser-extension/src/ui/components/TabList.vue

@@ -40,7 +40,5 @@ function isSelected(tab: chrome.tabs.Tab): boolean {
 	list-style: none;
 	padding: 0;
 	margin: 0;
-	overflow-y: auto;
-	min-height: 60px;
 }
 </style>

packages/@n8n/mcp-browser-extension/src/ui/tokens.scss

@@ -27,7 +27,7 @@ body {
 	font-family: var(--font-family);
 	-webkit-font-smoothing: antialiased;
 	background-color: var(--color--background);
-	color: var(--color--text--shade-1);
+	color: var(--text-color);
 }
 
 /** Keep the shared card layout for extension panels. */
@@ -39,7 +39,6 @@ body {
 	border: var(--border);
 	border-radius: var(--radius--lg);
 	padding: var(--spacing--lg);
-	min-height: 0;
 }
 
 .panel + .panel {