OpenIsle
OpenIsle
一切可能，从此刻启航，在此遇见灵感与共鸣
最新回复
最新
精选
排行榜
选择分类
选择标签
话题
参与人员
回复
浏览
活动
OpenIsle Telegram 群/Discord 服务器建了一个 Discord 服务器，邀请链接 https://discord.com/invite/7kgFbtY7tD 欢迎大家加入闲聊 👏🏻👏🏻 Telegram 群 @Openlsle Discord 服务器链接 https://discord.com/invite/7kgFbtY7tD 至此，OpenIsle 有了站内信和站内频道、Telegram 群、Discord 服务器三种交流方式啦
运营反馈
纯水
avataravataravataravataravatar
6
97
昨天 17:11
【开源共建🎉】欢迎参与OpenIsle开源社区共建随着开服3周左右，来了不少小伙伴；也有参与本项目开发的朋友，目前10位左右，比我预期的高很多～再此衷心感激各位，开源的乐趣就是coding和协作，这几周跟大家一起协作coding真的很快乐 本帖荟萃各种本项目的相关信息，希望帮到想要参与开源社区的朋友 🔗本站Roadmap一览 🔗部署本站的方法 本站和谐交流频道 https://t.me/Openlsle :tieba68: 感谢 @[Jay3] 创建 https://discord.com/invite/7kgFbtY7tD 感谢 @[palmcivet] 搭建～ 本站问题列表和新功能共创 🔗bug & feature 列表 -- 已在GitHub Issue列出 如果有感兴趣的问题和新功能，可随时评论认领，有好点子可评论交流； 如果有发现的问题，或想要新增的新功能，也可以在Issue页面直接New Issue提出 (截至目前总共已经有96issues，已解决64issues 🎉) 感谢这两周参与项目的小伙伴 @[白山] @[AnNingUI] @[netcat] @[WilliamColton] @[浮小云] @[immort521] @[pansysyy] 如大家遇到问题也可在本站问题反馈帖直接反馈👇 🔗问题反馈 其他信息 🔗本站安卓端 感谢大佬 @[Jay3] 支持
技术 & 开发调优
开源共建
avataravataravataravatar
8
812
9.7 14:20
👨‍💻用户反馈收集贴本帖会收集各个渠道用户反馈，并同步修复情况； 大家如果有问题也可以在本帖或本站各个角落反馈，我会收集后修复 :)
运营反馈
快问快答
avataravataravataravataravatar
177
2347
前天 10:05
中国的小偷好像非常少？突然有感而发--仅代表个人观点 我的小电动钥匙每次都放在车前面的小包包里，起到一个随用随走的作用。我已经如此操作1年左右，我的小电动还没被偷。用最常见的“95% 置信上界”来算，每天被偷的概率上界：≈0.82% 以及一些偶然事件：咖啡厅使用电脑，前台取餐的时候，我的电脑一般直接放桌上，没有发生遗失的情况。耳机/手机落在出租车多次，也依然找回 对比一下：之前和朋友去伦敦玩，在大笨钟附近闲逛，后来有一个套壳的米老鼠（就是国内常见的发床单，全身充气套壳那种..）过来让我们“Take a picture”, 我就让一个朋友帮我们拍，拍完走多几步路我就发现钱包不见了，转身一看米老鼠也消失无踪 🤣 这么对比下来 中国的被偷的机率真的非常低，我在YouTube上也看过老外做实验，在中国把macbook放在咖啡厅里，离开一小时后，电脑还在。这到底是啥原因呢
水深火热
纯水
avataravataravataravatar
3
12
今天 07:42
让米表📋多了一种浏览方式😎https://evanmi.top/new.html 让银河系最美米表多了一个不太美的浏览方式！
好玩 & 轻松交流
纯水
avataravataravatar
4
43
今天 00:31
Feature Updated🎉： OpenAPI 已上线～ 现在可以方便调试继大佬 @[palmcivet] 支持了OpenAPI后。（详细支持请看大佬前文 🔗OpenIsle API 接入 Fumadocs 文档、🔗记录一下 OpenAPI 文档始末）. 今天我这边把OpenAPI部署上线，并配置了DNS规则，目前可通过 https://docs.open-isle.com 访问文档。本文主要讲讲部署规则以及使用 另外我也把站内大部分API的注解完善，文档更人性化，目前是英文版本，如有需求可出中文 部署时间线 我已经将API Docs的部署融合进本站CI & CD中，目前如下 每次合入main之后，都会构建预发环境 http://staging.open-isle.com/ ,现在文档是紧随其后进行部署，也就是说代码合入main之后，如果是新增后台接口，就可以立即通过OpenAPI文档页面进行查看和调试，但是如果想通过OpenAPI调试需要选择预发环境的 每日凌晨三点会构建并重新部署正式环境，届时当日合入main的新后台API也可以通过OpenAPI文档页面调试 👆如图是合入main之后构建预发+docs的情形，总大约耗时4分钟左右 使用 预发环境/正式环境切换，可以通过如下位置切换API环境 API分两种，一种是需要鉴权（需登录后的token），另一种是直接访问，可以直接访问的GET请求，直接点击Send即可调试，如下👇，比如本站的推荐流rss: /api/rss: https://docs.open-isle.com/openapi/feed 需要登陆的API，比如关注，取消关注，发帖等，则需要提供token，目前在“API与调试”可获取自身token，可点击link看看👉 https://www.open-isle.com/about?tab=api copy完token之后，粘贴到Bear之后, 即可发送调试， 如下👇，大家亦可自行尝试：https://docs.open-isle.com/openapi/me 应用场景 🎉 方便大部分前端调试的需求，如果有只想做前端/客户端的同学参与本项目，该平台会大大提高效率 自动化：有自动化发帖/自动化操作的需求，亦可通过该平台实现或调试
技术 & 开发调优
OpenAPI
开源共建
avatar
0
21
今天 00:17
Chrome MCP Server完全安装指南：让Claude Code真正"接管"你的浏览器Chrome MCP Server完全安装指南：让Claude Code真正"接管"你的浏览器 **大家好，我是Leo哥🤓🤓🤓，这一篇我们主要讲讲这个重量级MCP：**Chrome MCP Server 。 还记得第一次听说Chrome MCP Server的时候，我就被这个概念震撼了——让AI直接操控你的浏览器！想象一下，Claude Code可以帮你自动截图、填表单、抓取网页内容，甚至分析你的浏览历史...简直就像有了一个超级智能的浏览器助手！ 但是，理想很丰满，现实很骨感。当我兴冲冲地开始安装配置时，各种坑接踵而来：扩展装不上、服务连不通、配置文件写错...整整折腾了一个下午才搞定。 所以这篇文章，我要把Chrome MCP Server的完整安装过程毫无保留地分享给大家，包括我踩过的所有坑和解决方案，让你们可以一次性搞定！ 什么是Chrome MCP Server 官方定义：Chrome MCP Server是一个基于Model Context Protocol (MCP)的浏览器自动化服务器，它通过Chrome扩展和Native Messaging Host，将浏览器的各种操作能力暴露给AI助手使用。 Leo哥说人话：简单来说，就是给Claude Code装了一双"电子手"，让它能像人类一样操作你的浏览器。想要截图？没问题！需要填表单？小菜一碟！要分析网页内容？轻而易举！ **🔧 **核心组件就像一个三件套： Chrome扩展：相当于"眼睛"，能看到浏览器里的一切 Native Bridge：相当于"神经系统"，负责传递指令 MCP Server：相当于"大脑"，理解AI的需求并执行操作 为什么要用Chrome MCP Server 你可能会问：我为什么要让AI操控我的浏览器呢？ **🤔 **思考时间： 如果你每天都要做这些重复性工作，你会不会觉得很烦？ 定期截图保存网页内容 批量检查网站的更新状态 从多个页面提取相同类型的信息 测试网站在不同状态下的表现 Chrome MCP Server的优势就在这里体现了： 与传统浏览器自动化工具的对比 对比维度 Playwright/Selenium Chrome MCP Server 资源占用 ❌ 需要启动独立浏览器进程 ✅ 复用现有Chrome浏览器 用户环境 ❌ 需要重新登录，失去用户设置 ✅ 保持你的登录状态和所有配置 启动速度 ❌ 每次都要启动新的浏览器实例 ✅ 瞬间连接，无需等待 交互体验 ❌ 只能通过代码控制 ✅ AI理解自然语言指令 学习成本 ❌ 需要学习复杂的API ✅ 就像和朋友聊天一样简单 **💡 **核心理解：Chrome MCP Server不是要替代你操作浏览器，而是要成为你的智能助手，帮你处理那些重复、枯燥的任务。 环境准备 在开始安装之前，我们需要确保环境满足要求。这一步非常重要，很多安装问题都是环境不满足导致的。 系统要求检查 组件 要求 检查方法 Node.js >= 18.19.0 node --version npm/pnpm 最新稳定版 npm --version或pnpm --version Chrome浏览器 任意稳定版 打开Chrome查看版本 Claude Code >= 2025-Q1版本 claude --version 环境检查脚本 让我们先运行一个简单的检查，确保所有前置条件都满足： # 检查Node.js版本 echo "🔍 检查Node.js版本..." node_version=$(node --version 2>/dev/null || echo "未安装") echo "Node.js版本: $node_version" # 检查npm版本 echo "🔍 检查npm版本..." npm_version=$(npm --version 2>/dev/null || echo "未安装") echo "npm版本: $npm_version" # 检查pnpm版本 echo "🔍 检查pnpm版本..." pnpm_version=$(pnpm --version 2>/dev/null || echo "未安装") echo "pnpm版本: $pnpm_version" # 检查Claude Code echo "🔍 检查Claude Code版本..." claude_version=$(claude --version 2>/dev/null || echo "未安装") echo "Claude Code版本: $claude_version" 如果发现任何组件缺失，请先完成以下安装： # 安装Node.js (以macOS为例) brew install node # 安装pnpm (推荐) npm install -g pnpm # 安装Claude Code CLI # 请访问 https://claude.ai/code 获取最新安装说明 **💥 **Leo哥踩坑实录： 我第一次安装时，Node.js版本是17.x，结果扩展安装时各种报错。折腾了半天才发现版本不够新。所以大家一定要确保Node.js版本>= 18.19.0，这不是开玩笑的！ 安装步骤 Chrome MCP Server的安装分为三个步骤：下载扩展、安装桥接器、启动服务。每一步都很关键，缺一不可。 步骤1：获取并安装Chrome扩展 首先我们要给Chrome装上"眼睛"： # 1. 下载最新的扩展包 # 访问 https://github.com/hangwin/mcp-chrome/releases # 下载 mcp-chrome-extension.zip 文件 # 解压到一个你记得住的目录，比如 ~/Downloads/mcp-chrome-extension/ 然后安装扩展： **打开Chrome，在地址栏输入 **chrome://extensions/ 开启右上角的"开发者模式"开关 点击左上角的"加载已解压的扩展程序" 选择刚才解压的目录 扩展安装成功后，你会在扩展栏看到Chrome MCP的图标 如下图，就说明拓展已经成功配置了。 步骤2：安装Native Messaging Bridge 这一步是安装"神经系统"，让Chrome扩展能够与外部程序通信： 方法一：使用pnpm（推荐） # 启用pnpm的post-install脚本 pnpm config set enable-pre-post-scripts true # 全局安装桥接器 pnpm add -g mcp-chrome-bridge # 验证安装 mcp-chrome-bridge --version 方法二：使用npm # 全局安装桥接器 npm install -g mcp-chrome-bridge # 手动注册（如果自动注册失败） mcp-chrome-bridge register 步骤3：启动HTTP服务 现在要给Chrome MCP装上"大脑"： 点击Chrome扩展栏的MCP图标 在弹出的面板中点击"Connect"按钮 **扩展会自动在 **http://127.0.0.1:12306/mcp 启动服务 如果需要修改端口，可以在扩展设置中调整 **🤔 **思考时间： 为什么要用HTTP服务而不是直接通信？因为HTTP协议支持实时流式传输（SSE），AI可以实时获取浏览器状态变化，响应更快更及时！ 安装验证 让我们确认一下各个组件是否正常工作： # 检查mcp-chrome-bridge是否正确安装 which mcp-chrome-bridge # 检查Chrome扩展是否连接成功 curl -s http://127.0.0.1:12306/mcp/health || echo "服务未启动" # 检查端口是否被正确监听 netstat -an | grep 12306 如果一切正常，你应该看到： mcp-chrome-bridge的安装路径 端口12306正在监听 在Claude Code中配置 现在我们要让Claude Code和Chrome MCP Server建立连接。这就像给AI和浏览器之间搭建一座桥梁。 配置方法一：使用命令行（推荐） Claude Code提供了非常简便的MCP添加命令： # 添加到当前项目（项目级配置） claude mcp add --transport http chrome-mcp http://127.0.0.1:12306/mcp # 添加到用户全局配置 claude mcp add -s user --transport http chrome-mcp http://127.0.0.1:12306/mcp 配置方法二：手动编辑配置文件 如果你喜欢手动控制，也可以直接编辑配置文件： 项目级配置文件位置： # 在项目根目录创建或编辑 ./.mcp.json 用户级配置文件位置： # macOS/Linux ~/.claude/config.json # Windows %APPDATA%\Claude\config.json 配置文件内容： { "mcpServers": { "chrome-mcp": { "type": "http", "url": "http://127.0.0.1:12306/mcp", "description": "Chrome浏览器自动化控制服务" } } } STDIO备用方案 如果HTTP方式有问题，还可以使用STDIO方式（不过功能会受限一些）： # 首先找到mcp-chrome-bridge的安装路径 npm list -g mcp-chrome-bridge # 假设路径是 /usr/local/lib/node_modules/mcp-chrome-bridge claude mcp add chrome-mcp-stdio node /usr/local/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js **💥 **Leo哥踩坑实录： **我第一次配置时，傻乎乎地把HTTP地址写错了，写成了 **http://localhost:12306/mcp，结果Claude一直连不上。后来才发现必须用 127.0.0.1！这个细节很重要，因为Chrome扩展的安全策略对localhost和127.0.0.1的处理是不同的。 验证安装效果 配置完成后，我们需要验证一下Chrome MCP Server是否真的工作了。 基础连接测试 # 查看已注册的MCP服务器 claude mcp list # 你应该看到类似这样的输出： # ✅ chrome-mcp (http://127.0.0.1:12306/mcp) - connected 可以看到，已经成功连接上了。 在Claude Code中，你也可以输入： /mcp 正常情况下会显示： 🟢 chrome-mcp (connected) - 20+ browser automation tools available - Supports: screenshot, navigation, content analysis, etc. 可以看到，同样看到看到具体的效果。 功能测试 让我们实际测试一下几个核心功能： 测试1：获取当前标签页信息 请使用Chrome MCP Server工具，显示我当前打开的所有标签页 可以看到，直接打开了所有浏览器打开的标签页，并且还标注了哪个标签页是被激活的。 测试2：网页内容获取 请你使用chrome-mcp-server获取当前页面的主要文本内容 可以看出来，完全把我们当前打开的页面，完整的进行分析思考，然后进行概括了。 如果这些命令都能正常执行，恭喜你！Chrome MCP Server已经成功安装并运行了。 **🎯 **小测试： 在看下面的常见问题之前，你能猜到安装过程中最容易出现的问题是什么吗？提示：和权限有关～ 常见问题解决 经过无数次的安装调试，我总结出了这些最常见的问题和解决方案： 问题1：扩展安装后显示"未连接" 症状：扩展图标是灰色的，点击后显示"Not Connected" 原因分析： mcp-chrome-bridge未正确安装或注册 Chrome的Native Messaging权限被阻止 解决方案： # 重新注册桥接器 mcp-chrome-bridge register # 重启Chrome浏览器 # 如果还不行，检查Chrome的权限设置 # 前往 chrome://settings/content/nativeMessaging # 确保允许站点使用Native Messaging 问题2：Claude连接MCP服务失败 症状：claude mcp list 显示 "disconnected" 或者连接超时 原因分析： HTTP服务未启动或端口被占用 防火墙阻止了本地连接 配置文件路径错误 解决方案： # 检查端口是否被占用 lsof -i :12306 # 检查防火墙设置（macOS） sudo pfctl -sr | grep 12306 # 重新启动扩展服务 # 点击Chrome扩展图标 -> Disconnect -> Connect 问题3：pnpm安装后无法找到mcp-chrome-bridge命令 症状：mcp-chrome-bridge: command not found 原因分析：全局包路径未加入系统PATH 解决方案： # 检查pnpm全局路径 pnpm root -g # 将路径添加到PATH（添加到 ~/.bashrc 或 ~/.zshrc） export PATH="$(pnpm root -g)/.bin:$PATH" # 重新加载shell配置 source ~/.zshrc # 或 source ~/.bashrc 问题4：权限被拒绝错误 症状：各种permission denied错误 解决方案： # 确保Node.js全局包目录有写权限 sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} # 或者使用nvm来管理Node.js版本，避免权限问题 **💡 **如何排查：90%的安装问题都和权限、路径、端口冲突有关。如果遇到问题，先检查这三个方面。 Chrome MCP Server工具全览 Chrome MCP Server提供了20+个强大的工具，让我们来看看都有哪些： 浏览器管理工具 工具名称 功能描述 使用场景 get_windows_and_tabs 列出所有窗口和标签页 批量管理标签页 chrome_navigate 导航到指定URL 自动化浏览 chrome_close_tabs 关闭特定标签页 清理无用标签 chrome_go_back_or_forward 浏览器前进后退 导航控制 内容分析工具 工具名称 功能描述 使用场景 chrome_get_web_content 提取页面文本/HTML内容 内容分析 search_tabs_content AI驱动的标签页语义搜索 智能信息检索 chrome_get_interactive_elements 查找可点击元素 页面分析 chrome_console 获取控制台输出 调试和监控 交互操作工具 工具名称 功能描述 使用场景 chrome_click_element 点击页面元素 自动化操作 chrome_fill_or_select 填写表单字段 表单自动化 chrome_keyboard 模拟键盘输入 快捷键操作 截图和视觉工具 工具名称 功能描述 使用场景 chrome_screenshot 高级截图功能 记录和分享 数据管理工具 工具名称 功能描述 使用场景 chrome_history 搜索浏览历史 信息回溯 chrome_bookmark_search 搜索书签 书签管理 chrome_bookmark_add 添加书签 内容收藏 chrome_bookmark_delete 删除书签 书签清理 网络监控工具 工具名称 功能描述 使用场景 chrome_network_capture_start/stop 网络请求捕获 API分析 chrome_network_request 发送HTTP请求 接口测试 性能优化建议 为了让Chrome MCP Server运行得更顺畅，这里有一些建议： 系统性能优化 # 1. 限制Chrome内存使用 # 启动Chrome时添加参数 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --max_old_space_size=4096 # 2. 定期清理无用标签页 # 可以设置自动清理规则 总结 经过这么详细的介绍，相信大家对Chrome MCP Server的安装和使用已经有了全面的了解。 写在最后 Chrome MCP Server的出现，让我们看到了AI与浏览器深度集成的巨大潜力。虽然安装配置过程略显复杂，但一旦搭建完成，它带来的效率提升绝对值得这些投入。 记住，工具的价值不在于它有多复杂，而在于它能为我们解决什么实际问题。Chrome MCP Server就是这样一个工具——它把复杂的浏览器自动化变得简单，让AI真正成为我们的智能助手。 希望这篇详细的安装指南能帮助大家顺利搭建起自己的Chrome MCP Server环境。如果在使用过程中遇到任何问题，欢迎随时交流讨论！ 现在你已经学会了安装Chrome MCP Server，你最想让它帮你自动化完成什么任务呢？ 下期预告： 《MCP开发实战：如何创建属于自己的MCP工具》 关于作者： Leo哥，专注AI工具和开发效率提升，分享实用的技术经验和避坑指南。 参考资料： Chrome MCP Server官方仓库 Model Context Protocol文档 Claude Code官方文档 有问题欢迎交流讨论！
技术 & 开发调优
软件开发
avataravataravatar
3
16
今天 00:11
9月10号苹果发布会，大家会看吗？会买17系列吗？欢迎留下你的看法
好玩 & 轻松交流
apple
快问快答
avataravataravataravataravatar
17
56
昨天 18:00
优化了下移动端首页帖子的展示方式，大家提一提意见，怎么改更好看
技术 & 开发调优
软件开发
avataravataravataravatar
6
49
昨天 17:59
大家周二早安，抽一杯咖啡嘿嘿～
好玩 & 轻松交流
抽奖
avataravataravataravataravatar
11
89
昨天 17:35