mcpField
B
browser-mcp

browser-mcp

本地服务
github.com/djyde浏览器自动化8382 周前更新
代码仓库

关于 browser-mcp

browser-mcp 是一个浏览器扩展与 MCP 服务的组合，让 MCP 客户端能够与当前使用的浏览器交互。适合需要让 LLM 读取网页内容或操作浏览器页面的用户。

主要功能

  1. 01获取当前页面的 Markdown 内容
  2. 02向当前页面注入 CSS 样式
  3. 03搜索浏览器历史记录

适用场景

  1. 01让 LLM 总结当前打开的网页
  2. 02为当前页面切换为深色模式
  3. 03在浏览器历史中查找特定关键词的页面

MCP 相关

该项目包含一个 MCP 服务，向 MCP 客户端暴露页面读取、样式注入和历史搜索等工具。服务通过 npx 启动的配置方式接入客户端，并与浏览器扩展配合工作。

#browser-mcp#browser-extension#mcp-server

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "-y",
        "@djyde/mcp-browser"
      ]
    }
  }
}
启动命令npx -y @djyde/mcp-browser

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@djyde/mcp-browser

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

browser-mcp

一个浏览器扩展和 MCP 服务，可让你与正在使用的浏览器交互。

mcp

jkXeswNy@2x

用法

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@djyde/mcp-browser@latest"
      ]
    }
  }
}

工具

所有可用工具都列在 server/src/tools.ts 中。

get_current_page_markdown

获取当前浏览器页面的 Markdown 内容。

示例：

Summarize the current page.
append_style

向当前浏览器页面添加 CSS 样式。

示例：

Change the current page to dark mode.
history_search

搜索浏览器历史记录。

示例：

Search the browser history for "github".

路线图

  • 将扩展发布到扩展商店。
  • 编写文档。
  • 添加更多工具。

构建

pnpm i
扩展
cd extension

# chrome
npm run build

# edge
npm run build:edge

# firefox
npm run build:firefox

构建完成后，扩展将位于 extension/.output 目录中。

服务端

cd server

# dev
npm run dev

# build
npm run build

server/dist/cli.js 是 MCP 服务的入口。

贡献

添加新工具
  1. 将工具 schema 添加到 server/src/tools.ts 中的 tools 数组。
  2. 在 extension/calls.ts 中添加可供扩展调用的处理程序。
  3. 在 server/src/tools.ts 中添加工具处理程序。使用 call 函数调用扩展处理程序。

许可证

AGPL-3.0-or-later

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。