ext (Broxy Dev)

Broxy扩展

中文文档

将任何网页转换为API和MCP（模型上下文协议）服务。与Rollup捆绑在一起。

特性

• 将任何网页转换为REST API端点
• 为AI助手创建MCP工具
• 连接Cloudflare Worker的WebSocket桥
• 实时请求日志记录
• Monaco处理程序代码编辑编辑器
• 数据导入/导出

安装

浏览器扩展（推荐）

从Edge附加组件安装： 布罗克西

也兼容Chrome和其他基于Chromium的浏览器。

用户脚本（Tampermonkey）

从源代码构建并手动安装：

npm install
npm run build

然后复制 tampermonkey-loader.js 将内容转换为新的Tampermonkey脚本。

目录结构

broxy-ext/
├── shared/                 # Shared core code (used by both builds)
│   ├── core/               # router.js, bridge-client.js, request-handler.js
│   ├── bridge/             # float-button.js, bridge-host.js
│   ├── endpoints/          # routes.js, mcp-tools.js, index.js
│   ├── utils/              # helpers.js, logger.js, config-manager.js, swagger.js
│   ├── config.js           # Configuration constants
│   └── main.js             # Main entry
├── userscript/             # Tampermonkey userscript build
│   ├── scripts/            # generate-loader.js, tampermonkey-template.js
│   ├── data.json           # Default config data
│   └── rollup.config.js    # Rollup configuration
├── extension/              # Chrome Extension build
│   ├── entrypoints/        # Content script (WXT format)
│   ├── public/icon/        # Extension icons
│   └── wxt.config.ts       # WXT configuration
├── dist/                   # Build intermediate files
│   └── broxy.js            # Bundled core code
├── .output/                # Extension build output
│   └── chrome-mv3/         # Chrome Extension ready to load
├── tampermonkey-loader.js  # Userscript output
└── package.json

快速开始

对于用户

从以下位置安装 Edge附加组件 并立即开始使用。

面向开发者

# Install dependencies
npm install

# Build all (userscript + extension)
npm run build

# Build userscript only
npm run build:us

# Build Chrome Extension only
npm run build:ext

# Development mode (Extension with HMR)
npm run dev

构建输出

默认数据（可选）

创建 userscript/data.json 对于初始配置：

{
  "version": "1.0",
  "data": {
    "routes": [
      {
        "id": "route-1",
        "name": "hello",
        "pattern": "/hello",
        "method": "get",
        "description": "Hello API",
        "handler": "async () => { return { message: 'Hello!' }; }",
        "enabled": true
      }
    ],
    "tools": [
      {
        "id": "tool-1",
        "name": "echo",
        "pattern": "/mcp/echo",
        "description": "Echo tool",
        "inputSchema": {
          "type": "object",
          "properties": {
            "text": { "type": "string", "description": "Text to echo" }
          },
          "required": []
        },
        "handler": "async ({ text }) => { return { echo: text }; }",
        "enabled": true
      }
    ],
    "mcpConfig": {
      "name": "My MCP Server",
      "version": "1.0.0"
    }
  }
}

UI面板

该面板包含5个选项卡：

1. 信息 -连接状态、Web ID、API/MCP/Swagger URL
2. 日志 -请求历史记录
3. 路线 -添加/编辑/删除HTTP路由
4. 工具 -添加/编辑/删除MCP工具
5. 设置 -MCP配置，数据导入/导出

路线管理

• 支持：固定路径、正则表达式、通配符匹配
• HTTP方法：GET/POST/PUT/DELETE/ALL
• Monaco处理程序代码编辑器
• 启用/禁用切换

工具管理

• 工具名称：仅字母、数字、下划线
• 自动生成的图案： /mcp/{toolName}
• 参数配置：名称、类型、描述、必填
• Monaco处理程序代码编辑器

数据导入/导出

• 出口：下载包含所有配置的JSON文件
• 文件导入：选择要导入的JSON文件
• 文本导入：粘贴JSON数据
• 合并策略：覆盖相同ID，追加新数据

初始数据

• data.json 在构建时注入
• 当localStorage为空时自动使用
• 当localStorage有数据时忽略

发展

npm run dev

注意文件更改和自动重建。

URL参数

对于开发和测试，使用URL参数来控制行为：

例子： https://example.com?broxy.dev=1&broxy.open=1&broxy.connect=1

技术栈

建筑

┌─────────────────┐      WebSocket      ┌──────────────────┐
│   Browser       │◄──────────────────►│  Cloudflare      │
│   (Broxy)       │                     │  Worker          │
│                 │                     │                  │
│  ┌───────────┐  │                     │  - Proxy API     │
│  │ Router    │  │                     │  - MCP Protocol  │
│  │ Handlers  │  │                     │  - Auth          │
│  └───────────┘  │                     └──────────────────┘
└─────────────────┘                             │
                                                ▼
                                        ┌──────────────────┐
                                        │  External        │
                                        │  Applications    │
                                        └──────────────────┘

许可证

麻省理工学院