Skip to content

feat: add cookies, localStorage and sessionStorage #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: staging
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed .DS_Store
Binary file not shown.
7 changes: 7 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
[*]
indent_style = space

[*.{js,ts,jsx,tsx}]
indent_size = 2
quote_style = double
line_length = 120
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
dist
.port
.port
.DS_Store
41 changes: 31 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ This application is a powerful browser monitoring and interaction tool that enab

Read our [docs](https://browsertools.agentdesk.ai/) for the full installation, quickstart and contribution guides.

## Roadmap

Check out our project roadmap here: [Github Roadmap / Project Board](https://github.com/orgs/AgentDeskAI/projects/1/views/1)

## Updates

v1.2.0 is out! Here's a quick breakdown of the update:
Expand All @@ -18,18 +22,32 @@ v1.2.0 is out! Here's a quick breakdown of the update:
- Improved networking between BrowserTools server, extension and MCP server with host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms
- Added ability to more easily exit out of the Browser Tools server with Ctrl+C


## Quickstart Guide

There are three components to run this MCP tool:

1. Install our chrome extension from here: [v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip)
2. Install the MCP server from this command within your IDE: `npx @agentdeskai/browser-tools-mcp@latest`
3. Open a new terminal and run this command: `npx @agentdeskai/browser-tools-server@latest`

* Different IDEs have different configs but this command is generally a good starting point; please reference your IDEs docs for the proper config setup

IMPORTANT TIP - there are two servers you need to install. There's...
- browser-tools-server (local nodejs server that's a middleware for gathering logs)
and
- browser-tools-mcp (MCP server that you install into your IDE that communicates w/ the extension + browser-tools-server)

Please make sure to update the version in your IDE / MCP client as so:
`npx @agentdeskai/browser-tools-mcp@1.2.0`
`npx @agentdeskai/browser-tools-mcp@latest` is what you put into your IDE
`npx @agentdeskai/browser-tools-server@latest` is what you run in a new terminal window

Also make sure to download the latest version of the chrome extension here:
[v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip)
After those three steps, open up your chrome dev tools and then the BrowserToolsMCP panel.

From there you can run the local node server as usual like so:
`npx @agentdeskai/browser-tools-server`
If you're still having issues try these steps:
- Quit / close down your browser. Not just the window but all of Chrome itself.
- Restart the local node server (browser-tools-server)
- Make sure you only have ONE instance of chrome dev tools panel open

And once you've opened your chrome dev tools, logs should be getting sent to your server!
After that, it should work but if it doesn't let me know and I can share some more steps to gather logs/info about the issue!

If you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at [@tedx_ai on x](https://x.com/tedx_ai)

Expand All @@ -56,7 +74,7 @@ Coding agents like Cursor can run these audits against the current page seamless
| **SEO** | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility. |
| **Best Practices** | Checks for general best practices in web development. |
| **NextJS Audit** | Injects a prompt used to perform a NextJS audit. |
| **Audit Mode** | Runs all audting tools in a sequence. |
| **Audit Mode** | Runs all auditing tools in a sequence. |
| **Debugger Mode** | Runs all debugging tools in a sequence. |

---
Expand Down Expand Up @@ -153,7 +171,7 @@ Runs all debugging tools in a particular sequence

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.

Expand All @@ -180,13 +198,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
Expand All @@ -211,6 +231,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
- Run accessibility, performance, SEO, and best practices audits

Expand Down
5 changes: 5 additions & 0 deletions browser-tools-mcp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
- Accessibility, performance, SEO, and best practices audits

Expand Down Expand Up @@ -52,6 +53,7 @@ npx @agentdeskai/browser-tools-mcp
- Element selection
- Browser state analysis
- Accessibility and performance audits
- Browser cookies, localStorage, and sessionStorage access

## MCP Functions

Expand All @@ -67,6 +69,9 @@ The server provides the following MCP functions:
- `mcp_runPerformanceAudit` - Run a performance audit
- `mcp_runSEOAudit` - Run an SEO audit
- `mcp_runBestPracticesAudit` - Run a best practices audit
- `mcp_getCookies` - Get cookies from the current page
- `mcp_getLocalStorage` - Get localStorage data
- `mcp_getSessionStorage` - Get sessionStorage data

## Integration

Expand Down
Loading