Browser MCP▌

by djyde
Discover Browser MCP on the Chrome Web Store—a powerful Chrome extension for real-time web interaction, markdown, CSS ch
Browser extension that enables real-time interaction with web pages, allowing retrieval of content as markdown, CSS styling modifications, and browser history searches.
best for
- / Summarizing and analyzing web content
- / Applying custom styling to web pages
- / Research workflows requiring browser history searches
capabilities
- / Extract current page content as markdown
- / Modify page CSS styling in real-time
- / Search browser history
- / Interact with actively browsed web pages
what it does
Browser extension and MCP server that lets you interact with your current browser tab, extracting content as markdown and modifying page styling. Works with the browser you're actively using rather than launching a separate browser instance.
about
Browser MCP is a community-built MCP server published by djyde that provides AI assistants with tools and capabilities via the Model Context Protocol. Discover Browser MCP on the Chrome Web Store—a powerful Chrome extension for real-time web interaction, markdown, CSS ch It is categorized under browser automation.
how to install
You can install Browser MCP in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
license
MIT
Browser MCP is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
readme
browser-mcp
A browser extension and MCP server that allows you to interact with the browser you are using.
Usage
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@djyde/mcp-browser@latest"
]
}
}
}
Tools
All available tools are listed in server/src/tools.ts.
get_current_page_markdown
Get the markdown from current browser browsing page.
example:
Summarize the current page.
append_style
Append a css style to the current browser browsing page.
example:
Change the current page to dark mode.
history_search
Search the browser history.
example:
Search the browser history for "github".
Roadmap
- Publish the extension to extension store.
- Write documentation.
- Add more tools.
Build
pnpm i
Extension
cd extension
# chrome
npm run build
# edge
npm run build:edge
# firefox
npm run build:firefox
After building, the extension will be in the extension/.output directory.
Server
cd server
# dev
npm run dev
# build
npm run build
server/dist/cli.js is the MCP server entry.
Contributing
Add a new tool
- Add the tool schema to the
toolsarray inserver/src/tools.ts. - Add a extension callable handler in
extension/calls.ts. - Add a tool handler in
server/src/tools.ts. Use thecallfunction to call the extension handler.
License
AGPL-3.0-or-later