skills.rest
mengxi-ream
mengxi-reamCOMMUNITY
Explore all skills by this author →
Website𝕏@mengxi_reamGitHub

extension-puppeteer-debugging

Drives the built read-frog extension in headed Chrome via Puppeteer to verify translation behavior end-to-end.

9.4k|668|Updated Apr 16, 2025
Search Tags:#translation#Puppeteer#Browser Automation#Debugging#E2E Testing#Chrome extension#mv3 service worker
One-click install
npx skills add https://github.com/mengxi-ream/read-frog --skill extension-puppeteer-debugging
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extension-puppeteer-debugging
Source: https://github.com/mengxi-ream/read-frog/tree/main/.agents/skills/extension-puppeteer-debugging
Command: npx skills add https://github.com/mengxi-ream/read-frog --skill extension-puppeteer-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes references (resource) components.

What problem does it solve?

Verifying a browser extension's translation behavior end-to-end is error-prone: Chrome 137+ ignores --load-extension, MV3 service worker CSP blocks eval-based config patching, background init clobbers early config writes, and macOS dead keys break hotkey simulation. This Skill encodes the working recipe for driving the built read-frog extension in real Chrome with Puppeteer so DOM assertions actually reflect extension behavior.

Core Features & Use Cases

  • Extension loading on Chrome 137+: Uses puppeteer.launch with pipe and enableExtensions plus browser.installExtension instead of deprecated --load-extension flags.
  • Config patching through the service worker: Read-merge-writes the whole config object in chrome.storage.local with inlined mutations, re-patches after init, and forces targetCode to 'cmn' to avoid the same-language skip.
  • Message-based toggling and DOM assertions: Sends the webext-core askManagerToTogglePageTranslation envelope from the service worker and asserts on CJK text, translation wrappers, and data-read-frog-translation-only anchors.
  • Use Case: Reproduce a DOM bug like issue #2011 on a React fixture page, toggle translation on and off programmatically, and assert that restore leaves no wrappers while walk labels persist by design.

Quick Start

Copy references/harness-template.js into a scratchpad, point EXT_PATH at the built .output/chrome-mv3 directory, serve a fixture over localhost, and run the script with node to watch the extension translate and restore the page in headed Chrome.

Frequently Asked Questions about extension-puppeteer-debugging

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a Chrome extension with Puppeteer in Chrome 137+?▼

Launch Puppeteer with pipe: true and enableExtensions: true, then call browser.installExtension(path) with the built extension directory. The older --load-extension and --disable-extensions-except flags are ignored by branded Chrome 137 and later.

How do I toggle page translation programmatically in a browser extension?▼

Send the webext-core message envelope from the service worker via chrome.tabs.sendMessage with type askManagerToTogglePageTranslation and data { enabled }. Do not synthesize Alt+E, because on macOS Option+E is a dead key and the hotkey listener never fires.

Why does chrome.storage config patching fail in an MV3 service worker?▼

The MV3 service worker CSP blocks eval, so building mutations with new Function throws EvalError; inline mutations in the evaluated function instead. Also re-patch after about four seconds because background init and migration clobber early writes, and write the whole config object or schema validation silently falls back to defaults.

Why does the extension translate nothing on English test pages?▼

Onboarding overwrites language.targetCode with the browser UI language, so the same-language skip translates nothing on English fixtures. Force config.language.targetCode to 'cmn' in chrome.storage.local before navigating.

How do I assert a translated page restored correctly in the DOM?▼

After toggling translation off, assert zero .read-frog-translated-content-wrapper elements and zero [data-read-frog-translation-only] anchors. Compare innerHTML modulo the data-read-frog-walked and related walk labels, which persist by design in every mode.

When should I use Playwright instead of Puppeteer for extension testing?▼

Use the extension-real-browser-testing skill with Playwright and Edge when you need popup or options-page evaluation and screenshot evidence. For leak, freeze, or CPU symptoms rather than wrong DOM, use the extension-perf-forensics skill with CDP metrics and tracing.

Related Skills

Explore More Software Engineering Skills→
Within-7Within-7

chrome-extension-dev

Automate MV3 Chrome extension development with manifest.json, service workers, and content scripts.

Official
Intermediate
effiraideffiraid

qa-only

Run report-only QA tests on web apps and generate a structured health report.

Community
Advanced
laozhong86laozhong86
1

gxpm-browser

Automate headless browser QA evidence capture with Playwright commands.

Community
Intermediate
AGIBuildAGIBuild
10

dotnet-profiling

Diagnose .NET performance issues using dotnet-counters, dotnet-trace, and dotnet-dump.

Community
Advanced