New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Extension Puppeteer Debugging

by mengxi-ream in mengxi-ream/read-frog

Debug the built Read Frog extension in real Chrome. An agent skill from mengxi-ream/read-frog.

GPL-3.0Auto-check: notesDevelopment

Install Extension Puppeteer Debugging

skills CLI
$ npx skills add mengxi-ream/read-frog --skill extension-puppeteer-debugging -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mengxi-ream/read-frog extension-puppeteer-debugging --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mengxi-ream/read-frog.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/extension-puppeteer-debugging .claude/skills/extension-puppeteer-debugging && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
extension-puppeteer-debugging
GitHub stars
10k
Token cost
~2k tokens
SKILL.md length
939 words
Files
2 (incl. references)
Skills in repo
9
Repo updated
First seen
Licence
GPL-3.0

At a glance

Debug the built Read Frog extension in real Chrome. An agent skill from mengxi-ream/read-frog.

  • Works in 3 steps: Prefer configuring or repairing the… → Use --allow-unrestricted-paths only for… → Never copy a build through a symlink to…
  • Tasks that involve Browser testing
  • SKILL.md covers Chrome DevTools MCP…, Chrome DevTools MCP workflow, Puppeteer workflow and Quick reference, plus 3 more sections
  • Runs JavaScript scripts from its folder; calls pnpm

What it does

Extension Puppeteer Debugging is an agent skill from mengxi-ream/read-frog. Debug the built Read Frog extension in real Chrome. Use Chrome DevTools MCP for interactive inspection and screenshots; use the Puppeteer harness for repeatable end-to-end assertions, fixture pages, and translation toggle/restore flows. For leaks, freezes, or CPU storms use extension-perf-forensics.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/harness-template.js`).

It sits in Development, covering Browser testing, Debugging and MCP servers. It works with Puppeteer, Model Context Protocol, Chrome DevTools and Chrome Extensions. The repository describes itself as: 🐸 Read Frog - Language Learning & Translate | 🐸 陪读蛙 - 语言学习与翻译. The licence is GPL-3.0.

When your agent uses it

  • Tasks that involve Browser testing
  • Tasks that involve Debugging
  • Tasks that involve MCP servers

Example prompts

  • “/extension-puppeteer-debugging”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Prefer configuring or repairing the client's workspace roots.
  2. Use --allow-unrestricted-paths only for a trusted local client and only after the user explicitly authorizes the wider filesystem access.
  3. Never copy a build through a symlink to evade the path check.

What it can do on your machine

Read from SKILL.md and the folder at commit 56f29ed. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Extension Puppeteer Debugging loads about 2k tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 83 tokens; SKILL.md has 939 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:58
    ail's exit code masks failure); missing `.env.production` in a worktree kills the build with a buried error — copy it fr

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mengxi-ream/read-frog at commit 56f29ed, republished under its GPL-3.0 licence (© mengxi-ream). 939 words, ~1,959 tokens.

Download SKILL.mdSave it as .claude/skills/extension-puppeteer-debugging/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
extension-puppeteer-debugging
description
Debug the built Read Frog extension in real Chrome. Use Chrome DevTools MCP for interactive inspection and screenshots; use the Puppeteer harness for repeatable end-to-end assertions, fixture pages, and translation toggle/restore flows. For leaks, freezes, or CPU storms use extension-perf-forensics.
metadata.author
read-frog
metadata.version
1.1.0

Extension Browser Debugging

Debug the built extension in real Chrome. Choose the lightest workflow that produces trustworthy evidence:

  • Use Chrome DevTools MCP for interactive UI checks, extension installation/reload, extension pages and service workers, DOM/computed styles, console/network inspection, and screenshots.
  • Use the Puppeteer harness when the result must be repeatable, needs a controlled fixture or fresh profile, or requires programmatic toggle/restore assertions.

Always build the artifact under test and confirm .output/chrome-mv3/manifest.json exists before loading it. Do not treat dev-server behavior as proof of the production build.

Chrome DevTools MCP prerequisites

The extension tools are disabled by default. The MCP server must start with:

text
--categoryExtensions=true

Restart the MCP client after changing its server configuration. Before building, confirm that install_extension, reload_extension, list_extensions, and trigger_extension_action are available. If they are missing, fix the MCP configuration rather than falling back silently to webpage-only tools.

install_extension accepts an absolute path to an unpacked extension directory. The server restricts filesystem access to MCP workspace roots and the OS temp directory. If it rejects a valid build path:

  1. Prefer configuring or repairing the client's workspace roots.
  2. Use --allow-unrestricted-paths only for a trusted local client and only after the user explicitly authorizes the wider filesystem access.
  3. Never copy a build through a symlink to evade the path check.

Chrome DevTools MCP launches its own Chrome profile. Concurrent MCP clients can contend for the default profile; use distinct --userDataDir values or --isolated=true when Codex, Claude, or multiple tasks may run the server at the same time. A fresh or isolated profile also avoids stale extension state, but state-dependent bugs may require a deliberate persistent test profile.

Chrome DevTools MCP workflow

  1. Build the extension, verify its manifest, then install the absolute .output/chrome-mv3 path with install_extension.
  2. Record the returned extension ID. Confirm the extension page and MV3 service worker appear in list_pages.
  3. Open the actual popup/options page or a target content page.
  4. Reproduce the interaction through the real UI or extension message path.
  5. Inspect live DOM/runtime state and computed styles. For tooltips and popovers, node existence alone is insufficient: check open/closed attributes, opacity, visibility, and pointer events.
  6. Capture a raw screenshot only after the runtime evidence proves the intended state.
  7. Close temporary pages/profiles and local fixture servers created for the check.

For screenshots, keep raw before/after captures as the source of truth. Label crops and stitched comparisons as supplemental artifacts. Never present a composite as a raw browser screenshot.

Use a fresh profile or the Puppeteer harness when persistent browser state could affect the result. Record the browser/version, build path, target URL, interaction, runtime evidence, and screenshot path for consequential regressions.

Puppeteer workflow

Drive headed Chrome from a Node script to install the extension, force known config, toggle translation via its message bus, and assert live DOM. The details below encode failures observed during issue #1846 and #2011 verification.

Show full SKILL.md (463 more words)Show less

Quick reference

StepDo thisNOT this (fails silently)
Buildpnpm build then test -f .output/chrome-mv3/manifest.jsonTrusting pnpm build | tail exit code (tail's exit code masks failure); missing .env.production in a worktree kills the build with a buried error — copy it from the main checkout
Loadpuppeteer.launch({ pipe: true, enableExtensions: true }) + browser.installExtension(path) (Puppeteer ≥22.11)--load-extension / --disable-extensions-except — ignored by branded Chrome 137+
ConfigRead-merge-write the WHOLE config object in chrome.storage.local from the service-worker target, with mutations inlined in the evaluated function (pass only plain data as evaluate args); re-patch after ~4s and verify (background init/migration clobbers early writes)Building the mutation from a code string via new Function/eval inside the SW — its CSP (script-src 'self' 'wasm-unsafe-eval' ...) blocks eval and throws EvalError; patching once and navigating immediately; writing a partial config object — it fails configSchema.safeParse and getLocalConfig() silently falls back to DEFAULT_CONFIG (bilingual mode)
Target languageAlways force config.language.targetCode = 'cmn'Trusting the default — onboarding overwrites targetCode with the browser UI language, and the same-language skip then translates NOTHING on English fixtures
ToggleSend the webext-core envelope to the content script from the SW: chrome.tabs.sendMessage(tabId, { id, type: 'askManagerToTogglePageTranslation', data: { enabled }, timestamp })Synthesizing Alt+E — on macOS Option+E is a dead key (event.key !== 'e'), the hotkey listener never fires
Assert translatedCJK regex /[一-鿿]/ on textContent; count .read-frog-translated-content-wrapper (fallback-B) and [data-read-frog-translation-only] (in-place swap)Waiting a fixed sleep
Assert restoredCompare innerHTML modulo walk labels (data-read-frog-walked/-paragraph/-block-node/-inline-node persist by design in every mode)Byte-identical innerHTML comparison

Workflow

  1. Build and verify the artifact exists (see table).
  2. Copy references/harness-template.js into the session scratchpad, point EXT_PATH at .output/chrome-mv3, adjust the fixture/assertions.
  3. Serve fixtures over http://localhost (content scripts don't run on file://). For framework-safety checks, use a React fixture with a focus-triggered re-render (simulates React Query refetchOnWindowFocus — the trigger behind logged-in-only bugs like #1846) and a counter button to prove listeners survived.
  4. Run headed; capture page.on('console') + pageerror for Minified React error|NotFoundError — a clean screenshot can hide a broken fiber tree.
  5. Provider: microsoft-translate-default needs no API key but real network. Slow the queues (requestQueueConfig.rate/capacity = 1) when you need to observe spinners.

For loading screenshots, first record .read-frog-spinner count and relevant computed/inline styles, capture the raw frame, then continue waiting for translated Chinese text to prove that the run completed. A visible screenshot without matching DOM/runtime evidence is insufficient.

Interpreting extension DOM state

  • Bilingual mode: original text stays; wrapper .read-frog-translated-content-wrapper inserted next to it.
  • translationOnly, in-place swap (preferred since #1846): no wrapper remains; the run's parent carries data-read-frog-translation-only and the site's own text nodes hold Chinese.
  • translationOnly, fallback: wrapper holds the translation, originals detached but retained for restore.
  • After "show original": zero wrappers AND zero [data-read-frog-translation-only] anchors; walk labels remain — that's normal, not a leak.
  • extension-perf-forensics — when the symptom is leak/freeze/CPU, not wrong DOM: attribution ladder, CDP metrics, tracing.

© mengxi-ream, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in .agents/skills/extension-puppeteer-debugging of mengxi-ream/read-frog.

  • SKILL.md
  • references/harness-template.js

Open the folder on GitHubat commit 56f29ed

Compare with similar skills

Extension Puppeteer Debugging next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Extension Puppeteer Debugging compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Extension Puppeteer Debugging this skillmengxi-ream/read-frog10k—~2kAutomated safety check: NotesGPL-3.0
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
React Devtools MCPsanity-io/ui176—~2kAutomated safety check: PassMIT
Project Docs Maintainerswimmwatch/cloakbrowser-mcp164—~569Automated safety check: PassMIT
Browser Testing With Devtoolsshashankswe2020-ux/whoop-mcp165—~3kAutomated safety check: WarnMIT
Team Frontend Debugcatlog22/Claude-Code-Workflow2.1k—~2.8kAutomated safety check: NotesMIT

Similar skills

  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

  • React Devtools MCP

    sanity-io/ui

    Official

    Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp).

    176 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Project Docs Maintainer

    swimmwatch/cloakbrowser-mcp

    Maintain, organize, consolidate, or audit the cloakbrowser-mcp documentation set only when the user explicitly requests project documentation maintenance or an authorized public change requires it.

    164 GitHub stars~569 tokensUpdated today
    DevelopmentAuto-check passed

  • Browser Testing With Devtools

    shashankswe2020-ux/whoop-mcp

    Tests in real browsers. An agent skill from shashankswe2020-ux/whoop-mcp.

    165 GitHub stars~3k tokensUpdated today
    Testing & QAAuto-check: warnings

  • Team Frontend Debug

    catlog22/Claude-Code-Workflow

    Frontend debugging team using Chrome DevTools MCP. An agent skill from catlog22/Claude-Code-Workflow.

    2.1k GitHub stars~2.8k tokensUpdated 3 mo ago
    Testing & QAAuto-check: notes

  • Lightpanda

    lightpanda-io/agent-skill

    Lightpanda browser, drop-in replacement for Chrome-based browsing in any AI agent - faster and lighter for tasks without graphical rendering like data retrieval.

    101 GitHub stars~6k tokensUpdated 3 days ago
    Agent WorkflowsAuto-check passed

More from mengxi-ream/read-frog

All 9 skills in this repo

  • Adversarial Review

    mengxi-ream/read-frog

    Adversarial code review using cross-model approach. An agent skill from mengxi-ream/read-frog.

    10k GitHub starsUsed in 1 repo~905 tokens
    Auto-check passed

  • Record Extension Demo

    mengxi-ream/read-frog

    Record polished, evidence-backed demos of the Read Frog extension as MP4 (and optional GIF) by driving real Chrome with the built extension, following captioned scene scripts, asserting extension…

    10k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Webext Core

    mengxi-ream/read-frog

    Utilities for browser extensions - proxy services for cross-context RPC, type-safe messaging, URL match patterns, fake browser for testing, job scheduling, and shadow DOM isolation.

    10k GitHub stars~633 tokensUpdated today
    Auto-check passed

  • Wxt

    mengxi-ream/read-frog

    Build browser extensions with WXT - a next-gen framework with file-based entrypoints, Vite builds, auto-imports, typed storage with migrations, content script UIs, and multi-browser MV2/MV3 support.

    10k GitHub stars~500 tokensUpdated today
    Auto-check passed

  • Create PR

    mengxi-ream/read-frog

    Create a pull request, optionally for the issue provided as argument

    10k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Migration Scripts

    mengxi-ream/read-frog

    A skill your agent uses when writing or reviewing database/config migration scripts or migration registries.

    10k GitHub stars~589 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Extension Puppeteer Debugging

What does Extension Puppeteer Debugging do?

Debug the built Read Frog extension in real Chrome. An agent skill from mengxi-ream/read-frog. Extension Puppeteer Debugging is an agent skill from mengxi-ream/read-frog. Debug the built Read Frog extension in real Chrome.

When should I use Extension Puppeteer Debugging?

Extension Puppeteer Debugging fits situations like: tasks that involve Browser testing; tasks that involve Debugging; tasks that involve MCP servers.

How do I install Extension Puppeteer Debugging in Claude Code?

Run `npx skills add mengxi-ream/read-frog --skill extension-puppeteer-debugging -a claude-code`. Or copy the skill folder (.agents/skills/extension-puppeteer-debugging in mengxi-ream/read-frog) into .claude/skills/extension-puppeteer-debugging in your project. Claude Code loads it when a task matches its description.

How do I install Extension Puppeteer Debugging in Codex?

Run `npx skills add mengxi-ream/read-frog --skill extension-puppeteer-debugging -a codex`. Or copy the skill folder (.agents/skills/extension-puppeteer-debugging in mengxi-ream/read-frog) into .agents/skills/extension-puppeteer-debugging in your project. Codex loads it when a task matches its description.

Can I use Extension Puppeteer Debugging in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mengxi-ream/read-frog --skill extension-puppeteer-debugging -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extension-puppeteer-debugging, .gemini/skills/extension-puppeteer-debugging, .github/skills/extension-puppeteer-debugging and .opencode/skills/extension-puppeteer-debugging in your project.

What does Extension Puppeteer Debugging need to run?

Going by SKILL.md and its folder, Extension Puppeteer Debugging needs JavaScript for the scripts in its folder and the command-line tools its instructions call (pnpm). Our summary lists: Node.js.

Does Extension Puppeteer Debugging access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Extension Puppeteer Debugging safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Extension Puppeteer Debugging use?

Extension Puppeteer Debugging is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Extension Puppeteer Debugging use?

About 2k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.6k tokens, read only when the agent opens those files.

What are the alternatives to Extension Puppeteer Debugging?

Skills that share tags, products or a category with Extension Puppeteer Debugging: Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars), React Devtools MCP (sanity-io/ui, 176 stars), Project Docs Maintainer (swimmwatch/cloakbrowser-mcp, 164 stars) and Browser Testing With Devtools (shashankswe2020-ux/whoop-mcp, 165 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Extension Puppeteer Debugging?

mengxi-ream (a GitHub user) maintains it in mengxi-ream/read-frog, which has 10,013 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 9, 2026.

Source: mengxi-ream/read-frog on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.