AI导哈

网页抓取控制工具

一个基于Python Flask和Cursor Browser Controls的网页抓取和调试工具，适用于网页开发和数据提取。

  • by zappie2010
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 zappie2010/browser_mcp

使用说明

🌐 网络爬虫仪表板 - 浏览器控件实操

这是一个简单的网页抓取仪表板项目，用于实践Cursor的浏览器控件功能。

📋 项目概述

该项目旨在使用Python Flask创建一个简单的网页抓取工具，并通过Cursor的浏览器控制功能，让用户能够实践网页开发和调试。

🚀 快速启动

1. 环境设置

# Python 가상환경 생성 및 활성화
python -m venv venv
# Windows: venv\Scripts\activate
# macOS/Linux: source venv/bin/activate

# 패키지 설치
pip install -r requirements.txt

2. 启动服务器

python app.py

在浏览器中 http://localhost:5000请通过（该网址/平台）访问。

3. 激活浏览器控件

  1. 光标设置 → 测试版 → 启用“光标浏览器”
  2. 在Chat中点击“+Browser”按钮
  3. 브라우저 기능을 사용해서 google.com에 접속해줘 测试

详细指南: 教程事先准备事项 参考

📚 教程及实践

这个项目 光标浏览器控件教程这是一个教育用项目。

🎯 教程概述

  • 所需时间大约40分钟
  • 难度初级~中级
  • 对象Python 开发者（无需网页开发知识）

📋 实习内容

  1. 更改CSS样式 - 实时颜色和布局修改
  2. 链接过滤功能 - 添加搜索功能
  3. 加载动画 - 改善用户体验
  4. 错误处理改进 - 更好的错误信息
  5. 导出数据 - 下载JSON文件
  6. 添加深色模式 - 使用CSS变量

完整教程: 教程/README.md请查看其中的详细指南！

🛠️ 技术栈

  • 后端Python 3.8+，Flask
  • 前端HTML5，CSS3，原生JavaScript
  • **抓取（或“爬取”）**BeautifulSoup4，Requests
  • 开发工具光标浏览器控件

📁 项目结构

browser_mcp/
├── app.py                 # Flask 애플리케이션
├── requirements.txt       # Python 의존성
├── templates/
│   └── index.html        # 메인 페이지 템플릿
├── static/
│   ├── style.css         # CSS 스타일
│   └── script.js         # JavaScript 로직
└── README.md             # 프로젝트 문서

🎨 主要功能

网页抓取功能

  • URL有效性检查
  • 网页基本信息提取（标题、描述、状态码）
  • 提取链接列表（最多10个）
  • 提取图片列表（最多5个）
  • 错误处理及用户反馈

用户界面

  • 响应式设计
  • 实时加载状态显示
  • 直观的结果展示
  • 显示错误消息

浏览器控件优化

  • 使用CSS变量轻松修改样式
  • 明确的类名和ID
  • 结构化的HTML标记
  • 便于调试的代码结构

🔧 自定义/定制

修改CSS变量

static/style.css 文件的 :root 在该部分中，可以轻松修改颜色、间距、字体等。

修改抓取逻辑

app.py 文件的 scrape_website() 可以在函数中修改要提取的数据。

添加UI组件

templates/index.html可以在此处添加新的部分或组件。

🐛 解决问题

常见问题

  • 服务器启动失败确认Python 3.8+版本，确认虚拟环境已激活
  • 抓取失败检查互联网连接和目标网站的可访问性
  • 浏览器控件未运行确认 Cursor 0.45.0+，启用“+Browser”按钮

详细故障排除: 教程/故障排除指南.md 参考

📚 学习资料

教程指南

官方文件

🤝 贡献/参与

这个项目是一个用于Browser Controls实践的教育项目。欢迎随时提出改进建议或报告错误！

💡 小贴士使用浏览器控件时，建议从细微的更改开始，逐步尝试更复杂的修改。因为可以实时查看更改，所以非常直观！

相关 MCP