diff --git a/packages/@n8n/mcp-browser-extension/icons/icon-128.png b/packages/@n8n/mcp-browser-extension/icons/icon-128.png index fefebf9d00e..28f333a6b97 100644 Binary files a/packages/@n8n/mcp-browser-extension/icons/icon-128.png and b/packages/@n8n/mcp-browser-extension/icons/icon-128.png differ diff --git a/packages/@n8n/mcp-browser-extension/icons/icon-16.png b/packages/@n8n/mcp-browser-extension/icons/icon-16.png index 09d673ae5d6..08fe2b23b1f 100644 Binary files a/packages/@n8n/mcp-browser-extension/icons/icon-16.png and b/packages/@n8n/mcp-browser-extension/icons/icon-16.png differ diff --git a/packages/@n8n/mcp-browser-extension/icons/icon-32.png b/packages/@n8n/mcp-browser-extension/icons/icon-32.png index 92cd18efacd..3deb97470bb 100644 Binary files a/packages/@n8n/mcp-browser-extension/icons/icon-32.png and b/packages/@n8n/mcp-browser-extension/icons/icon-32.png differ diff --git a/packages/@n8n/mcp-browser-extension/icons/icon-48.png b/packages/@n8n/mcp-browser-extension/icons/icon-48.png index e8d3ddd4a5b..5ac1ee2fda5 100644 Binary files a/packages/@n8n/mcp-browser-extension/icons/icon-48.png and b/packages/@n8n/mcp-browser-extension/icons/icon-48.png differ diff --git a/packages/@n8n/mcp-browser-extension/manifest.json b/packages/@n8n/mcp-browser-extension/manifest.json index d66fc746221..8a9a405bb0c 100644 --- a/packages/@n8n/mcp-browser-extension/manifest.json +++ b/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": [""], diff --git a/packages/@n8n/mcp-browser-extension/package.json b/packages/@n8n/mcp-browser-extension/package.json index 38b3988a55c..d4ba6928191 100644 --- a/packages/@n8n/mcp-browser-extension/package.json +++ b/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": { diff --git a/packages/@n8n/mcp-browser-extension/src/ui/App.vue b/packages/@n8n/mcp-browser-extension/src/ui/App.vue index 1c0c03d87b5..6c0b7df293e 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/App.vue +++ b/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); } } diff --git a/packages/@n8n/mcp-browser-extension/src/ui/components/InfoRow.vue b/packages/@n8n/mcp-browser-extension/src/ui/components/InfoRow.vue index f0c1e95ed95..a18145a4c88 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/components/InfoRow.vue +++ b/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 { diff --git a/packages/@n8n/mcp-browser-extension/src/ui/components/RememberedHosts.vue b/packages/@n8n/mcp-browser-extension/src/ui/components/RememberedHosts.vue index 4ce72e0fd26..47652ca89ff 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/components/RememberedHosts.vue +++ b/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); } } diff --git a/packages/@n8n/mcp-browser-extension/src/ui/components/TabItem.vue b/packages/@n8n/mcp-browser-extension/src/ui/components/TabItem.vue index aefe905c83b..698af0f9250 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/components/TabItem.vue +++ b/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); } diff --git a/packages/@n8n/mcp-browser-extension/src/ui/components/TabList.vue b/packages/@n8n/mcp-browser-extension/src/ui/components/TabList.vue index 47c24d67048..17e55368843 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/components/TabList.vue +++ b/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; } diff --git a/packages/@n8n/mcp-browser-extension/src/ui/tokens.scss b/packages/@n8n/mcp-browser-extension/src/ui/tokens.scss index b636057896b..478c8e7529b 100644 --- a/packages/@n8n/mcp-browser-extension/src/ui/tokens.scss +++ b/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 {