Agent skill
extension-debug
Debug browser extension behavior. Use when asked to debug/reproduce extension issues in Chrome/Firefox, or mentions content script/popup/service worker/manifest/permissions.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/extension-debug
Metadata
Additional technical details for this skill
- short description
- Debug Chrome/Firefox extension issues
SKILL.md
Goal
- Reproduce and debug issues in the extension with clear logs and minimal guesswork.
Inputs (ask only if missing)
- Where the issue occurs: content script / popup / background (service worker) / options page.
- Browser: Chrome, Firefox, or both.
- Repro steps (URL, actions) if not provided.
Steps
- Build/run in dev mode
- Chrome:
yarn dev - Firefox:
yarn dev:firefox
- Chrome:
- Load/refresh the extension in the browser
- Use the built output under
.output/(e.g.,.output/chrome-mv3) as the load-unpacked target - After rebuild: reload extension + reload the target page
- Use the built output under
- Collect the right console logs
- Popup: open popup, inspect its console
- Content: open target page devtools console (content script logs)
- Background/SW: open extension detail page and inspect the service worker console
- Narrow down the entrypoint and file
- Use
rgfor the feature/keyword and follow imports intoshared/
- Use
- Validate suspected fix
yarn lintyarn build(and/oryarn build:firefox)- If behavior-level:
yarn e2e
Guardrails
- Permissions/host_permissions changes are sensitive: ask before changing.
- Avoid adding noisy logs; keep debug logs behind a guard if needed.
Output format
- Repro steps (exact)
- Observed logs/errors (short excerpt)
- Suspected root cause (with file pointers)
- Proposed fix + verification commands
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?