# 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 |