Broxy Extension

中文文档

Convert any webpage into API and MCP (Model Context Protocol) services. Bundled with Rollup.

Features

• Transform any webpage into REST API endpoints
• Create MCP tools for AI assistants
• WebSocket bridge to Cloudflare Worker
• Real-time request logging
• Monaco Editor for handler code editing
• Data import/export

Installation

Browser Extension (Recommended)

Install from Edge Add-ons: Broxy

Also compatible with Chrome and other Chromium-based browsers.

Userscript (Tampermonkey)

Build from source and manually install:

npm install
npm run build

Then copy tampermonkey-loader.js content to a new Tampermonkey script.

Directory Structure

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

Quick Start

For Users

Install from Edge Add-ons and start using immediately.

For Developers

# 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

Build Outputs

Product	Output Path	Usage
Userscript	tampermonkey-loader.js	Install to Tampermonkey
Chrome Extension	.output/chrome-mv3/	Chrome load unpacked

Default Data (Optional)

Create userscript/data.json for initial configuration:

{
"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 Panel

The panel contains 5 tabs:

1. Info - Connection status, Web ID, API/MCP/Swagger URLs
2. Logs - Request history
3. Routes - Add/Edit/Delete HTTP routes
4. Tools - Add/Edit/Delete MCP tools
5. Settings - MCP config, data import/export

Route Management

• Support: fixed path, regex, wildcard matching
• HTTP methods: GET/POST/PUT/DELETE/ALL
• Monaco Editor for handler code
• Enable/Disable toggle

Tool Management

• Tool names: letters, numbers, underscores only
• Auto-generated pattern: /mcp/{toolName}
• Parameter config: name, type, description, required
• Monaco Editor for handler code

Data Import/Export

• Export: Download JSON file with all configurations
• File Import: Select JSON file to import
• Text Import: Paste JSON data
• Merge strategy: same ID overwrites, new data appends

Initial Data

• data.json injected at build time
• Auto-used when localStorage is empty
• Ignored when localStorage has data

Development

npm run dev

Watch for file changes and auto-rebuild.

URL Parameters

For development and testing, use URL parameters to control behavior:

Parameter	Description
broxy.dev=1	Use http://localhost:3000 as iframe UI URL
broxy.open=1	Auto-open iframe panel after page load
broxy.connect=1	Auto-connect to WebSocket (overrides saved state)

Example: https://example.com?broxy.dev=1&broxy.open=1&broxy.connect=1

Tech Stack

Component	Technology
Bundler	Rollup
UI Framework	layui 2.13.3
Code Editor	Monaco Editor 0.45.0
Protocol	WebSocket + JSON-RPC

Architecture

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

License

MIT