ros/playwright-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(extension): status page (#856)

Browse Source
This commit is contained in:
Yury Semikhatsky
2025-08-08 18:33:10 -07:00
committed by GitHub
parent d3bf2eefc6
commit 21ced701b5
8 changed files with 282 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
extension/src/background.ts
View File

@@ -26,6 +26,10 @@ type PageMessage = {
tabId: number; tabId: number;
windowId: number; windowId: number;
mcpRelayUrl: string; mcpRelayUrl: string;
} | {
type: 'getConnectionStatus';
} | {
type: 'disconnect';
}; };
class TabShareExtension { class TabShareExtension {
@@ -38,6 +42,7 @@ class TabShareExtension {
chrome.tabs.onUpdated.addListener(this._onTabUpdated.bind(this)); chrome.tabs.onUpdated.addListener(this._onTabUpdated.bind(this));
chrome.tabs.onActivated.addListener(this._onTabActivated.bind(this)); chrome.tabs.onActivated.addListener(this._onTabActivated.bind(this));
chrome.runtime.onMessage.addListener(this._onMessage.bind(this)); chrome.runtime.onMessage.addListener(this._onMessage.bind(this));
chrome.action.onClicked.addListener(this._onActionClicked.bind(this));
} }
// Promise-based message handling is not supported in Chrome: https://issues.chromium.org/issues/40753031 // Promise-based message handling is not supported in Chrome: https://issues.chromium.org/issues/40753031
@@ -58,6 +63,16 @@ class TabShareExtension {
() => sendResponse({ success: true }), () => sendResponse({ success: true }),
(error: any) => sendResponse({ success: false, error: error.message })); (error: any) => sendResponse({ success: false, error: error.message }));
return true; // Return true to indicate that the response will be sent asynchronously return true; // Return true to indicate that the response will be sent asynchronously
case 'getConnectionStatus':
sendResponse({
connectedTabId: this._connectedTabId
});
return false;
case 'disconnect':
this._disconnect().then(
() => sendResponse({ success: true }),
(error: any) => sendResponse({ success: false, error: error.message }));
return true;
} }
return false; return false;
} }
@@ -125,14 +140,15 @@ class TabShareExtension {
const oldTabId = this._connectedTabId; const oldTabId = this._connectedTabId;
this._connectedTabId = tabId; this._connectedTabId = tabId;
if (oldTabId && oldTabId !== tabId) if (oldTabId && oldTabId !== tabId)
await this._updateBadge(oldTabId, { text: '', color: null }); await this._updateBadge(oldTabId, { text: '' });
if (tabId) if (tabId)
await this._updateBadge(tabId, { text: '●', color: '#4CAF50' }); await this._updateBadge(tabId, { text: '✓', color: '#4CAF50', title: 'Connected to MCP client' });
} }
private async _updateBadge(tabId: number, { text, color }: { text: string; color: string | null }): Promise<void> { private async _updateBadge(tabId: number, { text, color, title }: { text: string; color?: string, title?: string }): Promise<void> {
try { try {
await chrome.action.setBadgeText({ tabId, text }); await chrome.action.setBadgeText({ tabId, text });
await chrome.action.setTitle({ tabId, title: title || '' });
if (color) if (color)
await chrome.action.setBadgeBackgroundColor({ tabId, color }); await chrome.action.setBadgeBackgroundColor({ tabId, color });
} catch (error: any) { } catch (error: any) {
@@ -185,6 +201,19 @@ class TabShareExtension {
const tabs = await chrome.tabs.query({}); const tabs = await chrome.tabs.query({});
return tabs.filter(tab => tab.url && !['chrome:', 'edge:', 'devtools:'].some(scheme => tab.url!.startsWith(scheme))); return tabs.filter(tab => tab.url && !['chrome:', 'edge:', 'devtools:'].some(scheme => tab.url!.startsWith(scheme)));
} }
private async _onActionClicked(): Promise<void> {
await chrome.tabs.create({
url: chrome.runtime.getURL('status.html'),
active: true
});
}
private async _disconnect(): Promise<void> {
this._activeConnection?.close('User disconnected');
this._activeConnection = undefined;
await this._setConnectedTabId(null);
}
} }
new TabShareExtension(); new TabShareExtension();

2
extension/src/ui/connect.html
View File

@@ -18,6 +18,8 @@
<head> <head>
<title>Playwright MCP extension</title> <title>Playwright MCP extension</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="32x32" href="../../icons/icon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../icons/icon-16.png">
<link rel="stylesheet" href="connect.css"> <link rel="stylesheet" href="connect.css">
</head> </head>
<body> <body>

51
extension/src/ui/connect.tsx
View File

@@ -16,14 +16,8 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { Button, TabItem } from './tabItem.js';
interface TabInfo { import type { TabInfo } from './tabItem.js';
id: number;
windowId: number;
title: string;
url: string;
favIconUrl?: string;
}
type StatusType = 'connected' | 'error' | 'connecting'; type StatusType = 'connected' | 'error' | 'connecting';
@@ -147,7 +141,11 @@ const ConnectApp: React.FC = () => {
<TabItem <TabItem
key={tab.id} key={tab.id}
tab={tab} tab={tab}
onConnect={() => handleConnectToTab(tab)} button={
<Button variant='primary' onClick={() => handleConnectToTab(tab)}>
Connect
</Button>
}
/> />
))} ))}
</div> </div>
@@ -162,41 +160,6 @@ const StatusBanner: React.FC<{ type: StatusType; message: string }> = ({ type, m
return <div className={`status-banner ${type}`}>{message}</div>; return <div className={`status-banner ${type}`}>{message}</div>;
}; };
const Button: React.FC<{ variant: 'primary' | 'default' | 'reject'; onClick: () => void; children: React.ReactNode }> = ({
variant,
onClick,
children
}) => {
return (
<button className={`button ${variant}`} onClick={onClick}>
{children}
</button>
);
};
const TabItem: React.FC<{ tab: TabInfo; onConnect: () => void }> = ({
tab,
onConnect
}) => {
return (
<div className='tab-item'>
<img
src={tab.favIconUrl || 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" fill="%23f6f8fa"/></svg>'}
alt=''
className='tab-favicon'
/>
<div className='tab-content'>
<div className='tab-title'>{tab.title || 'Untitled'}</div>
<div className='tab-url'>{tab.url}</div>
</div>
<Button variant='primary' onClick={onConnect}>
Connect
</Button>
</div>
);
};
// Initialize the React app // Initialize the React app
const container = document.getElementById('root'); const container = document.getElementById('root');
if (container) { if (container) {

13
extension/src/ui/status.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playwright MCP Bridge Status</title>
<link rel="stylesheet" href="connect.css">
</head>
<body>
<div id="root"></div>
<script src="status.tsx" type="module"></script>
</body>
</html>

110
extension/src/ui/status.tsx Normal file
View File

@@ -0,0 +1,110 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { Button, TabItem } from './tabItem.js';
import type { TabInfo } from './tabItem.js';
interface ConnectionStatus {
isConnected: boolean;
connectedTabId: number | null;
connectedTab?: TabInfo;
}
const StatusApp: React.FC = () => {
const [status, setStatus] = useState<ConnectionStatus>({
isConnected: false,
connectedTabId: null
});
useEffect(() => {
void loadStatus();
}, []);
const loadStatus = async () => {
// Get current connection status from background script
const { connectedTabId } = await chrome.runtime.sendMessage({ type: 'getConnectionStatus' });
if (connectedTabId) {
const tab = await chrome.tabs.get(connectedTabId);
setStatus({
isConnected: true,
connectedTabId,
connectedTab: {
id: tab.id!,
windowId: tab.windowId!,
title: tab.title!,
url: tab.url!,
favIconUrl: tab.favIconUrl
}
});
} else {
setStatus({
isConnected: false,
connectedTabId: null
});
}
};
const openConnectedTab = async () => {
if (!status.connectedTabId)
return;
await chrome.tabs.update(status.connectedTabId, { active: true });
window.close();
};
const disconnect = async () => {
await chrome.runtime.sendMessage({ type: 'disconnect' });
window.close();
};
return (
<div className='app-container'>
<div className='content-wrapper'>
{status.isConnected && status.connectedTab ? (
<div>
<div className='tab-section-title'>
Page with connected MCP client:
</div>
<div>
<TabItem
tab={status.connectedTab}
button={
<Button variant='primary' onClick={disconnect}>
Disconnect
</Button>
}
onClick={openConnectedTab}
/>
</div>
</div>
) : (
<div className='status-banner'>
No MCP clients are currently connected.
</div>
)}
</div>
</div>
);
};
// Initialize the React app
const container = document.getElementById('root');
if (container) {
const root = createRoot(container);
root.render(<StatusApp />);
}

67
extension/src/ui/tabItem.tsx Normal file
View File

@@ -0,0 +1,67 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
export interface TabInfo {
id: number;
windowId: number;
title: string;
url: string;
favIconUrl?: string;
}
export const Button: React.FC<{ variant: 'primary' | 'default' | 'reject'; onClick: () => void; children: React.ReactNode }> = ({
variant,
onClick,
children
}) => {
return (
<button className={`button ${variant}`} onClick={onClick}>
{children}
</button>
);
};
export interface TabItemProps {
tab: TabInfo;
onClick?: () => void;
button?: React.ReactNode;
}
export const TabItem: React.FC<TabItemProps> = ({
tab,
onClick,
button
}) => {
return (
<div className='tab-item' onClick={onClick} style={onClick ? { cursor: 'pointer' } : undefined}>
<img
src={tab.favIconUrl || 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" fill="%23f6f8fa"/></svg>'}
alt=''
className='tab-favicon'
/>
<div className='tab-content'>
<div className='tab-title'>
{tab.title || 'Untitled'}
</div>
<div className='tab-url'>{tab.url}</div>
</div>
{button}
</div>
);
};

50
extension/tests/extension.spec.ts
View File

@@ -100,3 +100,53 @@ test('navigate with extension', async ({ browserWithExtension, startClient, serv
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`), pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
}); });
}); });
test('snapshot of an existing page', async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const page = await browserContext.newPage();
await page.goto(server.HELLO_WORLD);
// Another empty page.
await browserContext.newPage();
expect(browserContext.pages()).toHaveLength(3);
const { client } = await startClient({
args: [`--connect-tool`],
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
expect(await client.callTool({
name: 'browser_connect',
arguments: {
method: 'extension'
}
})).toHaveResponse({
result: 'Successfully changed connection method.',
});
expect(browserContext.pages()).toHaveLength(3);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
const navigateResponse = client.callTool({
name: 'browser_snapshot',
arguments: { },
});
const selectorPage = await confirmationPagePromise;
expect(browserContext.pages()).toHaveLength(4);
await selectorPage.locator('.tab-item', { hasText: 'Title' }).getByRole('button', { name: 'Connect' }).click();
expect(await navigateResponse).toHaveResponse({
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
expect(browserContext.pages()).toHaveLength(4);
});

3
extension/vite.config.ts
View File

@@ -42,10 +42,9 @@ export default defineConfig({
emptyOutDir: false, emptyOutDir: false,
minify: false, minify: false,
rollupOptions: { rollupOptions: {
input: 'src/ui/connect.html', input: ['src/ui/connect.html', 'src/ui/status.html'],
output: { output: {
manualChunks: undefined, manualChunks: undefined,
inlineDynamicImports: true,
entryFileNames: 'lib/ui/[name].js', entryFileNames: 'lib/ui/[name].js',
chunkFileNames: 'lib/ui/[name].js', chunkFileNames: 'lib/ui/[name].js',
assetFileNames: 'lib/ui/[name].[ext]' assetFileNames: 'lib/ui/[name].[ext]'