mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-23 02:07:52 +00:00
204 lines
5.9 KiB
Markdown
204 lines
5.9 KiB
Markdown
# Qwen CLI Bridge - Chrome Extension
|
|
|
|
A Chrome extension that bridges your browser with Qwen CLI, enabling AI-powered analysis and interaction with web content.
|
|
|
|
> This package is part of the [Qwen Code](https://github.com/QwenLM/qwen-code) mono repository.
|
|
|
|
## Features
|
|
|
|
- **Page Data Extraction**: Extract structured data from any webpage including text, links, images, and metadata
|
|
- **Screenshot Capture**: Capture and analyze screenshots with AI
|
|
- **Console & Network Monitoring**: Monitor console logs and network requests
|
|
- **Selected Text Processing**: Send selected text to Qwen CLI for processing
|
|
- **AI Analysis**: Leverage Qwen's AI capabilities to analyze web content
|
|
- **MCP Server Integration**: Support for multiple MCP (Model Context Protocol) servers
|
|
|
|
## Architecture
|
|
|
|
```
|
|
┌─────────────────────┐
|
|
│ Chrome Extension │
|
|
│ - Content Script │
|
|
│ - Background Worker│
|
|
│ - Popup UI │
|
|
└──────────┬──────────┘
|
|
│
|
|
Native Messaging
|
|
│
|
|
┌──────▼──────────┐
|
|
│ Native Host │
|
|
│ (Node.js) │
|
|
└──────┬──────────┘
|
|
│
|
|
┌──────▼──────────┐
|
|
│ Qwen CLI │
|
|
│ + MCP Servers │
|
|
└─────────────────┘
|
|
```
|
|
|
|
## Installation
|
|
|
|
### Prerequisites
|
|
|
|
1. **Node.js**: Install from [nodejs.org](https://nodejs.org/)
|
|
2. **Qwen CLI**: Install the Qwen CLI tool (required for full functionality)
|
|
3. **Chrome Browser**: Version 88 or higher
|
|
|
|
### Step 1: Install the Chrome Extension
|
|
|
|
1. Open Chrome and navigate to `chrome://extensions/`
|
|
2. Enable "Developer mode" (toggle in top right)
|
|
3. Click "Load unpacked"
|
|
4. Select the `chrome-qwen-bridge/extension` folder
|
|
5. Note the Extension ID that appears (you'll need this for the next step)
|
|
|
|
### Step 2: Install the Native Messaging Host
|
|
|
|
The Native Messaging Host allows the Chrome extension to communicate with Qwen CLI.
|
|
|
|
#### macOS/Linux
|
|
|
|
```bash
|
|
cd chrome-qwen-bridge/native-host
|
|
./install.sh
|
|
```
|
|
|
|
When prompted, enter your Chrome Extension ID.
|
|
|
|
#### Windows
|
|
|
|
1. Run Command Prompt as Administrator
|
|
2. Navigate to the `native-host` directory:
|
|
```cmd
|
|
cd chrome-qwen-bridge\native-host
|
|
```
|
|
3. Run the installation script:
|
|
```cmd
|
|
install.bat
|
|
```
|
|
4. Enter your Chrome Extension ID when prompted
|
|
|
|
### Step 3: Configure Qwen CLI (Optional)
|
|
|
|
If you want to use MCP servers with the extension:
|
|
|
|
```bash
|
|
# Add chrome-devtools MCP server
|
|
qwen mcp add chrome-devtools
|
|
|
|
# Add other MCP servers as needed
|
|
qwen mcp add playwright-mcp
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Basic Usage
|
|
|
|
1. Click the Qwen CLI Bridge extension icon in Chrome
|
|
2. Click "Connect to Qwen CLI" to establish connection
|
|
3. Click "Start Qwen CLI" to launch the CLI process
|
|
4. Use the action buttons to:
|
|
- Extract and analyze page data
|
|
- Capture screenshots
|
|
- Send selected text to Qwen
|
|
- Monitor console and network logs
|
|
|
|
### Advanced Settings
|
|
|
|
In the popup's "Advanced Settings" section, you can configure:
|
|
|
|
- **MCP Servers**: Comma-separated list of MCP servers to load
|
|
- **HTTP Port**: Port for Qwen CLI HTTP server (default: 8080)
|
|
- **Auto-connect**: Automatically connect when opening the popup
|
|
|
|
### API Actions
|
|
|
|
The extension supports the following actions that can be sent to Qwen CLI:
|
|
|
|
- `analyze_page`: Analyze extracted page data
|
|
- `analyze_screenshot`: Analyze captured screenshot
|
|
- `ai_analyze`: Perform AI analysis on content
|
|
- `process_text`: Process selected text
|
|
- Custom actions based on your MCP server configurations
|
|
|
|
## Development
|
|
|
|
### Project Structure
|
|
|
|
```
|
|
chrome-qwen-bridge/
|
|
├── extension/ # Chrome extension source
|
|
│ ├── manifest.json # Extension manifest
|
|
│ ├── background/ # Service worker
|
|
│ ├── content/ # Content scripts
|
|
│ ├── popup/ # Popup UI
|
|
│ └── icons/ # Extension icons
|
|
├── native-host/ # Native messaging host
|
|
│ ├── host.js # Node.js host script
|
|
│ ├── manifest.json # Native host manifest
|
|
│ └── install scripts # Platform-specific installers
|
|
└── docs/ # Documentation
|
|
```
|
|
|
|
### Building from Source
|
|
|
|
1. Clone the repository
|
|
2. No build step required - the extension uses vanilla JavaScript
|
|
3. Load the extension as unpacked in Chrome for development
|
|
|
|
### Testing
|
|
|
|
1. Enable Chrome Developer Tools
|
|
2. Check the extension's background page console for logs
|
|
3. Native host logs are written to:
|
|
- macOS/Linux: `/tmp/qwen-bridge-host.log`
|
|
- Windows: `%TEMP%\qwen-bridge-host.log`
|
|
|
|
## Troubleshooting
|
|
|
|
### Extension not connecting to Native Host
|
|
|
|
1. Verify Node.js is installed: `node --version`
|
|
2. Check that the Native Host is properly installed
|
|
3. Ensure the Extension ID in the manifest matches your actual extension
|
|
4. Check logs for errors
|
|
|
|
### Qwen CLI not starting
|
|
|
|
1. Verify Qwen CLI is installed: `qwen --version`
|
|
2. Check that Qwen CLI can run normally from terminal
|
|
3. Review Native Host logs for error messages
|
|
|
|
### No response from Qwen CLI
|
|
|
|
1. Ensure Qwen CLI server is running
|
|
2. Check the configured HTTP port is not in use
|
|
3. Verify MCP servers are properly configured
|
|
|
|
## Security Considerations
|
|
|
|
- The extension requires broad permissions to function properly
|
|
- Native Messaging Host runs with user privileges
|
|
- All communication between components uses structured JSON messages
|
|
- No sensitive data is stored; all processing is ephemeral
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome! Please:
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Test thoroughly
|
|
5. Submit a pull request
|
|
|
|
## License
|
|
|
|
MIT License - See LICENSE file for details
|
|
|
|
## Support
|
|
|
|
For issues, questions, or feature requests:
|
|
- Open an issue on GitHub
|
|
- Check the logs for debugging information
|
|
- Ensure all prerequisites are properly installed |