feat(extension): browser extension for Chrome/Edge/Firefox + CI + v0.8.0
Some checks failed
Beta Release / beta (push) Failing after 48s
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>
This commit is contained in:
81
extension/README.md
Normal file
81
extension/README.md
Normal file
@@ -0,0 +1,81 @@
|
||||
# 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 |
|
||||
Reference in New Issue
Block a user