Comet AI Devtools

Comet AI DevTools Bridge

一个Chrome扩展程序，为Comet浏览器提供DevTools监控和调试功能，并为AI助手集成MCP协议。

特性

• 跨选项卡同步：将多个选项卡链接在一起，以监控复杂多页工作流中的数据
• 控制台监控：捕获和过滤控制台日志（错误、警告、信息、调试）
• 网络监控：使用详细信息跟踪所有网络请求
• 元件检查：检查DOM元素及其属性
• 最小化模式：折叠成一个微小的浮动指示器，用于非侵入式监测
• 背景选项卡操作：即使选项卡未处于焦点，也会继续监控
• MCP工具API：AI助手与浏览器交互的结构化工具界面
• 持久性：页面刷新后数据仍然有效（硬重置时清除）
• 出口：捕获数据的JSON/CSV导出

安装

视窗

1. 从下载最新版本 发布 页
2. 解压缩zip文件
3. 打开Comet浏览器并导航到 chrome://extensions/
4. 启用 开发者模式 （在右上角切换）
5. 点击 装载时未包装
6. 选择提取的 dist 文件夹
7. 导航到任何网站
8. 按 Ctrl+Shift+D 打开覆盖层

macOS

1. 从下载最新版本 发布 页
2. 解压缩zip文件
3. 打开Comet浏览器并导航到 chrome://extensions/
4. 启用 开发者模式 （在右上角切换）
5. 点击 装载时未包装
6. 选择提取的 dist 文件夹
7. 导航到任何网站
8. 按 Cmd+Shift+D 打开覆盖层

用法

基本用法

1. 打开覆盖层：新闻 Ctrl+Shift+D （Windows）或 Cmd+Shift+D （Mac）
2. 开始监控：单击“开始”按钮
3. 查看捕获的数据：在选项卡之间切换（控制台、网络、元素、存储）
4. 停止监控：单击“停止”按钮
5. 导出数据：单击JSON/CSV输出的“导出”按钮

最小化模式

点击 − 叠加标题中的按钮可折叠为一个微小的浮动指示器，显示：

• 录制状态（点指示器）
• 同步状态
• 日志计数
• 错误计数

单击指示器以展开回完整视图。

跨选项卡同步

1. 点击 🔗 同步选项卡 按钮
2. 输入组名（或留空以自动生成）
3. 在其他选项卡上打开相同的覆盖层
4. 加入同一同步组
5. 所有控制台日志和网络请求现在都在选项卡之间实时同步
6. 每个条目显示它来自哪个选项卡/URL

应用程序编程接口

该扩展公开了一个全局 CometDevTools 可编程使用的对象：

// Show/hide overlay
CometDevTools.show()              // Show overlay
CometDevTools.show(true)          // Show and enable sync
CometDevTools.minimize()          // Collapse to indicator
CometDevTools.hide()              // Hide completely

// Start/stop monitoring
CometDevTools.startMonitoring()
CometDevTools.stopMonitoring()

// Get debugging data
CometDevTools.getConsoleLogs()                    // All logs
CometDevTools.getConsoleLogs({ type: 'error' })  // Only errors
CometDevTools.getNetworkRequests()                // All requests
CometDevTools.getNetworkRequests({ failed: true }) // Failed requests
CometDevTools.getSummary()                        // Quick status

// Inspect elements
CometDevTools.inspectElement('#header')          // By selector
CometDevTools.inspectElement('.error-msg')

// Cross-tab sync
CometDevTools.enableSync('my-session')
CometDevTools.disableSync()
CometDevTools.isSyncEnabled()
CometDevTools.getSyncGroup()

// Reset
CometDevTools.hardReset()  // Clear all data across synced tabs

MCP工具界面

对于AI助手（如Comet AI），该扩展提供了一个结构化的MCP工具接口：

// List available tools
CometDevTools.MCP.listTools()

// Call tools by name
CometDevTools.MCP.callTool('start_monitoring')
CometDevTools.MCP.callTool('get_console_logs', { type: 'error' })
CometDevTools.MCP.callTool('get_network_requests', { failed: true })
CometDevTools.MCP.callTool('inspect_element', { selector: '#header' })
CometDevTools.MCP.callTool('click_element', { selector: 'button.submit' })
CometDevTools.MCP.callTool('type_text', { selector: '#email', text: 'test@example.com' })
CometDevTools.MCP.callTool('execute_script', { script: 'document.title' })
CometDevTools.MCP.callTool('get_page_info')

16个MCP工具可用 包括：

• start_monitoring / stop_monitoring
• get_console_logs / get_network_requests / get_summary
• inspect_element / click_element / type_text
• execute_script / get_page_info
• enable_sync / disable_sync
• clear_data / hard_reset
• export_data

教Comet AI使用该工具

要使Comet AI助手能够使用此扩展，您可以：

1. 添加自定义说明：从以下位置复制内容 COMET_INSTRUCTIONS.md （包含在版本中）切换到Comet浏览器的设置→ 助手→ 客户指令

1. 让AI发现它：该扩展包括AI可以调用的内置帮助：

   CometDevTools.help()             // Quick reference
   CometDevTools.getInstructions()  // Detailed guide

1. 告诉Comet一次：在对话中，告诉助理：

> “我安装了CometDevTools扩展。您可以使用 CometDevTools.help() 学习如何使用它。”

发展

先决条件

• Node.js 16+和npm
• Comet浏览器或任何基于Chromium的浏览器

设置

# Clone the repository
git clone https://github.com/Llompi/comet-ai-devtools.git
cd comet-ai-devtools

# Install dependencies
npm install

# Build the extension
npm run build

# Development mode (watch for changes)
npm run dev

项目结构

comet-ai-devtools/
├── dist/                  # Built extension (load this in browser)
├── src/
│   ├── background/       # Background service worker
│   ├── content/          # Content scripts (overlay UI)
│   ├── devtools/         # DevTools panel (optional)
│   ├── mcp/              # MCP protocol implementation
│   ├── types/            # TypeScript type definitions
│   ├── ui/               # Popup UI
│   └── utils/            # Helper functions
├── icons/                # Extension icons
├── manifest.json         # Extension manifest (Manifest V3)
├── package.json
└── README.md

构建命令

npm run build     # Build for production
npm run dev       # Watch mode for development
npm run clean     # Clean dist folder

版本历史记录

v1.3.1（最新版本）

• 添加了带浮动指示器的最小化模式
• 增加了用于人工智能助手的MCP工具API
• 后台选项卡操作支持
• 内置帮助和说明API

v1.3

• 跨选项卡同步
• 跨页面刷新的持久性
• 硬重置功能
• Windows兼容性改进

v1.2

• 内容脚本叠加方法（AI可见）
• 修复了调试器附件问题
• 提高了可访问性

v1.1

• 重新设计的架构
• 删除了DevTools面板依赖项

v1.0

• MVP初始版本
• 控制台和网络监控
• 基本元件检查

贡献

欢迎投稿！这是一个开源项目，旨在免费供任何人使用和展示。

如何做出贡献

1. 复刻仓库
2. 创建要素分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

问题和功能请求

请打开以下问题：

• 错误报告
• 功能请求
• 问题或讨论

注：此项目在时间允许的情况下进行维护。我们不承诺亲自添加功能，但感谢社区的贡献！

许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

此项目可以免费使用、修改和分发。任何人都可以使用它并公开展示。

致谢

• 在克劳德（Anthropic）的协助下建造
• 由Perplexity为Comet浏览器设计
• 灵感来自Chrome DevTools和MCP协议

支持

支持：

• 打开一个 问题
• 检查现有 讨论
• 查看 COMET_INSTRUCTIONS.md 文件

路线图

第二阶段（计划中）

• IndexedDB检查
• 实时过滤/搜索
• 绩效预算警报
• DOM突变跟踪
• 请求主体/响应检查

第三阶段（未来）

• 本地主机上的WebSocket MCP服务器：12306
• Comet Assistant消息桥
• 自然语言命令解析
• 自动化调试流程

______________________________________________________________________

内置于❤️ 适用于使用Comet浏览器的开发人员