Skill: Chrome Automation (agent-browser)
Automate browser tasks in the user's real Chrome session via the
agent-browser
CLI.
Prerequisite: agent-browser must be installed and Chrome must have remote debugging enabled. See references/agent-browser-setup.md if unsure. Core Principle: Reuse the User's Existing Chrome This skill operates on a single Chrome process — the user's real browser. There is no session management, no separate profiles, no launching a fresh Playwright browser. Always Start by Listing Tabs Before opening any new page, always list existing tabs first : agent-browser --auto-connect tab list This returns all open tabs with their index numbers, titles, and URLs. Check if the page you need is already open: If the target page is already open → switch to that tab directly instead of opening a new one. The user likely has it open because they are already logged in and the page is in the right state. agent-browser --auto-connect tab < index

If the target page is NOT open → open it in the current tab or a new tab. agent-browser --auto-connect open < url

Why This Matters The user's Chrome has their cookies, login sessions, and browser state Opening a new page when one is already available wastes time and may lose login state Many marketing platforms (social media dashboards, ad managers, CMS tools) require login — reusing an existing logged-in tab avoids re-authentication Connection Always use --auto-connect to connect to the user's running Chrome instance: agent-browser --auto-connect < command

This auto-discovers Chrome with remote debugging enabled. If connection fails, guide the user through enabling remote debugging (see references/agent-browser-setup.md ). Common Workflows 1. Navigate and Interact

List tabs to find existing pages

agent-browser --auto-connect tab list

Switch to an existing tab (if found)

agent-browser --auto-connect tab < index

Or open a new page

agent-browser --auto-connect open https://example.com agent-browser --auto-connect wait --load networkidle

Take a snapshot to see interactive elements

agent-browser --auto-connect snapshot -i

Click, fill, etc.

agent-browser --auto-connect click @e3 agent-browser --auto-connect fill @e5 "some text" 2. Extract Data from a Page

Get all text content

agent-browser --auto-connect get text body

Take a screenshot for visual inspection

agent-browser --auto-connect screenshot

Execute JavaScript for structured data

agent-browser --auto-connect eval "JSON.stringify(document.querySelectorAll('table tr').length)" 3. Replay a Chrome DevTools Recording The user may provide a recording exported from Chrome DevTools Recorder (JSON, Puppeteer JS, or @puppeteer/replay JS format). See Replaying Recordings below. Step-by-Step Interaction Guide Taking Snapshots Use snapshot -i to see all interactive elements with refs ( @e1 , @e2 , ...): agent-browser --auto-connect snapshot -i The output lists each interactive element with its role, text, and ref. Use these refs for subsequent actions. Step Type Mapping Action Command Navigate agent-browser --auto-connect open (optionally wait --load networkidle , but some sites like Reddit never reach networkidle — skip if open already shows the page title) Click snapshot -i → find ref → click @eN Fill standard input click @eN → fill @eN "text" Fill rich text editor click @eN → keyboard inserttext "text" Press key press (Enter, Tab, Escape, etc.) Scroll scroll down or scroll up Wait for element wait @eN or wait "" Screenshot screenshot or screenshot --annotate Get page text get text body Get current URL get url Run JavaScript eval How to Distinguish Input Types Standard input/textarea → use fill Contenteditable div / rich text editor (LinkedIn message box, Gmail compose, Slack, CMS editors) → click/focus first, then use keyboard inserttext Ref Lifecycle Refs ( @e1 , @e2 , ...) are invalidated when the page changes . Always re-snapshot after: Clicking links or buttons that trigger navigation Submitting forms Triggering dynamic content loads (AJAX, SPA navigation) Verification After each significant action, verify the result: agent-browser --auto-connect snapshot -i

check interactive state

agent-browser --auto-connect screenshot

visual verification

Replaying Recordings Accepted Formats JSON (recommended) — structured, can be read progressively:

Count steps

jq '.steps | length' recording.json

Read first 5 steps

jq

'.steps[0:5]'

recording.json

@puppeteer/replay JS

(

import

)

Puppeteer JS

(

require('puppeteer')

,

page.goto

,

Locator.race

)

How to Replay

Parse the recording

— understand the full intent before acting. Summarize what the recording does.

List tabs first

— check if the target page is already open.

Navigate

— execute

navigate

steps, reusing existing tabs when possible.

For each interaction step

:

Take a snapshot (

snapshot -i

) to see current interactive elements

Match the recording's

aria/...

selectors against the snapshot

Fall back to

text/...

, then CSS class hints, then screenshot

Do not rely on ember IDs, numeric IDs, or exact XPaths

— these change every page load

Verify after each step

— snapshot or screenshot to confirm

Iframe-Heavy Sites

snapshot -i

operates on the main frame only and

cannot penetrate iframes

. Sites like LinkedIn, Gmail, and embedded editors render content inside iframes.

Detecting Iframe Issues

snapshot -i

returns unexpectedly short or empty results

Recording references elements not appearing in snapshot output

get text body

content doesn't match what a screenshot shows

Workarounds

Use

eval

to access iframe content

:

agent-browser --auto-connect

eval

--stdin

<<

'EVALEOF'

const frame = document.querySelector('iframe[data-testid="interop-iframe"]');

const doc = frame.contentDocument;

const btn = doc.querySelector('button[aria-label="Send"]');

btn.click();

EVALEOF

Note: Only works for same-origin iframes.

Use

keyboard

for blind input

If the iframe element has focus,
keyboard inserttext "..."
sends text regardless of frame boundaries.
Use
get text body
to read full page content including iframes.
Use
screenshot
for visual verification when snapshot is unreliable.
When to Ask the User
If workarounds fail after 2 attempts on the same step, pause and explain:
The page uses iframes that cannot be accessed via snapshot
Which element you need and what you expected
Ask the user to perform that step manually, then continue
Handling Unexpected Situations
Handle Automatically (do not stop):
Popups or banners → dismiss them (
find text "Dismiss" click
or
find text "Close" click
)
Cookie consent dialogs → accept or dismiss
Tooltip overlays → close them first
Element not in snapshot → try
find text "..." click
, or scroll to reveal with
scroll down 300
Pause and Ask the User:
Login / authentication is required
A CAPTCHA appears
Page structure is completely different from expected
A destructive action is about to happen (deleting data, sending real content) — confirm first
Stuck for more than 2 attempts on the same step
All iframe workarounds have failed
When pausing, explain clearly: what step you are on, what you expected, and what you see.
Key Commands Reference
Command
Description
tab list
List all open tabs with index, title, and URL
tab
Switch to an existing tab by index
tab new
Open a new empty tab
tab close
Close the current tab
open
Navigate to URL
snapshot -i
List interactive elements with refs
click @eN
Click element by ref
fill @eN "text"
Clear and fill standard input/textarea
type @eN "text"
Type without clearing
keyboard inserttext "text"
Insert text (best for contenteditable)
press
Press keyboard key
scroll down/up
Scroll page in pixels
wait @eN
Wait for element to appear
wait --load networkidle
Wait for network to settle
wait
Wait for a duration
screenshot [path]
Take screenshot
screenshot --annotate
Screenshot with numbered labels
eval
Execute JavaScript in page
get text body
Get all text content
get url
Get current URL
set viewport
Set viewport size
find text "..." click
Semantic find and click
close
Close browser session
Known Limitations
Iframe blindness
:
snapshot -i
cannot see inside iframes. See
Iframe-Heavy Sites
.
find text
strict mode: Fails when multiple elements match. Use snapshot -i to locate the specific ref instead. fill vs contenteditable : fill only works on and

. For rich text editors, use
keyboard inserttext
.
eval
is main-frame only
: To interact with iframe content, traverse via
document.querySelector('iframe').contentDocument...
Multi-Platform Operations
When the user requests an action across
multiple platforms
(e.g., "publish this article to Dev.to, LinkedIn, and X"), do NOT attempt all platforms in a single conversation. Instead, launch
sequential Agent subagents
, one per platform.
Why Subagents
Each platform operation consumes ~25-40K tokens (reference file + snapshots + interactions). Running 3-5 platforms in one context risks hitting the 200K token limit and degrading late-platform accuracy. Each subagent gets its own fresh 200K context window.
How to Execute
Prepare the content
— confirm the post text, title, tags, and any platform-specific adaptations with the user.
For each platform
, launch a
general-purpose
Agent subagent with a prompt that includes:
The full content to publish
Instructions to read the relevant reference file (e.g.,
Read /path/to/skills/chrome-automation/references/x.md
)
Instructions to read the agent-browser skill file for command reference
The specific task (post, comment, reply, etc.)
Any platform-specific instructions (e.g., "use these hashtags on LinkedIn")
Run subagents sequentially
(one at a time), because they all share the same Chrome browser via
--auto-connect
. Parallel subagents would cause tab conflicts.
After each subagent completes
, report the result to the user before launching the next one.
Prompt Template for Subagents
You are automating a browser task on [PLATFORM].
First, read these files for context:
- /absolute/path/to/skills/chrome-automation/references/[platform].md
- /absolute/path/to/.claude/skills/agent-browser/SKILL.md (agent-browser command reference)
Then connect to the user's Chrome browser using `agent-browser --auto-connect` and perform the following task:
[TASK DESCRIPTION]
Content to publish:
[CONTENT]
Important:
- Always list tabs first (`tab list`) and reuse existing logged-in tabs
- Re-snapshot after every navigation or action
- Confirm with the user before submitting/publishing (destructive action)
- If login is required or a CAPTCHA appears, stop and explain
When NOT to Use Subagents
Single platform
— just do it directly in the current conversation.
Read-only tasks
(browsing, searching, extracting data) — context usage is lighter; a single conversation can handle 2-3 platforms.
Platform References
When automating tasks on specific platforms, consult the relevant reference document for page structure details, common operations, and known quirks:
Platform
Reference
Key Notes
Reddit
references/reddit.md
Custom
faceplate-*
components;
networkidle
never reached; unlabeled comment textbox;
find text
fails due to duplicate elements
X (Twitter)
references/x.md
open
often times out (use
tab list
to reuse existing tabs); click
timestamp
for post detail (not username); DraftJS contenteditable input (
data-testid="tweetTextarea_0"
); avoid
networkidle
LinkedIn
references/linkedin.md
Ember.js SPA; Enter submits comments (use Shift+Enter for newlines); comment box and compose box share the same label; avoid
networkidle
; messaging overlay may block content
Dev.to
references/devto.md
Fast server-rendered HTML (Forem/Rails); standard
<textarea>
for comments/posts (Markdown); 5 reaction types; Algolia-powered search;
networkidle
works normally
Hacker News
references/hackernews.md
Minimal plain HTML; all form fields are unlabeled;
link "reply"
navigates to separate page;
networkidle
works instantly; rate limiting on posts/comments
For installation and Chrome setup instructions, see
references/agent-browser-setup.md
.
                </article>

<a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a>
            </div>

<aside class="sidebar">
                <section class="related-skills" id="relatedSkillsSection">
                    <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2>
                    <div class="related-list" id="relatedSkillsList">
                        
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/browser-screenshot" class="related-card">
                                <div class="related-name">browser-screenshot</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">407</span>
                                </div>
                                <div class="related-desc">Skill: Browser Screenshot Take focused screenshots of specif...</div>
                            </a>
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/image-generation" class="related-card">
                                <div class="related-name">image-generation</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">395</span>
                                </div>
                                <div class="related-desc">Image Generation via MCP AI image generation skill via MCP. ...</div>
                            </a>
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/content-rewrite" class="related-card">
                                <div class="related-name">content-rewrite</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">371</span>
                                </div>
                                <div class="related-desc">Content Rewrite Adapt a piece of source content (article, bl...</div>
                            </a>
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/raw-video-processing" class="related-card">
                                <div class="related-name">raw-video-processing</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">366</span>
                                </div>
                                <div class="related-desc">Skill: Raw Video Processing Post-process raw screen recordin...</div>
                            </a>
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/video-to-gif" class="related-card">
                                <div class="related-name">video-to-gif</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">361</span>
                                </div>
                                <div class="related-desc">Skill: Video to GIF Convert a video file into multiple GIF v...</div>
                            </a>
                            
                            
                            
                            <a href="/ko/skill/zc277584121/marketing-skills/screenshot-compression" class="related-card">
                                <div class="related-name">screenshot-compression</div>
                                <div class="related-meta">
                                    <span class="related-owner">zc277584121</span>
                                    <span class="related-installs">353</span>
                                </div>
                                <div class="related-desc">Skill: Screenshot Compression Compress screenshot images (PN...</div>
                            </a>
                            
                        
                    </div>
                </section>

</aside>
        </div>
    </div>

// Load language files (only current + fallback for performance)
        async function loadLanguageResources() {
            const savedLang = localStorage.getItem('i18nextLng') || 'en';
            const langsToLoad = new Set([savedLang, 'en']); // current + fallback
            await Promise.all([...langsToLoad].map(async (lang) => {
                try {
                    const response = await fetch(`/locales/${lang}.json?v=20260403`);
                    if (response.ok) {
                        resources[lang] = { translation: await response.json() };
                    }
                } catch (error) {
                    console.warn(`Failed to load ${lang} language file:`, error);
                }
            }));
        }

// Load a single language on demand (for language switching)
        async function loadLanguage(lang) {
            if (resources[lang]) return;
            try {
                const response = await fetch(`/locales/${lang}.json?v=20260403`);
                if (response.ok) {
                    resources[lang] = { translation: await response.json() };
                    i18next.addResourceBundle(lang, 'translation', resources[lang].translation);
                }
            } catch (error) {
                console.warn(`Failed to load ${lang} language file:`, error);
            }
        }

// Initialize i18next
        async function initI18n() {
            try {
                await loadLanguageResources();
                
                // Filter out null values from resources
                const validResources = {};
                for (const [lang, data] of Object.entries(resources)) {
                    if (data !== null) {
                        validResources[lang] = data;
                    }
                }
                
                console.log('Loaded languages:', Object.keys(validResources));
                console.log('zh-CN resource:', validResources['zh-CN']);
                console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home);
                
                // 检查是否有保存的语言偏好
                const savedLang = localStorage.getItem('i18nextLng');
                // 如果没有保存的语言偏好，默认使用英文
                const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) 
                    ? savedLang 
                    : 'en';
                
                await i18next
                    .use(i18nextBrowserLanguageDetector)
                    .init({
                        lng: defaultLang,  // 强制设置初始语言
                        fallbackLng: 'en',
                        supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'],
                        resources: validResources,
                        detection: {
                            order: ['localStorage'],  // 只使用 localStorage，不检测浏览器语言
                            caches: ['localStorage'],
                            lookupLocalStorage: 'i18nextLng'
                        },
                        interpolation: {
                            escapeValue: false
                        }
                    });

console.log('i18next initialized, language:', i18next.language);
                console.log('Test translation:', i18next.t('detail.home'));

// Set initial language in selector
                const langSwitcher = document.getElementById('langSwitcher');
                langSwitcher.value = i18next.language;

// Update page language
                updatePageLanguage();

// Language switch event
                langSwitcher.addEventListener('change', async (e) => {
                    await loadLanguage(e.target.value); // load on demand
                    i18next.changeLanguage(e.target.value).then(() => {
                        updatePageLanguage();
                        localStorage.setItem('i18nextLng', e.target.value);
                    });
                });
            } catch (error) {
                console.error('i18next init failed:', error);
            }
        }

// Translation helper
        function t(key, options = {}) {
            return i18next.t(key, options);
        }

// Update all translatable elements
        function updatePageLanguage() {
            // Update HTML lang attribute
            document.documentElement.lang = i18next.language;

// Update elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                el.textContent = t(key);
            });
        }

// Copy command function
        function copyCommand() {
            const command = document.getElementById('installCommand').textContent;
            const btn = document.getElementById('copyBtn');
            
            navigator.clipboard.writeText(command).then(() => {
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            }).catch(() => {
                // Fallback for non-HTTPS
                const textArea = document.createElement('textarea');
                textArea.value = command;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

// Initialize
        document.getElementById('copyBtn').addEventListener('click', copyCommand);
        initI18n();

// 异步加载相关 Skills
        async function loadRelatedSkills() {
            const owner = 'zc277584121';
            const skillName = 'chrome-automation';
            const currentLang = 'ko';
            const listContainer = document.getElementById('relatedSkillsList');
            const section = document.getElementById('relatedSkillsSection');

try {
                const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`);
                
                if (!response.ok) {
                    throw new Error('Failed to load');
                }

const data = await response.json();
                const relatedSkills = data.related_skills || [];

if (relatedSkills.length === 0) {
                    // 没有相关推荐时隐藏整个区域
                    section.style.display = 'none';
                    return;
                }

// 渲染相关 Skills
                listContainer.innerHTML = relatedSkills.map(skill => {
                    const desc = skill.description || '';
                    const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
                    return `
                        <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in">
                            <div class="related-name">${escapeHtml(skill.skill_name)}</div>
                            <div class="related-meta">
                                <span class="related-owner">${escapeHtml(skill.owner)}</span>
                                <span class="related-installs">${skill.installs}</span>
                            </div>
                            <div class="related-desc">${escapeHtml(truncatedDesc)}</div>
                        </a>
                    `;
                }).join('');

} catch (error) {
                console.error('Failed to load related skills:', error);
                // 加载失败时显示提示或隐藏
                listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>';
            }
        }

// HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

// 页面加载完成后异步加载相关 Skills
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadRelatedSkills);
        } else {
            loadRelatedSkills();
        }

</script>

</body>
</html>

安装

List tabs to find existing pages

Switch to an existing tab (if found)

Or open a new page

Take a snapshot to see interactive elements

Click, fill, etc.

Get all text content

Take a screenshot for visual inspection

Execute JavaScript for structured data

check interactive state

visual verification

Count steps

Read first 5 steps