+
+ );
+};
+
+
+const StatusBanner: React.FC<{ status: Status }> = ({ status }) => {
+ return (
+
+ {status && (
+
+
+
+ )}
+
+ {showTabList && (
+
+ {newTab ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ )}
+
+ Select page to expose to MCP server:
+
+
+ {tabs.map(tab => (
+ handleConnectToTab(tab)}>
+ Connect
+
+ }
+ />
+ ))}
+
+
+ {status.message}
+
+ );
+};
+
+// Initialize the React app
+const container = document.getElementById('root');
+if (container) {
+ const root = createRoot(container);
+ root.render(
+
+ );
+};
+
+// Initialize the React app
+const container = document.getElementById('root');
+if (container) {
+ const root = createRoot(container);
+ root.render(
+ {status.isConnected && status.connectedTab ? (
+
+
+
+ ) : (
+
+ Page with connected MCP client:
+
+
+
+ Disconnect
+
+ }
+ onClick={openConnectedTab}
+ />
+
+
+ No MCP clients are currently connected.
+
+ )}
+
+ 
+ );
+};
diff --git a/extension/src/ui/tsconfig.json b/extension/src/ui/tsconfig.json
new file mode 100644
index 0000000..77839b6
--- /dev/null
+++ b/extension/src/ui/tsconfig.json
@@ -0,0 +1,4 @@
+// Help VSCode to find right tsconfig file.
+{
+ "extends": "../../tsconfig.ui.json"
+}
diff --git a/extension/tests/extension.spec.ts b/extension/tests/extension.spec.ts
new file mode 100644
index 0000000..cff28d6
--- /dev/null
+++ b/extension/tests/extension.spec.ts
@@ -0,0 +1,244 @@
+/**
+ * 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 fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { chromium } from 'playwright';
+import { test as base, expect } from '../../tests/fixtures.js';
+
+import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import type { BrowserContext } from 'playwright';
+import type { StartClient } from '../../tests/fixtures.js';
+
+type BrowserWithExtension = {
+ userDataDir: string;
+ launch: (mode?: 'disable-extension') => Promise
+
+ {button}
+
+ {tab.title || 'Untitled'}
+
+ {tab.url}
+