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

Live Extension UI Automation

by qixing-jk in qixing-jk/all-api-hub

Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

AGPL-3.0Auto-check passedDevelopment

Install Live Extension UI Automation

skills CLI
$ npx skills add qixing-jk/all-api-hub --skill live-extension-ui-automation -a claude-code

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

GitHub CLI
$ gh skill install qixing-jk/all-api-hub live-extension-ui-automation --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/qixing-jk/all-api-hub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/live-extension-ui-automation .claude/skills/live-extension-ui-automation && 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
live-extension-ui-automation
GitHub stars
4.9k
Token cost
~2.7k tokens
SKILL.md length
1,157 words
Files
2 (incl. references)
Skills in repo
4
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

  • Works in 5 steps: Build Current Worktree Output → Launch or Reuse the CDP Browser → Verify Session Readiness Before… → …
  • Tasks that involve Browser extensions
  • SKILL.md covers Core principle, Shared vs isolated dev profiles, Available Tooling & Commands and Workflow, plus 4 more sections
  • Calls pnpm

What it does

Live Extension UI Automation is an agent skill from qixing-jk/all-api-hub. Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

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

It sits in Development, covering Browser extensions and Git worktrees. It works with Chrome Extensions and OpenAI. The repository describes itself as: All-in-one New-API/Sub2API account hub: balance/usage dashboard, auto check-in, one-click keys, price comparison, health checks, plus advanced channel management | 一站式…. The licence is AGPL-3.0.

When your agent uses it

  • Tasks that involve Browser extensions
  • Tasks that involve Git worktrees

Example prompts

  • “/live-extension-ui-automation”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Build Current Worktree Output
  2. Launch or Reuse the CDP Browser
  3. Verify Session Readiness Before Authenticated Flows
  4. Automate and Verify the Extension UI
  5. Authoring Custom Automated E2E/CDP Tests

What it can do on your machine

Read from SKILL.md and the folder at commit 220dceb. 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

    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

Live Extension UI Automation loads about 2.7k tokens when it runs, and up to ~4.3k if it reads all its reference files. Until then it costs about 42 tokens; SKILL.md has 1,157 words of instructions outside code blocks.

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

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 passed

The automated check found no risky patterns in SKILL.md.

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 qixing-jk/all-api-hub at commit 220dceb, republished under its AGPL-3.0 licence (© qixing-jk). 1,157 words, ~2,727 tokens.

Download SKILL.mdSave it as .claude/skills/live-extension-ui-automation/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
live-extension-ui-automation
description
Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

Live Extension UI Automation

Core principle

Automate and test the development browser extension UI against real accounts and logged-in states without closing or disturbing the user's daily primary browser.

Chromium blocks --remote-debugging-port on the system default user data directory. To preserve daily browser workflows while enabling CDP automation, tests run in a dedicated dev profile (AllApiHub/dev-browser) that shares accounts and sessions across all Git worktrees.

Shared vs isolated dev profiles

By default every worktree mounts the single shared profile (AllApiHub/dev-browser) on CDP port 9222. This reuses one account login across worktrees but couples their browser instances: a --restart mounts a different worktree's build and closes another session's tabs, and discovery by title can target the wrong extension.

When concurrent worktrees must not interfere (multi-agent runs), mount a per-worktree profile with --isolate. The profile resolves to AllApiHub/dev-browser-<worktree>-<path-hash>, using the canonical checkout path to distinguish same-named worktrees. Its default CDP port is a stable offset from 9222 based on the resolved profile path. Hash collisions remain possible; isolated clients and the launcher verify the listening browser uses the expected profile before reuse, reload or restart. On a collision, choose a free explicit CDP_PORT. Assess existing sessions before seeding an isolated profile:

GoalCommand
Isolated browser (own profile + port)pnpm browser:cdp:isolate
Offline sync when both browsers are already closedpnpm browser:sync:isolate -- --cookies
Env-var equivalentsAAH_DEV_PROFILE_PER_WORKTREE=1 (or --isolate); explicit AAH_DEV_PROFILE_DIR / CDP_PORT still win.

Live suites (e2e:cdp:*) compute their default CDP URL from the same resolver, so launching and driving under --isolate need no extra flags. The trade-off: each isolated profile needs its own first login or sync, and each buys an extra resident browser process. The shared-profile default is unchanged.

Available Tooling & Commands

All commands are cross-platform (Windows, macOS, Linux) and runnable directly via pnpm:

CommandScriptDescription
pnpm browser:syncscripts/sync-extension-profile.mjsDiscovers extension storage sources (--list); copies databases only with browsers closed. Website sessions require --cookies.
pnpm browser:cdpscripts/launch-cdp-browser.mjsLaunches (or connects to) the dedicated debug browser on port 9222 with the current worktree extension mounted.
pnpm e2e:cdpscripts/e2e-cdp-control.mjsConnects via CDP, detects the current worktree extension, opens its UI, and automates interactions.

Workflow

1. Build Current Worktree Output

Always ensure the extension is built for the current branch:

bash
pnpm build
2. Launch or Reuse the CDP Browser
bash
pnpm browser:cdp
  • Prioritize Dev Mode (Auto-Spawn): By default, the launcher prioritizes the HMR dev mode (.output/chrome-mv3-dev). If WXT dev server is not running, it automatically and silently launches it in the background, waits for the initial pre-rendering to finish, and mounts the hot dev extension.
  • Actively Suppress Duplicate Browser Windows: WXT defaults to opening an unconfigured Chrome instance upon launch. To avoid desktop clutter and preserve the shared profile with real accounts, wxt.config.ts disables the built-in runner (webExt.disabled = true unless WXT_OPEN_BROWSER=1), and the launcher passes environment guards. Dev server logs stream silently to .scratch/wxt-dev.log.
  • Dynamic Port & Multi-Worktree: When multiple worktrees run dev servers concurrently, WXT assigns dynamic ports (3000, 3001, 3002...). The launcher inspects .output/chrome-mv3-dev/options.html and probes the Vite client to bind cleanly to the current worktree's assigned port over IPv4 (127.0.0.1).
  • Live Extension Hot-Reload: If the debug browser on port 9222 is already open, running pnpm browser:cdp instantly triggers chrome.runtime.reload() over CDP and refreshes open extension tabs without restarting the browser.
  • Convenience Flags:
    • pnpm browser:cdp -- --reload: Instantly trigger chrome.runtime.reload() in the running browser.
    • pnpm browser:cdp -- --stop-dev: Terminate the background WXT dev server process.
    • pnpm browser:cdp -- --prod: Force standalone production build mode (.output/chrome-mv3).
    • pnpm browser:cdp -- --build: Force a full production rebuild before launching.
    • pnpm browser:cdp -- --restart: Terminate the running debug browser and start a fresh instance.
3. Verify Session Readiness Before Authenticated Flows

Checking readiness is required; synchronizing state is conditional. Use the site's authenticated identity endpoint in the selected dev profile, not a saved extension account, tab title or Cookie count. Reuse a valid target session immediately, checking the expected account ID when known.

If the target is unauthenticated, inspect task-authorized source sessions and select an applicable sync method before asking the user to log in. A target 401 establishes only that the target lacks authentication. A closed-browser requirement applies to database copying, not to all session reuse. Network failures, challenges and identity mismatches require diagnosis rather than a login request.

Read session assessment and reuse for the shared preflight helper, origin-scoped live transfer and offline sync commands. After transfer, re-read the target identity and compare it with the source. Request manual login only after authorized sources and applicable transfer methods have been checked and found unusable; report missing evidence as uninspected, not unavailable. Do not replace an authenticated but mismatched account silently.

Show full SKILL.md (403 more words)Show less
4. Automate and Verify the Extension UI

Run the default smoke runner:

bash
pnpm e2e:cdp
5. Authoring Custom Automated E2E/CDP Tests

When implementing a new feature or reproducing UI bugs, author or extend a CDP automation script following this pattern:

javascript
import path from "node:path"
import { chromium } from "@playwright/test"

const browser = await chromium.connectOverCDP("http://127.0.0.1:9222")
const context = browser.contexts()[0]

// 1. Locate the extension (CDP Target inspection works even if the service worker is dormant)
const session = await browser.newBrowserCDPSession()
const { targetInfos } = await session.send("Target.getTargets")
const extTarget = targetInfos.find((t) => t.url?.startsWith("chrome-extension://"))
const extensionId = new URL(extTarget.url).hostname
await session.detach()

// 2. Open any extension entrypoint
const page = await context.newPage()
await page.goto(`chrome-extension://${extensionId}/options.html#account`)
await page.waitForLoadState("domcontentloaded")

// 3. Interact with UI primitives via testId or role
const root = page.locator('[data-testid="options-app"]')
await root.waitFor({ state: "attached", timeout: 10000 })

// 4. Inspect or mutate extension storage directly via service worker
// NOTE: Plasmo Storage serializes envelopes as JSON strings (e.g. { accounts: [...] })
const sw = context.serviceWorkers().find((w) => w.url().includes(extensionId))
const accounts = await sw.evaluate(() => {
  return new Promise((resolve) => {
    chrome.storage.local.get("site_accounts", (res) => {
      const data = typeof res.site_accounts === "string" ? JSON.parse(res.site_accounts) : res.site_accounts
      resolve(data?.accounts || [])
    })
  })
})

Account onboarding validation

For account integrations, use the authentication and guidance contract in account sites. Drive a fresh add-account form with its normal authentication default through automatic detection, any credential guidance, verification, save, and refresh. Manually preselecting another method or pre-seeding a saved account only validates that alternate path; it does not establish that ordinary onboarding works.

When credentials require user interaction, assert that detection preserves the discovered account context, offers the official acquisition page and a clear return/paste action, and reaches an actionable state. Exercise the persistent UI handoff when starting from a popup. Record the authentication mode and starting state in the reusable runner's evidence. If the credential is unavailable, validate the guide independently and report save/refresh as unverified; do not count a successful Cookie fallback as proof of the preferred token path.

Native resource editor readiness

For native resource editors, a visible modal may still contain only the opening/loading shell while fresh provider data is fetched. Wait for an always-present field from the accepted editor before reading values or asserting secret retention, with a bounded timeout suitable for live provider requests. Modal visibility alone and the default short DOM assertion timeout do not establish that the editor has loaded; avoid replacing this check with a fixed sleep. Once the editor is ready, a missing conditional control may indicate an incomplete detail projection or incorrect visibility state; compare the saved configuration and controlling value before increasing timeouts or forcing the control visible.

Developer image previews

For site adaptation or a requested visual handoff, follow visual previews. Persist screenshots at meaningful asserted states in the site-specific runner, inspect them, and display representative images directly with brief captions. Local developer evidence is raw and unmasked by default, lives outside Git, and uses the shared evidence storage rules. Keep automatic CI/real-site capture settings unchanged; report missing live access or image-rendering limitations explicitly.

Multi-Worktree Conventions

  1. Shared Profile: All worktrees resolve to the same OS-level data folder (%LOCALAPPDATA%\AllApiHub\dev-browser on Windows, ~/Library/Application Support/AllApiHub/dev-browser on macOS). Accounts and cookies persist across branch switches.
  2. Current Branch Targeting: scripts/e2e-cdp-control.mjs checks process.cwd() against extension manifest titles to ensure it controls the extension belonging to the active worktree when multiple branches are mounted.

© qixing-jk, AGPL-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/live-extension-ui-automation of qixing-jk/all-api-hub.

  • SKILL.md
  • references/session-reuse.md

Open the folder on GitHubat commit 220dceb

Compare with similar skills

Live Extension UI Automation 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.

Live Extension UI Automation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Live Extension UI Automation this skillqixing-jk/all-api-hub4.9k—~2.7kAutomated safety check: PassAGPL-3.0
Release ExtensionYorick-Ryu/deep-share144—~1.3kAutomated safety check: PassCustom licence
Canvas Capture Extensionremotion-dev/remotion63k—~907Automated safety check: PassCustom licence
Md2docxYorick-Ryu/deep-share144—~1.9kAutomated safety check: PassCustom licence
Wxt Browser Extensionsvantezzen/skip-silence4692 repos~1.9kAutomated safety check: PassMIT
DevSpace Manual QA SetupWaishnav/devspace5.2k—~440Automated safety check: PassMIT

Similar skills

  • Release Extension

    Yorick-Ryu/deep-share

    Release browser extensions or similar small packaged apps by upgrading a semantic version, packaging build artifacts, creating a git commit and tag, pushing to the remote, and publishing a GitHub…

    144 GitHub stars~1.3k tokensUpdated 6 days ago
    DevelopmentAuto-check passed

  • Canvas Capture Extension

    remotion-dev/remotion

    Official

    Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension.

    63k GitHub stars~907 tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • Md2docx

    Yorick-Ryu/deep-share

    Convert Markdown to Word (DOCX) documents. An agent skill from Yorick-Ryu/deep-share.

    144 GitHub stars~1.9k tokensUpdated 6 days ago
    Documents & OfficeAuto-check passed

  • Wxt Browser Extensions

    vantezzen/skip-silence

    WXT browser extension performance optimization guidelines. An agent skill from vantezzen/skip-silence.

    469 GitHub starsUsed in 2 repos~1.9k tokens
    DevelopmentAuto-check passed

  • DevSpace Manual QA Setup

    Waishnav/devspace

    Prepares the current DevSpace checkout or worktree for isolated local manual QA, covering QA state seeding, UI asset builds and snapshot resets.

    5.2k GitHub stars~440 tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Kimi Webbridge

    MoonshotAI/kimi-code

    Kimi Browser Extension（Kimi 浏览器扩展，原 Kimi WebBridge）lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login…

    7.8k GitHub stars~3.6k tokensUpdated today
    DevelopmentAuto-check passed

More from qixing-jk/all-api-hub

  • Sponsor Catalog

    qixing-jk/all-api-hub

    Maintain all-api-hub sponsor catalogs, affiliate content, assets, and coordinated README/docs listings.

    4.9k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Add Site Integration

    qixing-jk/all-api-hub

    Add or extend account, managed-site or check-in integrations, improve native editors or compare their UX, or decide site-type boundaries.

    4.9k GitHub stars~4.8k tokensUpdated today
    Auto-check passed

  • Add App Language

    qixing-jk/all-api-hub

    Add a supported application language or regional locale to all-api-hub across application and extension runtimes.

    4.9k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Live Extension UI Automation

What does Live Extension UI Automation do?

Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts. Live Extension UI Automation is an agent skill from qixing-jk/all-api-hub. Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

When should I use Live Extension UI Automation?

Live Extension UI Automation fits situations like: tasks that involve Browser extensions; tasks that involve Git worktrees.

How do I install Live Extension UI Automation in Claude Code?

Run `npx skills add qixing-jk/all-api-hub --skill live-extension-ui-automation -a claude-code`. Or copy the skill folder (.agents/skills/live-extension-ui-automation in qixing-jk/all-api-hub) into .claude/skills/live-extension-ui-automation in your project. Claude Code loads it when a task matches its description.

How do I install Live Extension UI Automation in Codex?

Run `npx skills add qixing-jk/all-api-hub --skill live-extension-ui-automation -a codex`. Or copy the skill folder (.agents/skills/live-extension-ui-automation in qixing-jk/all-api-hub) into .agents/skills/live-extension-ui-automation in your project. Codex loads it when a task matches its description.

Can I use Live Extension UI Automation 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 qixing-jk/all-api-hub --skill live-extension-ui-automation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/live-extension-ui-automation, .gemini/skills/live-extension-ui-automation, .github/skills/live-extension-ui-automation and .opencode/skills/live-extension-ui-automation in your project.

What does Live Extension UI Automation need to run?

Going by SKILL.md and its folder, Live Extension UI Automation needs the command-line tools its instructions call (pnpm).

Does Live Extension UI Automation 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 Live Extension UI Automation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Live Extension UI Automation use?

Live Extension UI Automation is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Live Extension UI Automation use?

About 2.7k tokens (SKILL.md is roughly 11k 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 Live Extension UI Automation?

Skills that share tags, products or a category with Live Extension UI Automation: Release Extension (Yorick-Ryu/deep-share, 144 stars), Canvas Capture Extension (remotion-dev/remotion, 63k stars), Md2docx (Yorick-Ryu/deep-share, 144 stars) and Wxt Browser Extensions (vantezzen/skip-silence, 469 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Live Extension UI Automation?

qixing-jk (a GitHub user) maintains it in qixing-jk/all-api-hub, which has 4,934 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 11, 2026.

Source: qixing-jk/all-api-hub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.