chore(extension): do not show tab selector for browser_navigate (#923)

extension/src/background.ts

@@ -23,8 +23,8 @@ type PageMessage = {
   type: 'getTabs';
 } | {
   type: 'connectToTab';
-  tabId: number;
-  windowId: number;
+  tabId?: number;
+  windowId?: number;
   mcpRelayUrl: string;
 } | {
   type: 'getConnectionStatus';
@@ -59,7 +59,9 @@ class TabShareExtension {
             (error: any) => sendResponse({ success: false, error: error.message }));
         return true;
       case 'connectToTab':
-        this._connectTab(sender.tab!.id!, message.tabId, message.windowId, message.mcpRelayUrl!).then(
+        const tabId = message.tabId || sender.tab?.id!;
+        const windowId = message.windowId || sender.tab?.windowId!;
+        this._connectTab(sender.tab!.id!, tabId, windowId, message.mcpRelayUrl!).then(
             () => sendResponse({ success: true }),
             (error: any) => sendResponse({ success: false, error: error.message }));
         return true; // Return true to indicate that the response will be sent asynchronously

extension/src/ui/connect.tsx

@@ -32,6 +32,7 @@ const ConnectApp: React.FC = () => {
   const [showTabList, setShowTabList] = useState(true);
   const [clientInfo, setClientInfo] = useState('unknown');
   const [mcpRelayUrl, setMcpRelayUrl] = useState('');
+  const [newTab, setNewTab] = useState<boolean>(false);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -76,7 +77,14 @@ const ConnectApp: React.FC = () => {
     }
 
     void connectToMCPRelay(relayUrl);
-    void loadTabs();
+
+    // If this is a browser_navigate command, hide the tab list and show simple allow/reject
+    if (params.get('newTab') === 'true') {
+      setNewTab(true);
+      setShowTabList(false);
+    } else {
+      void loadTabs();
+    }
   }, []);
 
   const handleReject = useCallback((message: string) => {
@@ -100,7 +108,7 @@ const ConnectApp: React.FC = () => {
       setStatus({ type: 'error', message: 'Failed to load tabs: ' + response.error });
   }, []);
 
-  const handleConnectToTab = useCallback(async (tab: TabInfo) => {
+  const handleConnectToTab = useCallback(async (tab?: TabInfo) => {
     setShowButtons(false);
     setShowTabList(false);
 
@@ -108,8 +116,8 @@ const ConnectApp: React.FC = () => {
       const response = await chrome.runtime.sendMessage({
         type: 'connectToTab',
         mcpRelayUrl,
-        tabId: tab.id,
-        windowId: tab.windowId,
+        tabId: tab?.id,
+        windowId: tab?.windowId,
       });
 
       if (response?.success) {
@@ -146,9 +154,22 @@ const ConnectApp: React.FC = () => {
           <div className='status-container'>
             <StatusBanner status={status} />
             {showButtons && (
-              <Button variant='reject' onClick={() => handleReject('Connection rejected. This tab can be closed.')}>
-                Reject
-              </Button>
+              <div className='button-container'>
+                {newTab ? (
+                  <>
+                    <Button variant='primary' onClick={() => handleConnectToTab()}>
+                      Allow
+                    </Button>
+                    <Button variant='reject' onClick={() => handleReject('Connection rejected. This tab can be closed.')}>
+                      Reject
+                    </Button>
+                  </>
+                ) : (
+                  <Button variant='reject' onClick={() => handleReject('Connection rejected. This tab can be closed.')}>
+                    Reject
+                  </Button>
+                )}
+              </div>
             )}
           </div>
         )}

extension/tests/extension.spec.ts

@@ -152,7 +152,8 @@ for (const [mode, startClientMethod] of [
     });
 
     const selectorPage = await confirmationPagePromise;
-    await selectorPage.locator('.tab-item', { hasText: 'Playwright MCP Extension' }).getByRole('button', { name: 'Connect' }).click();
+    // For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
+    await selectorPage.getByRole('button', { name: 'Allow' }).click();
 
     expect(await navigateResponse).toHaveResponse({
       pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),