feat: Enable access to browser storage (cookies, localStorage, sessionStorage)

- Add the ability to retrieve and analyze cookies, localStorage, and sessionStorage.
- Implement new MCP tools and API endpoints for accessing browser storage data.
- Enhance the Chrome extension to capture browser storage.

Author: thepushkarp

README.md

@@ -27,7 +27,7 @@ If you have any questions or issues, feel free to open an issue ticket! And if y
 
 There are three core components all used to capture and analyze browser data:
 
-1. **Chrome Extension**: A browser extension that captures screenshots, console logs, network activity and DOM elements.
+1. **Chrome Extension**: A browser extension that captures screenshots, console logs, network activity, DOM elements, and browser storage (cookies, localStorage, sessionStorage).
 2. **Node Server**: An intermediary server that facilitates communication between the Chrome extension and any instance of an MCP server.
 3. **MCP Server**: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.
 
@@ -54,13 +54,15 @@ All consumers of the BrowserTools MCP Server interface with the same NodeJS API
 - Tracks selected DOM elements
 - Sends all logs and current element to the BrowserTools Connector
 - Connects to Websocket server to capture/send screenshots
+- Retrieves cookies, localStorage, and sessionStorage data
 - Allows user to configure token/truncation limits + screenshot folder path
 
 #### Node Server
 
 - Acts as middleware between the Chrome extension and MCP server
 - Receives logs and currently selected element from Chrome extension
 - Processes requests from MCP server to capture logs, screenshot or current element
+- Retrieves browser storage data (cookies, localStorage, sessionStorage)
 - Sends Websocket command to the Chrome extension for capturing a screenshot
 - Intelligently truncates strings and # of duplicate objects in logs to avoid token limits
 - Removes cookies and sensitive headers to avoid sending to LLMs in MCP clients
@@ -85,6 +87,7 @@ Once installed and configured, the system allows any compatible MCP client to:
 - Capture network traffic
 - Take screenshots
 - Analyze selected elements
+- Access browser storage (cookies, localStorage, sessionStorage)
 - Wipe logs stored in our MCP server
 
 ## Compatibility

browser-tools-mcp/README.md

@@ -9,6 +9,7 @@ A Model Context Protocol (MCP) server that provides AI-powered browser tools int
 - Network request analysis
 - Screenshot capture capabilities
 - Element selection and inspection
+- Browser storage access (cookies, localStorage, sessionStorage)
 - Real-time browser state monitoring
 
 ## Installation
@@ -44,6 +45,7 @@ npx @agentdeskai/browser-tools-mcp
 - Screenshot capture
 - Element selection
 - Browser state analysis
+- Browser storage access
 
 ## MCP Functions
 
@@ -55,6 +57,9 @@ The server provides the following MCP functions:
 - `mcp_getNetworkSuccess` - Get successful network requests
 - `mcp_getNetworkLogs` - Get all network logs
 - `mcp_getSelectedElement` - Get the currently selected DOM element
+- `mcp_getCookies` - Get cookies from the current page
+- `mcp_getLocalStorage` - Get localStorage data
+- `mcp_getSessionStorage` - Get sessionStorage data
 
 ## Integration
 

browser-tools-mcp/mcp-server.ts

@@ -190,6 +190,48 @@ server.tool("wipeLogs", "Wipe all browser logs from memory", async () => {
   };
 });
 
+// Add new tool for getting cookies
+server.tool("getCookies", "Get all cookies from the browser", async () => {
+  const response = await fetch(`http://127.0.0.1:${PORT}/cookies`);
+  const json = await response.json();
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify(json, null, 2),
+      },
+    ],
+  };
+});
+
+// Add new tool for getting localStorage
+server.tool("getLocalStorage", "Get all localStorage items", async () => {
+  const response = await fetch(`http://127.0.0.1:${PORT}/local-storage`);
+  const json = await response.json();
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify(json, null, 2),
+      },
+    ],
+  };
+});
+
+// Add new tool for getting sessionStorage
+server.tool("getSessionStorage", "Get all sessionStorage items", async () => {
+  const response = await fetch(`http://127.0.0.1:${PORT}/session-storage`);
+  const json = await response.json();
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify(json, null, 2),
+      },
+    ],
+  };
+});
+
 // Start receiving messages on stdio
 (async () => {
   try {

browser-tools-server/README.md

@@ -8,6 +8,7 @@ A powerful browser tools server for capturing and managing browser events, logs,
 - Network request monitoring
 - Screenshot capture
 - Element selection tracking
+- Browser storage access (cookies, localStorage, sessionStorage)
 - WebSocket real-time communication
 - Configurable log limits and settings
 
@@ -44,6 +45,9 @@ npx @agentdeskai/browser-tools-server
 - `/all-xhr` - Get all network requests
 - `/screenshot` - Capture screenshots
 - `/selected-element` - Get currently selected DOM element
+- `/cookies` - Get cookies from the current page
+- `/local-storage` - Get localStorage data
+- `/session-storage` - Get sessionStorage data
 
 ## API Documentation
 
@@ -55,6 +59,9 @@ npx @agentdeskai/browser-tools-server
 - `GET /network-success` - Returns recent successful network requests
 - `GET /all-xhr` - Returns all recent network requests
 - `GET /selected-element` - Returns the currently selected DOM element
+- `GET /cookies` - Returns cookies from the current page
+- `GET /local-storage` - Returns localStorage data
+- `GET /session-storage` - Returns sessionStorage data
 
 ### POST Endpoints
 

browser-tools-server/browser-connector.ts

@@ -415,6 +415,24 @@ export class BrowserConnector {
               );
               screenshotCallbacks.clear(); // Clear all callbacks
             }
+          }
+          // Handle cookies data
+          else if (data.type === "cookies-data") {
+            console.log("Received cookies data from extension");
+            // Store the cookies data temporarily
+            this.lastCookiesData = data.cookies;
+          }
+          // Handle localStorage data
+          else if (data.type === "local-storage-data") {
+            console.log("Received localStorage data from extension");
+            // Store the localStorage data temporarily
+            this.lastLocalStorageData = data.storage;
+          }
+          // Handle sessionStorage data
+          else if (data.type === "session-storage-data") {
+            console.log("Received sessionStorage data from extension");
+            // Store the sessionStorage data temporarily
+            this.lastSessionStorageData = data.storage;
           } else {
             console.log("Unhandled message type:", data.type);
           }
@@ -484,6 +502,191 @@ export class BrowserConnector {
         }
       }
     );
+
+    // Add endpoint for cookies
+    this.app.get(
+      "/cookies",
+      (req: express.Request, res: express.Response): void => {
+        console.log("Browser Connector: Received request to /cookies endpoint");
+
+        if (!this.activeConnection) {
+          console.log("Browser Connector: No active WebSocket connection to Chrome extension");
+          res.status(503).json({ error: "Chrome extension not connected" });
+          return;
+        }
+
+        // Request cookies data from extension
+        this.getCookies()
+          .then((cookiesData) => {
+            console.log("Browser Connector: Received cookies data from extension");
+            res.json(cookiesData);
+          })
+          .catch((error) => {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.error("Browser Connector: Error getting cookies:", errorMessage);
+            res.status(500).json({ error: errorMessage });
+          });
+      }
+    );
+
+    // Add endpoint for localStorage
+    this.app.get(
+      "/local-storage",
+      (req: express.Request, res: express.Response): void => {
+        console.log("Browser Connector: Received request to /local-storage endpoint");
+
+        if (!this.activeConnection) {
+          console.log("Browser Connector: No active WebSocket connection to Chrome extension");
+          res.status(503).json({ error: "Chrome extension not connected" });
+          return;
+        }
+
+        // Request localStorage data from extension
+        this.getLocalStorage()
+          .then((storageData) => {
+            console.log("Browser Connector: Received localStorage data from extension");
+            res.json(storageData);
+          })
+          .catch((error) => {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.error("Browser Connector: Error getting localStorage:", errorMessage);
+            res.status(500).json({ error: errorMessage });
+          });
+      }
+    );
+
+    // Add endpoint for sessionStorage
+    this.app.get(
+      "/session-storage",
+      (req: express.Request, res: express.Response): void => {
+        console.log("Browser Connector: Received request to /session-storage endpoint");
+
+        if (!this.activeConnection) {
+          console.log("Browser Connector: No active WebSocket connection to Chrome extension");
+          res.status(503).json({ error: "Chrome extension not connected" });
+          return;
+        }
+
+        // Request sessionStorage data from extension
+        this.getSessionStorage()
+          .then((storageData) => {
+            console.log("Browser Connector: Received sessionStorage data from extension");
+            res.json(storageData);
+          })
+          .catch((error) => {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.error("Browser Connector: Error getting sessionStorage:", errorMessage);
+            res.status(500).json({ error: errorMessage });
+          });
+      }
+    );
+  }
+
+  // Add properties to store the latest data
+  private lastCookiesData: any = null;
+  private lastLocalStorageData: any = null;
+  private lastSessionStorageData: any = null;
+
+  // Add method to get cookies
+  private getCookies(): Promise<any> {
+    if (!this.activeConnection) {
+      throw new Error("Chrome extension not connected");
+    }
+
+    // Reset the stored data
+    this.lastCookiesData = null;
+
+    // Create a promise that will resolve when we get the cookies data
+    const cookiesPromise = new Promise<any>((resolve, reject) => {
+      // Set timeout to reject if we don't get a response
+      const timeout = setTimeout(() => {
+        reject(new Error("Timeout waiting for cookies data from Chrome extension"));
+      }, 5000);
+
+      // Set up an interval to check for data
+      const checkInterval = setInterval(() => {
+        if (this.lastCookiesData) {
+          clearTimeout(timeout);
+          clearInterval(checkInterval);
+          resolve(this.lastCookiesData);
+        }
+      }, 100);
+    });
+
+    // Send request to extension
+    console.log("Browser Connector: Requesting cookies data from extension");
+    this.activeConnection.send(JSON.stringify({ type: "get-cookies" }));
+
+    // Wait for data
+    return cookiesPromise;
+  }
+
+  // Add method to get localStorage
+  private getLocalStorage(): Promise<any> {
+    if (!this.activeConnection) {
+      throw new Error("Chrome extension not connected");
+    }
+
+    // Reset the stored data
+    this.lastLocalStorageData = null;
+
+    // Create a promise that will resolve when we get the localStorage data
+    const storagePromise = new Promise<any>((resolve, reject) => {
+      // Set timeout to reject if we don't get a response
+      const timeout = setTimeout(() => {
+        reject(new Error("Timeout waiting for localStorage data from Chrome extension"));
+      }, 5000);
+
+      // Set up an interval to check for data
+      const checkInterval = setInterval(() => {
+        if (this.lastLocalStorageData) {
+          clearTimeout(timeout);
+          clearInterval(checkInterval);
+          resolve(this.lastLocalStorageData);
+        }
+      }, 100);
+    });
+
+    // Send request to extension
+    console.log("Browser Connector: Requesting localStorage data from extension");
+    this.activeConnection.send(JSON.stringify({ type: "get-local-storage" }));
+
+    // Wait for data
+    return storagePromise;
+  }
+
+  // Add method to get sessionStorage
+  private getSessionStorage(): Promise<any> {
+    if (!this.activeConnection) {
+      throw new Error("Chrome extension not connected");
+    }
+
+    // Reset the stored data
+    this.lastSessionStorageData = null;
+
+    // Create a promise that will resolve when we get the sessionStorage data
+    const storagePromise = new Promise<any>((resolve, reject) => {
+      // Set timeout to reject if we don't get a response
+      const timeout = setTimeout(() => {
+        reject(new Error("Timeout waiting for sessionStorage data from Chrome extension"));
+      }, 5000);
+
+      // Set up an interval to check for data
+      const checkInterval = setInterval(() => {
+        if (this.lastSessionStorageData) {
+          clearTimeout(timeout);
+          clearInterval(checkInterval);
+          resolve(this.lastSessionStorageData);
+        }
+      }, 100);
+    });
+
+    // Send request to extension
+    console.log("Browser Connector: Requesting sessionStorage data from extension");
+    this.activeConnection.send(JSON.stringify({ type: "get-session-storage" }));
+
+    // Wait for data
+    return storagePromise;
   }
 
   private async handleScreenshot(req: express.Request, res: express.Response) {