9f9f2bd2c6
Some checks failed
Beta Release / beta (push) Failing after 48s
Adds a WXT-based browser extension that replaces manual JS snippet injection for AI-driven browser testing. The extension auto-connects to the Muyue server via WebSocket on every page, using the exact same protocol as the existing snippet — zero backend changes needed. - Chrome/Edge (MV3) + Firefox (MV2) from single codebase via WXT - Content script: auto-connect WS, console capture, URL tracking, RPC - Background service worker: token management, screenshots, badge - Popup + side panel with server status, sessions, URL config - CI workflows: build extension, attach .zip to releases - Makefile targets: ext, ext-chrome, ext-firefox, ext-zip - Version bumped to 0.8.0 Assisted-by: GLM-5.1 via Crush <crush@charm.land>
82 lines
3.6 KiB
Markdown
82 lines
3.6 KiB
Markdown
# Muyue Browser Extension
|
|
|
|
AI-powered browser testing & automation, connected to your [Muyue](https://github.com/muyue/muyue) desktop app.
|
|
|
|
## What it does
|
|
|
|
- **Auto-injects** the Muyue test client on every page — no more manual snippet copy-paste
|
|
- **Captures console** errors/warnings in real-time, sent to the AI Studio
|
|
- **Enables AI-driven testing**: click buttons, fill inputs, evaluate JS, take screenshots
|
|
- **Side Panel** (Chrome/Edge) and **Sidebar** (Firefox) for status monitoring
|
|
- **Native screenshots** via `chrome.tabs.captureVisibleTab` — pixel-perfect, no SVG hacks
|
|
- **URL change detection** via History API interception (survives SPA navigation)
|
|
- **Badge indicator**: shows connected session count or server status
|
|
|
|
## Install
|
|
|
|
### Chrome / Edge
|
|
|
|
1. Run `npm run build`
|
|
2. Open `chrome://extensions` → Enable **Developer mode**
|
|
3. Click **Load unpacked** → select `extension/.output/chrome-mv3/`
|
|
|
|
Or install the published extension from the Chrome Web Store.
|
|
|
|
### Firefox
|
|
|
|
1. Run `npm run build:firefox`
|
|
2. Open `about:debugging#/runtime/this-firefox`
|
|
3. Click **Load temporary Add-on** → select any file in `extension/.output/firefox-mv2/`
|
|
|
|
## Development
|
|
|
|
```bash
|
|
cd extension
|
|
npm install
|
|
npm run dev # Chrome dev mode with HMR
|
|
npm run dev -- --browser firefox # Firefox dev mode
|
|
```
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build # Chrome/Edge MV3 → .output/chrome-mv3/
|
|
npm run build:firefox # Firefox MV2 → .output/firefox-mv2/
|
|
npm run zip # Chrome .zip for Web Store
|
|
npm run zip:firefox # Firefox .zip + sources .zip
|
|
```
|
|
|
|
## Architecture
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────┐
|
|
│ Content Script (every HTTP/HTTPS page) │
|
|
│ - Console interception (log/warn/error) │
|
|
│ - RPC execution (click, type, eval, list) │
|
|
│ - URL change detection (History API + MutationObs) │
|
|
│ - WebSocket → Muyue server (same as snippet) │
|
|
└──────────────┬──────────────────────────────────────┘
|
|
│ chrome.runtime messaging
|
|
┌──────────────┴──────────────────────────────────────┐
|
|
│ Background Service Worker │
|
|
│ - Token management (GET /api/test/snippet) │
|
|
│ - Native screenshots (captureVisibleTab) │
|
|
│ - Badge updates (session count / server status) │
|
|
│ - chrome.alarms for periodic health checks │
|
|
└──────────────────────────────────────────────────────┘
|
|
┌──────────────────┐ ┌──────────────────┐
|
|
│ Popup │ │ Side Panel │
|
|
│ - Server status │ │ - Sessions list │
|
|
│ - Session count │ │ - Auto-refresh │
|
|
│ - Dashboard link │ │ - Dashboard link │
|
|
└──────────────────┘ └──────────────────┘
|
|
```
|
|
|
|
## Compatibility
|
|
|
|
| Browser | Manifest | Side Panel | Screenshots |
|
|
|---------|----------|------------|-------------|
|
|
| Chrome 89+ | MV3 | ✅ sidePanel API | ✅ captureVisibleTab |
|
|
| Edge 89+ | MV3 | ✅ sidePanel API | ✅ captureVisibleTab |
|
|
| Firefox | MV2 | ✅ sidebar API | ✅ tabs.captureVisibleTab |
|