add distinct icons for disconnected and restricted tab states

extension/icons/playwriter-icon-black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="424" height="424" fill="none" overflow="visible"><g><path d="M 0 212 C 0 112.063 0 62.095 31.037 31.037 C 62.116 0 112.063 0 212 0 C 311.937 0 361.905 0 392.942 31.037 C 424 62.116 424 112.063 424 212 C 424 311.937 424 361.905 392.942 392.942 C 361.926 424 311.937 424 212 424 C 112.063 424 62.095 424 31.037 392.942 C 0 361.926 0 311.937 0 212" fill="rgb(0, 0, 0)"></path><path d="M 225.732 260.521 L 277.905 312.673 C 283.311 318.1 286.003 320.793 289.014 322.043 C 293.042 323.718 297.557 323.718 301.585 322.043 C 304.596 320.793 307.309 318.1 312.694 312.694 C 318.1 307.288 320.793 304.596 322.043 301.585 C 323.722 297.563 323.722 293.036 322.043 289.014 C 320.793 286.003 318.1 283.29 312.694 277.905 L 260.521 225.732 L 276.442 209.789 C 292.766 193.465 300.907 185.325 298.999 176.548 C 297.07 167.792 286.237 163.785 264.591 155.814 L 192.384 129.208 C 149.2 113.308 127.618 105.358 116.488 116.488 C 105.358 127.618 113.308 149.2 129.208 192.384 L 155.814 264.591 C 163.785 286.237 167.792 297.07 176.548 298.999 C 185.303 300.928 193.465 292.766 209.789 276.442 Z" fill="rgb(255, 255, 255)"></path></g></svg>

extension/icons/playwriter-icon-gray-disabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="424" height="424" fill="none" overflow="visible"><g><path d="M 0 212 C 0 112.063 0 62.095 31.037 31.037 C 62.116 0 112.063 0 212 0 C 311.937 0 361.905 0 392.942 31.037 C 424 62.116 424 112.063 424 212 C 424 311.937 424 361.905 392.942 392.942 C 361.926 424 311.937 424 212 424 C 112.063 424 62.095 424 31.037 392.942 C 0 361.926 0 311.937 0 212" fill="rgb(136, 136, 136)"></path><path d="M 225.732 260.521 L 277.905 312.673 C 283.311 318.1 286.003 320.793 289.014 322.043 C 293.042 323.718 297.557 323.718 301.585 322.043 C 304.596 320.793 307.309 318.1 312.694 312.694 C 318.1 307.288 320.793 304.596 322.043 301.585 C 323.722 297.563 323.722 293.036 322.043 289.014 C 320.793 286.003 318.1 283.29 312.694 277.905 L 260.521 225.732 L 276.442 209.789 C 292.766 193.465 300.907 185.325 298.999 176.548 C 297.07 167.792 286.237 163.785 264.591 155.814 L 192.384 129.208 C 149.2 113.308 127.618 105.358 116.488 116.488 C 105.358 127.618 113.308 149.2 129.208 192.384 L 155.814 264.591 C 163.785 286.237 167.792 297.07 176.548 298.999 C 185.303 300.928 193.465 292.766 209.789 276.442 Z" fill="rgb(255, 255, 255)"></path></g></svg>

extension/src/background.ts

@@ -626,6 +626,12 @@ async function resetDebugger(): Promise<void> {
   }
 }
 
+function isRestrictedUrl(url: string | undefined): boolean {
+  if (!url) return true
+  const restrictedPrefixes = ['chrome://', 'chrome-extension://', 'devtools://', 'edge://']
+  return restrictedPrefixes.some((prefix) => url.startsWith(prefix))
+}
+
 const icons = {
   connected: {
     path: {
@@ -647,29 +653,40 @@ const icons = {
     },
     title: 'Connecting...',
     badgeText: '...',
-    badgeColor: '#FF9800',
+    badgeColor: [0, 0, 0, 0] as [number, number, number, number],
   },
   disconnected: {
+    path: {
+      '16': '/icons/icon-black-16.png',
+      '32': '/icons/icon-black-32.png',
+      '48': '/icons/icon-black-48.png',
+      '128': '/icons/icon-black-128.png',
+    },
+    title: 'Click to attach debugger',
+    badgeText: '',
+    badgeColor: [0, 0, 0, 0] as [number, number, number, number],
+  },
+  restricted: {
     path: {
       '16': '/icons/icon-gray-16.png',
       '32': '/icons/icon-gray-32.png',
       '48': '/icons/icon-gray-48.png',
-      '128': '/icons/icon-gray-48.png',
+      '128': '/icons/icon-gray-128.png',
     },
-    title: 'Click to attach debugger',
+    title: 'Cannot attach to this page',
     badgeText: '',
-    badgeColor: '#333333',
+    badgeColor: [0, 0, 0, 0] as [number, number, number, number],
   },
   error: {
     path: {
       '16': '/icons/icon-gray-16.png',
       '32': '/icons/icon-gray-32.png',
       '48': '/icons/icon-gray-48.png',
-      '128': '/icons/icon-gray-48.png',
+      '128': '/icons/icon-gray-128.png',
     },
     title: 'Error',
     badgeText: '!',
-    badgeColor: '#f44336',
+    badgeColor: [0, 0, 0, 0] as [number, number, number, number],
   },
 } as const
 
@@ -680,10 +697,12 @@ async function updateIcons(): Promise<void> {
   const connectedCount = Array.from(tabs.values()).filter((t) => t.state === 'connected').length
 
   const allTabs = await chrome.tabs.query({})
+  const tabUrlMap = new Map(allTabs.map((tab) => [tab.id, tab.url]))
   const allTabIds = [undefined, ...allTabs.map((tab) => tab.id).filter((id): id is number => id !== undefined)]
 
   for (const tabId of allTabIds) {
     const tabInfo = tabId !== undefined ? tabs.get(tabId) : undefined
+    const tabUrl = tabId !== undefined ? tabUrlMap.get(tabId) : undefined
 
     const iconConfig = (() => {
       if (connectionState === 'error') return icons.error
@@ -691,6 +710,7 @@ async function updateIcons(): Promise<void> {
       if (tabInfo?.state === 'error') return icons.error
       if (tabInfo?.state === 'connecting') return icons.connecting
       if (tabInfo?.state === 'connected') return icons.connected
+      if (tabId !== undefined && isRestrictedUrl(tabUrl)) return icons.restricted
       return icons.disconnected
     })()
 
@@ -701,7 +721,7 @@ async function updateIcons(): Promise<void> {
     })()
 
     const badgeText = (() => {
-      if (iconConfig === icons.connected || iconConfig === icons.disconnected) {
+      if (iconConfig === icons.connected || iconConfig === icons.disconnected || iconConfig === icons.restricted) {
         return connectedCount > 0 ? String(connectedCount) : ''
       }
       return iconConfig.badgeText
@@ -731,6 +751,11 @@ async function onActionClicked(tab: chrome.tabs.Tab): Promise<void> {
     return
   }
 
+  if (isRestrictedUrl(tab.url)) {
+    logger.debug('Cannot attach to restricted URL:', tab.url)
+    return
+  }
+
   const { tabs, connectionState } = store.getState()
   const tabInfo = tabs.get(tab.id)