feat: add network monitoring capabilities

README.md

@@ -22,6 +22,24 @@ Browser MCP is an MCP server + Chrome extension that allows you to automate your
 - 🔒 Private: Since automation happens locally, your browser activity stays on your device and isn't sent to remote servers.
 - 👤 Logged In: Uses your existing browser profile, keeping you logged into all your services.
 - 🥷🏼 Stealth: Avoids basic bot detection and CAPTCHAs by using your real browser fingerprint.
+- 📊 Network Monitoring: Monitor network requests and responses from the browser's network tab in addition to console logs.
+
+## Network Monitoring
+
+The Browser MCP server now includes network monitoring capabilities that allow you to:
+
+- **Monitor Network Requests**: Track all HTTP/HTTPS requests made by the browser
+- **View Response Details**: Access response headers, status codes, and timing information
+- **Debug Network Issues**: Identify failed requests, slow responses, and network errors
+- **API Testing**: Monitor API calls and their responses during automation
+
+### Available Tools
+
+- `get_network_logs`: Retrieves network request and response data from the browser's network tab
+- `get_console_logs`: Retrieves console logs (existing functionality)
+- `screenshot`: Takes screenshots of the current page
+
+The network monitoring feature works alongside the existing console monitoring, providing comprehensive debugging capabilities for web automation tasks.
 
 ## Contributing
 

src/index.ts

@@ -24,7 +24,7 @@ function setupExitWatchdog(server: Server) {
 
 const commonTools: Tool[] = [common.pressKey, common.wait];
 
-const customTools: Tool[] = [custom.getConsoleLogs, custom.screenshot];
+const customTools: Tool[] = [custom.getConsoleLogs, custom.getNetworkLogs, custom.screenshot];
 
 const snapshotTools: Tool[] = [
   common.navigate(true),

src/tools/custom.ts

@@ -1,9 +1,17 @@
 import { zodToJsonSchema } from "zod-to-json-schema";
+import { z } from "zod";
 
 import { GetConsoleLogsTool, ScreenshotTool } from "@repo/types/mcp/tool";
 
 import { Tool } from "./tool";
 
+// Network monitoring tool schema
+const GetNetworkLogsTool = z.object({
+  name: z.literal("get_network_logs"),
+  description: z.literal("Get network requests and responses from the browser's network tab"),
+  arguments: z.object({}).optional(),
+});
+
 export const getConsoleLogs: Tool = {
   schema: {
     name: GetConsoleLogsTool.shape.name.value,
@@ -24,6 +32,26 @@ export const getConsoleLogs: Tool = {
   },
 };
 
+export const getNetworkLogs: Tool = {
+  schema: {
+    name: GetNetworkLogsTool.shape.name.value,
+    description: GetNetworkLogsTool.shape.description.value,
+    inputSchema: zodToJsonSchema(GetNetworkLogsTool.shape.arguments),
+  },
+  handle: async (context, _params) => {
+    const networkLogs = await context.sendSocketMessage(
+      "browser_get_network_logs",
+      {},
+    );
+    const text: string = networkLogs
+      .map((log: any) => JSON.stringify(log, null, 2))
+      .join("\n\n");
+    return {
+      content: [{ type: "text", text }],
+    };
+  },
+};
+
 export const screenshot: Tool = {
   schema: {
     name: ScreenshotTool.shape.name.value,