ck-chrome-devtools

Automate browsers with Puppeteer CLI scripts and persistent sessions. Use for screenshots, performance analysis, network monitoring, web scraping, form automation, JavaScript debugging.

الانتقال إلى التثبيت

المستودع: phuc-nt/my-translator
آخر نشاط في المصدر: ٩ مايو ٢٠٢٦ في ١٧:٠٤
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ١٬٢٦٩
التفرعات: ٣٩٩

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/phuc-nt/my-translator --skill ck-chrome-devtools

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات

29 ملفات

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

ck-agent-browser

AI-optimized browser automation CLI with context-efficient snapshots. Use for long autonomous sessions, self-verifying workflows, video recording, and cloud browser testing (Browserbase).

2026-05-09

ck-ai-artist

Generate images via Nano Banana with 129 curated prompts. Mandatory validation interview refines style/mood/colors (use --skip to bypass). 3 modes: search, creative, wild. Styles: Ukiyo-e, Bento grid, cyberpunk, cinematic, vintage patent.

2026-05-09

ck-ai-multimodal

Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4, Nano Banana 2, MiniMax), videos (Veo 3, Hailuo), speech (MiniMax TTS), music (MiniMax). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.

2026-05-09

عرض الكل من هذا المستودع

Scenario	Approach
Source-available sites	Read source code first, write selectors directly
Unknown layouts	Use `aria-snapshot.js` for semantic discovery
Visual inspection	Take screenshots to verify rendering
Debug issues	Collect console logs, analyze with session storage
Accessibility audit	Use ARIA snapshot for semantic structure analysis

Environment	Default	Why
macOS / Windows	Headed (visible)	Better debugging, OAuth login support
Linux / WSL	Headless	Servers typically have no display
CI (`CI`, `GITHUB_ACTIONS`, `GITLAB_CI`, `JENKINS_URL` env vars)	Headless	No display available

# Generate ARIA snapshot and output to stdout
node "$SKILL_DIR/aria-snapshot.js" --url https://example.com

# Save to file in snapshots directory
node "$SKILL_DIR/aria-snapshot.js" --url https://example.com --output ./.opencode/chrome-devtools/snapshots/page.yaml

- banner:
  - link "Hacker News" [ref=e1]
    /url: https://news.ycombinator.com
  - navigation:
    - link "new" [ref=e2]
    - link "past" [ref=e3]
    - link "comments" [ref=e4]
- main:
  - list:
    - listitem:
      - link "Show HN: My new project" [ref=e8]
      - text: "128 points by user 3 hours ago"
- contentinfo:
  - textbox [ref=e10]
    /placeholder: "Search"

Notation	Meaning
`[ref=eN]`	Stable identifier for interactive elements
`[checked]`	Checkbox/radio is selected
`[disabled]`	Element is inactive
`[expanded]`	Accordion/dropdown is open
`[level=N]`	Heading hierarchy (1-6)
`/url:`	Link destination
`/placeholder:`	Input placeholder text
`/value:`	Current input value

# Click element with ref e5
node "$SKILL_DIR/select-ref.js" --ref e5 --action click

# Fill input with ref e10
node "$SKILL_DIR/select-ref.js" --ref e10 --action fill --value "search query"

# Get text content
node "$SKILL_DIR/select-ref.js" --ref e8 --action text

# Screenshot specific element
node "$SKILL_DIR/select-ref.js" --ref e1 --action screenshot --output ./logo.png

# Focus element
node "$SKILL_DIR/select-ref.js" --ref e10 --action focus

# Hover over element
node "$SKILL_DIR/select-ref.js" --ref e5 --action hover

# Create snapshots directory
mkdir -p .opencode/chrome-devtools/snapshots

# Capture and store with timestamp
SESSION="$(date +%Y%m%d-%H%M%S)"
node "$SKILL_DIR/aria-snapshot.js" --url https://example.com --output .opencode/chrome-devtools/snapshots/$SESSION.yaml

Get snapshot to discover elements:

node "$SKILL_DIR/aria-snapshot.js" --url https://example.com

Identify target from YAML output (e.g., [ref=e5] for a button)

Interact by ref:

node "$SKILL_DIR/select-ref.js" --ref e5 --action click

Verify result with screenshot or new snapshot:

node "$SKILL_DIR/screenshot.js" --output ./result.png

# Option 1: npx serve (recommended)
npx serve ./dist -p 3000 &
node "$SKILL_DIR/navigate.js" --url http://localhost:3000

# Option 2: Python http.server
python -m http.server 3000 --directory ./dist &
node "$SKILL_DIR/navigate.js" --url http://localhost:3000

# Install dependencies (one-time setup)
npm install --prefix "$SKILL_DIR"

# Test (browser stays running for session reuse)
node "$SKILL_DIR/navigate.js" --url https://example.com
# Output: {"success": true, "url": "...", "title": "..."}

# First script: launches browser, navigates, disconnects (browser stays running)
node "$SKILL_DIR/navigate.js" --url https://example.com/login

# Subsequent scripts: connect to existing browser, reuse page state
node "$SKILL_DIR/fill.js" --selector "#email" --value "user@example.com"
node "$SKILL_DIR/fill.js" --selector "#password" --value "secret"
node "$SKILL_DIR/click.js" --selector "button[type=submit]"

# Close browser when done
node "$SKILL_DIR/navigate.js" --url about:blank --close true

Script	Purpose
`navigate.js`	Navigate to URLs
`screenshot.js`	Capture screenshots (auto-compress >5MB via Sharp)
`click.js`	Click elements
`fill.js`	Fill form fields
`evaluate.js`	Execute JS in page context
`snapshot.js`	Extract interactive elements (JSON format)
`aria-snapshot.js`	Get ARIA accessibility tree (YAML format with refs)
`select-ref.js`	Interact with elements by ref from ARIA snapshot
`console.js`	Monitor console messages/errors
`network.js`	Track HTTP requests/responses
`performance.js`	Measure Core Web Vitals
`ws-debug.js`	Debug WebSocket connections (basic)
`ws-full-debug.js`	Debug WebSocket with full events/frames
`inject-auth.js`	Inject cookies/tokens for authentication
`import-cookies.js`	Import cookies from JSON/Netscape file
`connect-chrome.js`	Connect to Chrome with remote debugging

# Create tmp directory for test scripts
mkdir -p $SKILL_DIR/.opencode/chrome-devtools/tmp

# Write a test script
cat > $SKILL_DIR/.opencode/chrome-devtools/tmp/login-test.js << 'EOF'
import { getBrowser, getPage, disconnectBrowser, outputJSON } from '../scripts/lib/browser.js';

async function loginTest() {
  const browser = await getBrowser();
  const page = await getPage(browser);

  await page.goto('https://example.com/login');
  await page.type('#email', 'user@example.com');
  await page.type('#password', 'secret');
  await page.click('button[type=submit]');
  await page.waitForNavigation();

  outputJSON({
    success: true,
    url: page.url(),
    title: await page.title()
  });

  await disconnectBrowser();
}

loginTest();
EOF

# Run the test
node $SKILL_DIR/.opencode/chrome-devtools/tmp/login-test.js

# Basic screenshot
node "$SKILL_DIR/screenshot.js" --url https://example.com --output ./.opencode/chrome-devtools/screenshots/page.png

# Full page
node "$SKILL_DIR/screenshot.js" --url https://example.com --output ./.opencode/chrome-devtools/screenshots/page.png --full-page true

# Specific element
node "$SKILL_DIR/screenshot.js" --url https://example.com --selector ".main-content" --output ./.opencode/chrome-devtools/screenshots/element.png

# Default: compress if >5MB
node "$SKILL_DIR/screenshot.js" --url https://example.com --output ./.opencode/chrome-devtools/screenshots/page.png

# Custom threshold (3MB)
node "$SKILL_DIR/screenshot.js" --url https://example.com --output ./.opencode/chrome-devtools/screenshots/page.png --max-size 3

# Disable compression
node "$SKILL_DIR/screenshot.js" --url https://example.com --output ./.opencode/chrome-devtools/screenshots/page.png --no-compress

# Capture all logs for 10 seconds
node "$SKILL_DIR/console.js" --url https://example.com --duration 10000

# Filter by type
node "$SKILL_DIR/console.js" --url https://example.com --types error,warn --duration 5000

# Create session directory
SESSION="$(date +%Y%m%d-%H%M%S)"
mkdir -p .opencode/chrome-devtools/logs/$SESSION

# Capture and store
node "$SKILL_DIR/console.js" --url https://example.com --duration 10000 > .opencode/chrome-devtools/logs/$SESSION/console.json
node "$SKILL_DIR/network.js" --url https://example.com > .opencode/chrome-devtools/logs/$SESSION/network.json

# View errors
jq '.messages[] | select(.type=="error")' .opencode/chrome-devtools/logs/$SESSION/console.json

# 1. Check for JavaScript errors
node "$SKILL_DIR/console.js" --url https://example.com --types error,pageerror --duration 5000 | jq '.messages'

# 2. Correlate with network failures
node "$SKILL_DIR/network.js" --url https://example.com | jq '.requests[] | select(.response.status >= 400)'

# 3. Check specific error stack traces
node "$SKILL_DIR/console.js" --url https://example.com --types error --duration 5000 | jq '.messages[].stack'

# Get all interactive elements
node "$SKILL_DIR/snapshot.js" --url https://example.com | jq '.elements[] | {tagName, text, selector}'

# Find buttons
node "$SKILL_DIR/snapshot.js" --url https://example.com | jq '.elements[] | select(.tagName=="button")'

# Find by text content
node "$SKILL_DIR/snapshot.js" --url https://example.com | jq '.elements[] | select(.text | contains("Submit"))'

# 1. Capture current state (without navigating to preserve state)
node "$SKILL_DIR/screenshot.js" --output ./.opencode/skills/chrome-devtools/screenshots/debug.png

# 2. Get console errors
node "$SKILL_DIR/console.js" --url about:blank --types error --duration 1000

# 3. Discover correct selector
node "$SKILL_DIR/snapshot.js" | jq '.elements[] | select(.text | contains("Submit"))'

# 4. Try XPath if CSS fails
node "$SKILL_DIR/click.js" --selector "//button[contains(text(),'Submit')]"

node "$SKILL_DIR/evaluate.js" --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'

node "$SKILL_DIR/navigate.js" --url https://example.com/form
node "$SKILL_DIR/fill.js" --selector "#search" --value "query"
node "$SKILL_DIR/click.js" --selector "button[type=submit]"

node "$SKILL_DIR/performance.js" --url https://example.com | jq '.vitals'

Error	Solution
`Cannot find package 'puppeteer'`	Run `npm install` in scripts directory
`libnss3.so` missing (Linux)	Run `./install-deps.sh`
Element not found	Use `snapshot.js` to find correct selector
Script hangs	Use `--timeout 60000` or `--wait-until load`
Screenshot >5MB	Auto-compressed; use `--max-size 3` for lower
Session stale	Delete `.browser-session.json` and retry

Scroll-triggered animations: Scroll element into view first

node "$SKILL_DIR/evaluate.js" --script "document.querySelector('.lazy-image').scrollIntoView()"
# Wait for animation
node "$SKILL_DIR/evaluate.js" --script "await new Promise(r => setTimeout(r, 1000))"
node "$SKILL_DIR/screenshot.js" --output ./result.png

Sequential animation queue: Wait longer and retry

# First attempt
node "$SKILL_DIR/screenshot.js" --url http://localhost:3000 --output ./attempt1.png

# Wait for animations to complete
node "$SKILL_DIR/evaluate.js" --script "await new Promise(r => setTimeout(r, 2000))"

# Retry screenshot
node "$SKILL_DIR/screenshot.js" --output ./attempt2.png

Intersection Observer animations: Trigger by scrolling through page

node "$SKILL_DIR/evaluate.js" --script "window.scrollTo(0, document.body.scrollHeight)"
node "$SKILL_DIR/evaluate.js" --script "await new Promise(r => setTimeout(r, 1500))"
node "$SKILL_DIR/evaluate.js" --script "window.scrollTo(0, 0)"
node "$SKILL_DIR/screenshot.js" --output ./full-loaded.png --full-page true

# Inject single cookie
node "$SKILL_DIR/inject-auth.js" --url https://site.com \
  --cookies '[{"name":"session","value":"abc123","domain":".site.com"}]'

# Multiple cookies with all properties
node "$SKILL_DIR/inject-auth.js" --url https://site.com \
  --cookies '[{"name":"session","value":"abc","domain":".site.com","httpOnly":true,"secure":true}]'

# With Bearer token header
node "$SKILL_DIR/inject-auth.js" --url https://api.site.com \
  --token "Bearer eyJhbG..." --header Authorization

# 1. Install "Cookie-Editor" or "EditThisCookie" Chrome extension
# 2. Navigate to site → Log in manually
# 3. Click extension → Export as JSON → Save to cookies.json
# 4. Import into puppeteer session:

node "$SKILL_DIR/import-cookies.js" --file ./cookies.json --url https://site.com

# Netscape format (from curl/wget):
node "$SKILL_DIR/import-cookies.js" --file ./cookies.txt --format netscape --url https://site.com

# Only import cookies matching target domain:
node "$SKILL_DIR/import-cookies.js" --file ./cookies.json --url https://site.com --strict-domain

# Use Chrome's default profile (preserves all cookies, extensions, saved passwords)
node "$SKILL_DIR/navigate.js" --url https://site.com --use-default-profile true

# Use specific Chrome profile directory
node "$SKILL_DIR/navigate.js" --url https://site.com --profile "/path/to/chrome/profile"

# Step 1: Launch Chrome with remote debugging (in separate terminal)
# macOS:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

# Linux:
google-chrome --remote-debugging-port=9222

# Step 2: Log in manually in the Chrome window

# Step 3: Connect and automate
node "$SKILL_DIR/connect-chrome.js" --browser-url http://localhost:9222 --url https://site.com

# Or launch Chrome automatically (opens new window):
node "$SKILL_DIR/connect-chrome.js" --launch --port 9222 --url https://site.com

# Open browser at login page, wait for redirect to dashboard after OAuth
node "$SKILL_DIR/navigate.js" --url https://app.example.com/login \
  --wait-for-login "/dashboard"

# With longer timeout (10 min) for slow SSO providers
node "$SKILL_DIR/navigate.js" --url https://app.example.com/login \
  --wait-for-login "/dashboard" --login-timeout 600000

# Use regex for complex URL patterns
node "$SKILL_DIR/navigate.js" --url https://app.example.com/login \
  --wait-for-login "/(dashboard|home|app)"

# First script injects auth
node "$SKILL_DIR/inject-auth.js" --url https://site.com --cookies '[...]'

# Subsequent scripts reuse saved auth automatically
node "$SKILL_DIR/navigate.js" --url https://site.com/dashboard
node "$SKILL_DIR/screenshot.js" --url https://site.com/profile --output ./profile.png

# Clear auth session when done
node "$SKILL_DIR/inject-auth.js" --url https://site.com --clear true

Method	Best For	Complexity
Inject cookies	Simple session cookies, API tokens	Low
Import from extension	Multi-cookie auth, OAuth tokens	Medium
Chrome profile	2FA, SSO, complex OAuth flows	Low*
Connect to Chrome	Debugging, visual verification	Medium
Interactive login	OAuth/SSO with manual browser interaction	Low

name	ck:chrome-devtools
description	Automate browsers with Puppeteer CLI scripts and persistent sessions. Use for screenshots, performance analysis, network monitoring, web scraping, form automation, JavaScript debugging.
license	Apache-2.0
argument-hint	[url or task]
metadata	{"author":"claudekit","version":"1.1.0"}

name	ck:chrome-devtools
description	Automate browsers with Puppeteer CLI scripts and persistent sessions. Use for screenshots, performance analysis, network monitoring, web scraping, form automation, JavaScript debugging.
license	Apache-2.0
argument-hint	[url or task]
metadata	{"author":"claudekit","version":"1.1.0"}

ck-chrome-devtools

معلومات المصدر

خيارات التثبيت

مراجعة ملفات المصدر

المزيد من هذا المستودع

Chrome DevTools Agent Skill

Skill Location

Chrome DevTools Agent Skill

Skill Location

Choosing Your Approach

Automation Browsing Running Mode

ARIA Snapshot (Element Discovery)

Get ARIA Snapshot

Example YAML Output

Interpreting ARIA Notation

Interact by Ref

Store Snapshots

Workflow: Unknown Page Structure

Local HTML Files

Quick Start

Session Persistence

Available Scripts

Workflow Loop

Writing Custom Test Scripts

Screenshots

Auto-Compression (Sharp)

Console Log Collection & Analysis

Capture Logs

Session Storage Pattern

Root Cause Analysis

Finding Elements

Error Recovery

Common Patterns

Web Scraping

Form Automation

Performance Testing

Script Options

Troubleshooting

Screenshot Analysis: Missing Images

Authentication & Cookies

Method 1: Inject Cookies Directly

Method 2: Import from Browser Extension

Method 3: Use Your Chrome Profile

Method 4: Connect to Running Chrome

Method 5: Interactive Login (OAuth/SSO)

Session Persistence

Choosing the Right Method

Reference Documentation

المزيد من هذا المستودع