Files

Beta Release / beta (push) Failing after 48s

Details

feat(extension): browser extension for Chrome/Edge/Firefox + CI + v0.8.0

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>

2026-04-27 16:50:04 +02:00

3.6 KiB

Raw Blame History

Muyue Browser Extension

AI-powered browser testing & automation, connected to your 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

Run npm run build
Open chrome://extensions → Enable Developer mode
Click Load unpacked → select extension/.output/chrome-mv3/

Or install the published extension from the Chrome Web Store.

Firefox

Run npm run build:firefox
Open about:debugging#/runtime/this-firefox
Click Load temporary Add-on → select any file in extension/.output/firefox-mv2/

Development

cd extension
npm install
npm run dev            # Chrome dev mode with HMR
npm run dev -- --browser firefox  # Firefox dev mode

Build

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

3.6 KiB Raw Blame History