### Initial Setup and Exploration

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Commands to update community adapters, list available sites, and get recommendations for adapters based on browsing habits.

```bash
# First time: pull community adapters
bb-browser site update

# See what's available
bb-browser site list

# See which adapters match your browsing habits
bb-browser site recommend
```

--------------------------------

### PyPI Package Info Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the PyPI adapter to get package information.

```bash
site pypi/package <name>
```

--------------------------------

### View Adapter Development Guide

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Access the guide for developing adapters.

```bash
bb-browser guide
```

--------------------------------

### GitHub Repository Info Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the GitHub adapter to get repository information.

```bash
site github/repo <owner/repo>
```

--------------------------------

### YouTube Transcript Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the YouTube adapter to get video transcripts.

```bash
site youtube/transcript <video_id>
```

--------------------------------

### npm Package Info Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the npm adapter to get package information.

```bash
site npm/package <name>
```

--------------------------------

### BBC Headlines Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the BBC adapter to get headlines.

```bash
site bbc/headlines
```

--------------------------------

### Zhihu Question Details Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Zhihu adapter to get question details.

```bash
site zhihu/question <id>
```

--------------------------------

### StackOverflow Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the StackOverflow search adapter.

```bash
site stackoverflow/search "query"
```

--------------------------------

### LinkedIn Profile Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the LinkedIn adapter to get profile information.

```bash
site linkedin/profile <url>
```

--------------------------------

### Google Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Google search adapter.

```bash
site google/search "query"
```

--------------------------------

### Baidu Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Baidu search adapter.

```bash
site baidu/search "query"
```

--------------------------------

### YouTube Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the YouTube adapter to search for videos.

```bash
site youtube/search "query"
```

--------------------------------

### Dev.to Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Dev.to search adapter.

```bash
site devto/search "query"
```

--------------------------------

### Weibo Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Weibo search adapter.

```bash
site weibo/search "query"
```

--------------------------------

### Toutiao Hot List Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Toutiao adapter to get the hot list.

```bash
site toutiao/hot
```

--------------------------------

### Wikipedia Summary Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Wikipedia adapter to get a summary of a topic.

```bash
site wikipedia/summary "topic"
```

--------------------------------

### LinkedIn Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the LinkedIn search adapter.

```bash
site linkedin/search "query"
```

--------------------------------

### cnblogs Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the cnblogs search adapter.

```bash
site cnblogs/search "query"
```

--------------------------------

### Bilibili Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Bilibili adapter to search for videos.

```bash
site bilibili/search "query"
```

--------------------------------

### Reddit Thread Details Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Reddit adapter to get thread details.

```bash
site reddit/thread <url>
```

--------------------------------

### Form Filling Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

A step-by-step example demonstrating how to open a form, fill in fields, submit, and close the browser.

```bash
bb-browser open https://example.com/form
bb-browser snapshot -i
bb-browser fill @1 "张三"
bb-browser fill @2 "zhangsan@example.com"
bb-browser click @3
bb-browser wait 2000
bb-browser close
```

--------------------------------

### Open Library Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Open Library adapter to search for books.

```bash
site openlibrary/search "query"
```

--------------------------------

### Douban Top 250 Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Douban adapter to get the Top 250 movies.

```bash
site douban/top250
```

--------------------------------

### CSDN Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the CSDN search adapter.

```bash
site csdn/search "query"
```

--------------------------------

### Reddit Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Reddit search adapter.

```bash
site reddit/search "query"
```

--------------------------------

### Bing Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Bing search adapter.

```bash
site bing/search "query"
```

--------------------------------

### Bilibili Popular Videos Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Bilibili adapter to fetch popular videos.

```bash
site bilibili/popular
```

--------------------------------

### BOSS Zhipin Job Detail Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the BOSS Zhipin adapter to get job details.

```bash
site boss/detail <url>
```

--------------------------------

### Zhihu Hot List Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Zhihu adapter to fetch the hot list.

```bash
site zhihu/hot
```

--------------------------------

### 36kr Newsflash Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the 36kr adapter to fetch newsflashes.

```bash
site 36kr/newsflash
```

--------------------------------

### Install bb-browser

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Install the bb-browser command-line tool globally using npm.

```bash
npm install -g bb-browser
```

--------------------------------

### IMDb Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the IMDb adapter to search.

```bash
site imdb/search "query"
```

--------------------------------

### Yahoo Finance Stock Quote Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Yahoo Finance adapter to get stock quotes.

```bash
site yahoo-finance/stock <ticker>
```

--------------------------------

### V2EX Hot Posts Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the V2EX adapter to fetch hot posts.

```bash
site v2ex/hot
```

--------------------------------

### DuckDuckGo Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the DuckDuckGo search adapter.

```bash
site duckduckgo/search "query"
```

--------------------------------

### Typical Fetch Scenarios

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Examples demonstrating common use cases for the fetch command, including checking login status, calling internal APIs, submitting form data, and downloading files.

```bash
# Check login status
bb-browser fetch https://www.reddit.com/api/me.json
```

```bash
# Call internal API
bb-browser fetch https://internal.company.com/api/dashboard --json
```

```bash
# Submit form data
bb-browser fetch https://api.example.com/submit \
  --method POST \
  --body '{"name":"test","value":123}' \
  --headers '{"Content-Type":"application/json"}'
```

```bash
# Download data to file
bb-browser fetch https://api.example.com/export.csv --output data.csv
```

--------------------------------

### Xiaohongshu Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Xiaohongshu search adapter.

```bash
site xiaohongshu/search "query"
```

--------------------------------

### Qidian Novel Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Qidian adapter to search for novels.

```bash
site qidian/search "query"
```

--------------------------------

### Creating New Adapters

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Guidance on creating new `bb-browser` adapters, including reading the guide or requesting assistance for reverse-engineering websites.

```bash
# Read the guide
bb-browser guide

# Or just tell me: "turn notion.so into a bb-browser adapter"
# I'll reverse-engineer the API, write the adapter, test it, and submit a PR.
```

--------------------------------

### Reuters Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Reuters search adapter.

```bash
site reuters/search "query"
```

--------------------------------

### View Adapter Arguments

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Inspect the arguments, examples, and domain information for a specific web adapter, such as the Xueqiu stock adapter.

```bash
bb-browser site info xueqiu/stock   # view adapter args, example, domain
```

--------------------------------

### Douban Movie Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Douban adapter to search for movies.

```bash
site douban/movie <name>
```

--------------------------------

### Eastmoney News Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Eastmoney adapter to search for news.

```bash
site eastmoney/news "query"
```

--------------------------------

### Weibo Hot Topics Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Weibo adapter to fetch hot topics.

```bash
site weibo/hot
```

--------------------------------

### Eastmoney Stock Query Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Eastmoney adapter to query stock information.

```bash
site eastmoney/stock "茅台"
```

--------------------------------

### Wikipedia Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Wikipedia adapter to search for articles.

```bash
site wikipedia/search "query"
```

--------------------------------

### arXiv Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the arXiv adapter to search for papers.

```bash
site arxiv/search "query"
```

--------------------------------

### Jike Feed Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Jike adapter to retrieve feed updates.

```bash
site jike/feed
```

--------------------------------

### Sogou WeChat Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Sogou WeChat article search adapter.

```bash
site sogou/wechat "query"
```

--------------------------------

### Hupu Hot Posts Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Hupu adapter to fetch hot posts.

```bash
site hupu/hot
```

--------------------------------

### Twitter/X User Information Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Twitter/X adapter to retrieve user information.

```bash
site twitter/user <handle>
```

--------------------------------

### Twitter/X Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Twitter/X search adapter to find tweets.

```bash
site twitter/search "query"
```

--------------------------------

### BOSS Zhipin Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the BOSS Zhipin adapter to search for jobs.

```bash
site boss/search "query"
```

--------------------------------

### GitHub Create PR Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the GitHub adapter to create a pull request.

```bash
site github/pr-create <repo> --title "..."
```

--------------------------------

### GitHub Issues List Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the GitHub adapter to list issues for a repository.

```bash
site github/issues <owner/repo>
```

--------------------------------

### Genius Lyrics Search Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the Genius adapter to search for lyrics.

```bash
site genius/search "query"
```

--------------------------------

### Basic bb-browser Usage

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Demonstrates basic commands for updating and recommending bb-browser adapters, and a simple example of accessing Zhihu hot trends.

```bash
bb-browser site update        # pull community adapters
bb-browser site recommend     # see which adapters match your browsing habits
bb-browser site zhihu/hot     # go
```

--------------------------------

### HackerNews Top Stories Adapter Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Example of using the HackerNews adapter to fetch top stories.

```bash
site hackernews/top
```

--------------------------------

### bb-browser Guide Command

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Command to access the full tutorial for bb-browser, which explains how to add new websites as CLI tools.

```bash
bb-browser guide    # full tutorial
```

--------------------------------

### Information Extraction Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Example of extracting text from an element, taking a screenshot, and closing the browser.

```bash
bb-browser open https://example.com/dashboard
bb-browser snapshot -i
bb-browser get text @5
bb-browser screenshot report.png
bb-browser close
```

--------------------------------

### Running Adapters via OpenClaw Browser

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Examples of executing site adapters using the `--openclaw` flag to run through OpenClaw's browser.

```bash
# Run any adapter via OpenClaw's browser
bb-browser site reddit/hot --openclaw
bb-browser site hackernews/top 5 --openclaw
bb-browser site v2ex/hot --openclaw
```

--------------------------------

### Batch Operations Example

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

A loop to process multiple URLs, extracting snapshot data and closing each tab.

```bash
for url in "url1" "url2" "url3"; do
  bb-browser open "$url"
  bb-browser snapshot -i --json
  bb-browser close
done
```

--------------------------------

### Best Practice: Snapshot Before Operation

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Emphasizes the importance of taking a snapshot to get valid refs before attempting any interaction with elements.

```bash
# 正确
bb-browser open https://example.com
bb-browser snapshot -i          # 先获取 ref
bb-browser click @1             # 再使用

# 错误
bb-browser open https://example.com
bb-browser click @1             # ref 不存在！
```

--------------------------------

### Handle Composition Start Event

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Sets a flag indicating that an input composition session has started. Requires `debugLog`.

```javascript
function onCompositionStart() {
    isComposing = true;
    debugLog("input", "composition_start");
}
```

--------------------------------

### Data Extraction: Finance

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Examples for retrieving financial data from Xueqiu and Eastmoney.

```bash
# Finance
bb-browser site xueqiu/stock SH600519 --openclaw
bb-browser site xueqiu/hot-stock 5 --openclaw
bb-browser site eastmoney/stock "茅台" --openclaw
```

--------------------------------

### Basic bb-browser Commands

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Quick start commands for common browser operations like opening pages, taking snapshots, clicking elements, filling forms, and closing tabs.

```bash
bb-browser open <url>        # 打开页面（新 tab）
bb-browser snapshot -i       # 获取可交互元素
bb-browser click @5          # 点击元素
bb-browser fill @3 "text"    # 填写输入框
bb-browser close             # 完成后关闭 tab
```

--------------------------------

### Data Extraction: Video Platforms

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Examples for extracting transcripts from YouTube and searching Bilibili.

```bash
# Video
bb-browser site youtube/transcript VIDEO_ID --openclaw
bb-browser site bilibili/search "query" --openclaw
```

--------------------------------

### Basic Fetch GET Request (Absolute Path)

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Perform a GET request to a specified URL using an absolute path. The command automatically handles authentication and cookies.

```bash
bb-browser fetch https://www.reddit.com/api/me.json
```

--------------------------------

### Basic Fetch GET Request (Relative Path)

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Perform a GET request to a specified URL using a relative path. The command uses the origin of the current tab.

```bash
bb-browser fetch /api/me.json
```

--------------------------------

### Best Practice: Re-snapshot After Dynamic Changes

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Recommends re-snapshotting the page after dynamic content changes (e.g., opening a dropdown) to get updated refs.

```bash
bb-browser click @1             # 打开下拉菜单
bb-browser snapshot -i          # 获取菜单项的 ref
bb-browser click @7             # 选择菜单项
```

--------------------------------

### Start MCP Server for AI Integration

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Command to launch the MCP server, enabling integration with AI tools like Claude Code and Cursor.

```bash
# 启动 MCP server
bb-browser --mcp
```

--------------------------------

### Basic bb-browser Commands

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Examples of common bb-browser commands for searching and retrieving information from various platforms. These commands utilize the browser's existing login state.

```bash
bb-browser site twitter/search "AI agent"       # search tweets
bb-browser site zhihu/hot                        # trending on Zhihu
bb-browser site arxiv/search "transformer"       # search papers
bb-browser site eastmoney/stock "茅台"            # real-time stock quote
bb-browser site boss/search "AI engineer"        # search jobs
bb-browser site wikipedia/summary "Python"       # Wikipedia summary
bb-browser site youtube/transcript VIDEO_ID      # full transcript
bb-browser site stackoverflow/search "async"     # search SO questions
```

--------------------------------

### Query Stock Information

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Searches for stock information, using Moutai as an example.

```bash
bb-browser site eastmoney/stock "茅台"
```

--------------------------------

### User Interaction Tracing

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Start, stop, and check the status of user operation recording.

```bash
bb-browser trace start                              # 开始录制用户操作
bb-browser trace stop                               # 停止录制，输出事件列表
bb-browser trace status                             # 查看录制状态
```

--------------------------------

### Example Snapshot Output Format

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Illustrates the structure and format of the snapshot output, showing unique ref IDs, HTML tags, attributes, and text content.

```text
页面: Example Site - 首页
URL: https://example.com

@1 [header]
  @2 [nav]
    @3 [a] "首页"
    @4 [a] "产品"
    @5 [a] "关于"
  @6 [button] "登录"

@7 [main]
  @8 [h1] "欢迎"
  @9 [form]
    @10 [input type="email"] placeholder="邮箱"
    @11 [input type="password"] placeholder="密码"
    @12 [button type="submit"] "登录"

@13 [footer]
  @14 [a] "隐私政策"
```

--------------------------------

### Element Referencing with Snapshots

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Example of snapshot output showing temporary element identifiers (refs) and their corresponding DOM descriptions.

```bash
@1 [button] "提交"
@2 [input type="text"] placeholder="请输入姓名"
@3 [a] "查看详情"
```

--------------------------------

### Debugging with Snapshot Commands

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Lists useful `bb-browser` commands for debugging, including viewing full or interactive snapshots, JSON output, and getting element text.

```bash
# 查看完整页面结构
bb-browser snapshot
```

```bash
# 只看可交互元素
bb-browser snapshot -i
```

```bash
# JSON 格式便于解析
bb-browser snapshot -i --json
```

```bash
# 获取特定元素的文本
bb-browser get text @5
```

--------------------------------

### Output Site Command Results as JSON

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Demonstrates using the --json flag to get structured data from site commands.

```bash
bb-browser site zhihu/hot --json
```

```bash
bb-browser site twitter/search "AI" --json
```

--------------------------------

### Start Tab Polling

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Starts a timer to periodically fetch tabs using `fetchTabs()`. Prevents multiple timers from being set if already running.

```javascript
function startTabPolling() {
    if (tabPollTimer) return;
    tabPollTimer = setInterval(() => {
        fetchTabs();
    }, 5000);
}
```

--------------------------------

### bb-browser with OpenClaw

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Examples of using bb-browser with OpenClaw, which allows it to run through OpenClaw's built-in browser without requiring a separate Chrome extension or daemon.

```bash
bb-browser site reddit/hot --openclaw
bb-browser site xueqiu/hot-stock 5 --openclaw --jq '.items[] | {name, changePercent}'
```

--------------------------------

### Common Ref Patterns

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Provides examples of common HTML elements and their corresponding ref formats, including buttons, inputs, links, and checkboxes.

```text
@1 [button] "提交"                    # 按钮
@2 [input type="email"]               # 邮箱输入框
@3 [input type="password"]            # 密码输入框
@4 [a href="/page"] "链接文字"         # 链接
@5 [select]                           # 下拉框
@6 [textarea] placeholder="请输入"     # 文本域
@7 [checkbox] checked                 # 已勾选的复选框
@8 [radio] selected                   # 已选中的单选框
```

--------------------------------

### Ref Lifecycle Example: Re-snapshotting After Interaction

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Demonstrates that refs become invalid after page changes and require re-snapshotting to obtain new, valid refs.

```bash
# 获取初始快照
bb-browser snapshot -i
# @1 [button] "下一页"
```

```bash
# 点击触发页面变化
bb-browser click @1
```

```bash
# 必须重新获取快照！
bb-browser snapshot -i
# @1 [h1] "第二页"  ← 现在是不同的元素
```

--------------------------------

### Interact with Page Elements using Snapshot -i

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Use 'snapshot -i' to get references to interactive elements and then interact with them using 'fill' and 'click'.

```bash
bb-browser snapshot -i
# @1 [button] "登录"
# @2 [input] placeholder="用户名"
# @3 [input type="password"]

bb-browser fill @2 "username"
bb-browser fill @3 "password"
bb-browser click @1
```

--------------------------------

### Get YouTube Video Transcript

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Fetches the transcript for a given YouTube video ID.

```bash
bb-browser site youtube/transcript dQw4w9WgXcQ
```

--------------------------------

### List Available Adapters

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Use this command to list all available adapters, grouped by platform.

```bash
bb-browser site list
```

--------------------------------

### Fetch: cURL with Login State

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Execute fetch requests within the browser context, automatically including cookies and login state. Supports GET, POST, custom headers, and saving output to files.

```bash
bb-browser fetch <url>                                    # GET 请求
bb-browser fetch <url> --method POST --body '{"k":"v"}'   # POST 请求
bb-browser fetch <url> --headers '{"Auth":"Bearer xxx"}'  # 自定义请求头
bb-browser fetch <url> --output data.json                 # 保存到文件
bb-browser fetch /api/me.json                             # 相对路径（用当前 tab 的 origin）
```

--------------------------------

### Run Adapter (Short Form)

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

This is the recommended short form for running an adapter with optional arguments.

```bash
bb-browser site <name> [args...]
```

--------------------------------

### Run Adapter (Full Form)

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Use this command to run a specific adapter by its name, with optional arguments.

```bash
bb-browser site run <name> [args...]
```

--------------------------------

### Snapshot Command Options

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Demonstrates the different options available for the `bb-browser snapshot` command, including generating a full snapshot, only interactive elements, and JSON output.

```bash
# 完整快照（显示页面结构）
bb-browser snapshot
```

```bash
# 只显示可交互元素（推荐）
bb-browser snapshot -i
```

```bash
# JSON 格式输出
bb-browser snapshot -i --json
```

--------------------------------

### Start WebRTC Heartbeat Timer

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Starts a periodic heartbeat timer to send ping messages. The interval is adjusted based on tab visibility to conserve resources when the tab is hidden.

```javascript
function startHeartbeat() {
  stopHeartbeat();
  const interval = document.hidden ? HEARTBEAT_IDLE_MS : HEARTBEAT_ACTIVE_MS;
  heartbeatTimer = setInterval(sendPing, interval);
  sendPing(); // send immediately
  debugLog("heartbeat", "start", { interval, hidden: document.hidden });
}
```

--------------------------------

### Viewing Adapter Details

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Commands to inspect adapter arguments and search for available adapters by keyword.

```bash
# Check what args an adapter takes
bb-browser site info xueqiu/stock

# Search adapters by keyword
bb-browser site search reddit
```

--------------------------------

### Search Adapters

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Search for adapters using a query that matches names, descriptions, or domains.

```bash
bb-browser site search <query>
```

--------------------------------

### Site System: CLI for Websites

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Commands for interacting with the site system, which turns website functionalities into CLI APIs using adapters. This includes listing, searching, and running adapters for various platforms.

```bash
# 常用命令
bb-browser site list                          # 列出所有 adapter
bb-browser site search <query>                # 搜索 adapter
bb-browser site <name> [args...]              # 运行 adapter
bb-browser site update                        # 更新社区 adapter 库

# 使用示例
bb-browser site twitter/search "Claude Code"  # 搜索推文
bb-browser site zhihu/hot                     # 知乎热榜
bb-browser site github/repo owner/repo        # 仓库信息
bb-browser site youtube/transcript <video_id> # 获取字幕
bb-browser site reddit/thread <url>           # 帖子详情
bb-browser site eastmoney/stock "茅台"         # 股票查询
bb-browser site weibo/hot                     # 微博热搜
bb-browser site arxiv/search "transformer"    # 论文搜索
```

--------------------------------

### Network Command: Clear Request History

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Clear all recorded network requests. This is useful for starting a fresh monitoring session.

```bash
# Clear request history
bb-browser network clear
```

--------------------------------

### Tab Management: Multiple Tabs Scenario

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Illustrates managing multiple tabs, opening several URLs, performing operations, and then closing tabs sequentially or by index.

```bash
# 多 tab 场景
bb-browser open https://site-a.com     # tabId: 123
bb-browser open https://site-b.com     # tabId: 456
# ... 操作 ...
bb-browser tab close                    # 关闭当前 tab
bb-browser tab close                    # 关闭剩余 tab
```

--------------------------------

### Data Extraction: Social Media

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Examples for extracting data from social media platforms like Twitter, Reddit, Weibo, and Xiaohongshu.

```bash
# Social media
bb-browser site twitter/search "OpenClaw" --openclaw
bb-browser site twitter/thread <tweet-url> --openclaw
bb-browser site reddit/thread <post-url> --openclaw
bb-browser site weibo/hot --openclaw
bb-browser site xiaohongshu/search "query" --openclaw
```

--------------------------------

### Tab Management: Single Tab Scenario

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Demonstrates the workflow for a single tab, including opening a URL, performing actions via snapshot and click, and finally closing the tab.

```bash
# 单 tab 场景
bb-browser open https://example.com    # 打开新 tab
bb-browser snapshot -i
bb-browser click @5
bb-browser close                        # 完成后关闭
```

--------------------------------

### Best Practice: Re-snapshot After Navigation

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Advises to take a new snapshot after navigating to a new page to ensure refs are valid for the new DOM.

```bash
bb-browser click @5             # 导航到新页面
bb-browser snapshot -i          # 获取新页面的 ref
bb-browser click @1             # 使用新的 ref
```

--------------------------------

### Error Handling with Login Hint

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

When an adapter returns an error with a hint, the system checks for login-related keywords and prompts the user to log in via the browser.

```bash
[error] site twitter/search: HTTP 401
  Hint: Please log in to https://twitter.com in your browser first, then retry.
```

--------------------------------

### Interacting with Elements Using Refs

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Shows how to perform actions like clicking and filling input fields using the assigned ref IDs.

```bash
# 点击登录按钮
bb-browser click @6
```

```bash
# 填写邮箱
bb-browser fill @10 "user@example.com"
```

```bash
# 填写密码
bb-browser fill @11 "password123"
```

```bash
# 提交表单
bb-browser click @12
```

--------------------------------

### Initiate WebRTC Connection

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Establishes a WebRTC connection by requesting an offer, configuring the PeerConnection with ICE servers, and setting up event handlers for tracks and data channels. Requires `invoke`, `RTCPeerConnection`, `setStatus`, `debugLog`, `setConnected`, `fetchTabs`, `startTabPolling`, and `startHeartbeat`.

```javascript
async function connect() {
    if (connected) return;
    btnConnect.disabled = true;
    videoOverlay.textContent = "Connecting...";
    videoOverlay.classList.remove("hidden");
    setStatus("connecting", "Requesting offer...");
    debugLog("webrtc", "connect_start");
    let offer;
    try {
        offer = await invoke("stream.start", {});
        debugLog("webrtc", "offer_received", { sdpBytes: offer.offer_sdp ? offer.offer_sdp.length : 0, candidates: (offer.candidates || []).length });
    } catch (err) {
        setStatus("error", "Failed: " + (err.message || err));
        debugLog("webrtc", "offer_failed", { message: err.message });
        btnConnect.disabled = false;
        videoOverlay.textContent = "Click Connect to start";
        return;
    }
    const iceServers = (offer.ice_servers || []).map(s => ({
        urls: s.urls || [],
        username: s.username || undefined,
        credential: s.credential || undefined,
    })).filter(s => s.urls.length > 0);
    const config = {
        iceServers: iceServers.length > 0 ? iceServers : [{ urls: "stun:stun.l.google.com:19302" }]
    };
    pc = new RTCPeerConnection(config);
    debugLog("webrtc", "pc_created", { iceServers: config.iceServers.length });
    pc.ontrack = (e) => {
        debugLog("webrtc", "track", { kind: e.track.kind, streams: e.streams ? e.streams.length : 0 });
        if (e.streams && e.streams[0]) {
            videoEl.srcObject = e.streams[0];
        } else {
            const stream = new MediaStream();
            stream.addTrack(e.track);
            videoEl.srcObject = stream;
        }
        try {
            videoEl.playoutDelayHint = 0;
        } catch {}
        try {
            videoEl.jitterBufferTarget = 0;
        } catch {}
    };
    pc.ondatachannel = (e) => {
        dc = e.channel;
        dc.binaryType = "arraybuffer";
        debugLog("webrtc", "datachannel", { label: dc.label });
        dc.onopen = () => {
            debugLog("webrtc", "datachannel_open");
            setConnected(true, null);
            imeInput.focus(); // Start tab polling once connected
            fetchTabs();
            startTabPolling();
            startHeartbeat();
        };
        dc.onclose = () => {
            debugLog("webrtc", "datachannel_close");
            cleanup("network");
        };
    };
    pc.oniceconnectionstatechange = () => {
        const state = pc.iceConnectionState;
        debugLog("webrtc", "ice_state", { state });
        if (state === "connected" || state === "completed") {
            setStatus("connected", "Connected");
        } else if (state === "failed") {
            setStatus("error", "ICE failed");
            cleanup("network");
        } else if (state === "disconnected") {
            setStatus("er
```

--------------------------------

### Event Listeners for Input and Connection

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Sets up event listeners for IME input composition, connection button clicks, and manages the connection state.

```javascript
imeInput.addEventListener("compositionstart", onCompositionStart);
imeInput.addEventListener("compositionend", onCompositionEnd);
btnConnect.addEventListener("click", () => {
  if (connected)
    disconnect("user");
  else
    connect();
});
```

--------------------------------

### Check Package Information on NPM and PyPI

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Retrieves information about packages from NPM and PyPI.

```bash
bb-browser site npm/package bb-browser
```

```bash
bb-browser site pypi/package requests
```

--------------------------------

### Update Community Adapters

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Run this command to update the community adapter library from the GitHub repository.

```bash
bb-browser site update
```

--------------------------------

### Data Extraction with jq Filtering

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Extract specific data from web scraping operations using the --jq flag for inline filtering. This example demonstrates filtering hot stock data from Xueqiu.

```bash
bb-browser site xueqiu/hot-stock 5 --jq '.items[] | {name,changePercent}'
# {"name":"云天化","changePercent":"2.08%"}
# {"name":"东芯股份","changePercent":"-7.60%"}
```

--------------------------------

### Handle Incoming WebRTC Offer and Create Answer

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Processes an incoming WebRTC offer, sets it as the remote description, adds remote ICE candidates, creates and sets a local answer, gathers local ICE candidates, and sends the answer back to the peer. This is used when acting as the WebRTC server.

```javascript
async function handleOffer(offer) {
  if (!pc) {
    pc = new RTCPeerConnection(config);
    // ... other event handlers ...
    pc.oniceconnectionstatechange = () => {
      const state = pc.iceConnectionState;
      debugLog("webrtc", "ice connection state change", { state });
      if (state === "failed" || state === "disconnected" || state === "closed") {
        setStatus("error", "ICE disconnected");
        cleanup("network");
      } else if (state === "checking") {
        setStatus("connecting", "ICE: " + state);
      }
    };
  }
  // Set remote offer
  setStatus("connecting", "Setting remote offer...");
  try {
    await pc.setRemoteDescription({ type: "offer", sdp: offer.offer_sdp });
    debugLog("webrtc", "set_remote_description_done");
  } catch (err) {
    setStatus("error", "SDP error: " + err.message);
    debugLog("webrtc", "set_remote_description_failed", { message: err.message });
    cleanup();
    return;
  }
  // Add remote ICE candidates
  const remoteCandidates = offer.candidates || [];
  for (const c of remoteCandidates) {
    try {
      await pc.addIceCandidate(new RTCIceCandidate({
        candidate: c.candidate,
        sdpMLineIndex: c.sdpMLineIndex,
        sdpMid: c.sdpMid || null,
      }));
    } catch (err) {
      debugLog("webrtc", "remote_candidate_failed", { message: err.message });
    }
  }
  // Create answer
  setStatus("connecting", "Creating answer...");
  const answer = await pc.createAnswer();
  await pc.setLocalDescription(answer);
  debugLog("webrtc", "answer_created", { sdpBytes: answer.sdp.length });
  // Wait for ICE gathering complete
  const localCandidates = [];
  await new Promise((resolve) => {
    if (pc.iceGatheringState === "complete") {
      resolve();
      return;
    }
    const timeout = setTimeout(resolve, 5000);
    pc.onicegatheringstatechange = () => {
      if (pc.iceGatheringState === "complete") {
        clearTimeout(timeout);
        resolve();
      }
    };
    pc.onicecandidate = (e) => {
      if (e.candidate) {
        localCandidates.push({
          candidate: e.candidate.candidate,
          sdpMLineIndex: e.candidate.sdpMLineIndex,
          sdpMid: e.candidate.sdpMid || "",
        });
      }
    };
  });
  debugLog("webrtc", "ice_gathering_done", { candidates: localCandidates.length });
  // Send answer
  setStatus("connecting", "Sending answer...");
  try {
    await invoke("stream.answer", {
      answer_sdp: pc.localDescription.sdp,
      candidates: localCandidates,
    });
    debugLog("webrtc", "answer_sent");
  } catch (err) {
    setStatus("error", "Answer failed: " + (err.message || err));
    debugLog("webrtc", "answer_send_failed", { message: err.message });
    cleanup();
    return;
  }
  setStatus("connecting", "Waiting for connection...");
}
```

--------------------------------

### Handling Login State

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Instructions on how to log in to websites within OpenClaw's browser to enable adapters that require authentication.

```bash
# Log in to the site in OpenClaw's browser:
openclaw browser open https://twitter.com

# Complete login manually in the browser window
# Retry the command
```

--------------------------------

### Mandatory --openclaw Usage

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Illustrates the correct usage of the `--openclaw` flag for all `bb-browser site` commands, contrasting it with incorrect usage that would require a separate Chrome extension.

```bash
# Correct
bb-browser site twitter/search "AI agent" --openclaw
bb-browser site zhihu/hot 10 --openclaw --json
bb-browser site xueqiu/hot-stock 5 --openclaw --jq '.items[] | {name, changePercent}'

# Wrong (requires separate Chrome extension)
bb-browser site twitter/search "AI agent"
```

--------------------------------

### Local Adapter Directory Structure

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Private adapters are stored in ~/.bb-browser/sites/ and have higher priority than community adapters.

```bash
~/.bb-browser/
├── sites/              # 私有 adapter（优先级高，覆盖同名社区 adapter）
│   └── platform/
│       └── command.js
└── bb-sites/           # 社区 adapter（通过 bb-browser site update 拉取）
    └── platform/
        └── command.js
```

--------------------------------

### Global Options

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Common options applicable to most bb-browser commands, including JSON output, tab targeting, and MCP server activation.

```bash
--json               # 以 JSON 格式输出（所有命令通用）
--tab <tabId>        # 指定操作的标签页 ID（几乎所有命令通用）
--mcp                # 启动 MCP server（用于 Claude Code / Cursor 等 AI 工具）
```

--------------------------------

### Fetch Request and Save to File

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Execute a fetch request and save the response directly to a specified file.

```bash
bb-browser fetch https://api.example.com/data --output response.json
```

--------------------------------

### Filtering Data with --jq

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser-openclaw/SKILL.md

Demonstrates how to use the `--jq` flag for extracting specific fields or filtering results from adapter outputs. The `--json` flag is implied when using `--jq`.

```bash
# Just stock names
bb-browser site xueqiu/hot-stock 5 --openclaw --jq '.items[].name'

# Specific fields as objects
bb-browser site xueqiu/hot-stock 5 --openclaw --jq '.items[] | {name, changePercent, heat}'

# Filter results
bb-browser site reddit/hot --openclaw --jq '.posts[] | {title, score}'
```

--------------------------------

### Traditional vs. bb-browser Context Consumption

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Compares the token usage between traditional methods of sending full DOM/HTML to AI and bb-browser's compact snapshot approach.

```text
完整 DOM/HTML 发送给 AI → AI 解析 → 生成 CSS 选择器 → 执行操作
每次交互 ~3000-5000 tokens
```

```text
紧凑快照 → 分配 @ref → 直接用 ref 操作
每次交互 ~200-400 tokens
```

--------------------------------

### Handle Dialogs

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Commands to accept, dismiss, or accept dialogs with text input.

```bash
bb-browser dialog accept        # 确认对话框
bb-browser dialog dismiss       # 取消对话框
bb-browser dialog accept "text" # 确认并输入（prompt）
```

--------------------------------

### Pass Mixed Arguments

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Combine positional and named arguments when running an adapter.

```bash
bb-browser site twitter/search "AI agent" --count 20
```

--------------------------------

### Navigation Button Event Handlers

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Sets up click handlers for back, forward, and reload buttons. These functions invoke corresponding backend commands, logging any errors.

```javascript
backBtn.onclick = async () => {
  debugLog("nav", "back\_click");
  const params = activeTabId ? { tab: activeTabId } : {};
  try {
    await invoke("back", params);
  } catch (err) {
    debugLog("nav", "back\_failed", { message: err.message });
  }
};

forwardBtn.onclick = async () => {
  debugLog("nav", "forward\_click");
  const params = activeTabId ? { tab: activeTabId } : {};
  try {
    await invoke("forward", params);
  } catch (err) {
    debugLog("nav", "forward\_failed", { message: err.message });
  }
};

reloadBtn.onclick = async () => {
  debugLog("nav", "reload\_click");
  const params = activeTabId ? { tab: activeTabId } : {};
  try {
    await invoke("reload", params);
  } catch (err) {
    debugLog("nav", "reload\_failed", { message: err.message });
  }
};
```

--------------------------------

### bb-browser MCP Configuration

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Configuration snippet for integrating bb-browser with MCP (likely referring to a specific AI or development environment) using npx.

```json
{
  "mcpServers": {
    "bb-browser": {
      "command": "npx",
      "args": ["-y", "bb-browser", "--mcp"]
    }
  }
}
```

--------------------------------

### API Reverse Engineering Workflow

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

A step-by-step workflow combining `network` and `fetch` to discover and test website APIs.

```bash
# 1. Clear old records
bb-browser network clear

# 2. Refresh the page to trigger requests
bb-browser refresh

# 3. View API requests with details
bb-browser network requests "api" --with-body --json

# 4. Test a discovered API endpoint with fetch
bb-browser fetch /api/discovered-endpoint --json

# 5. Proceed to write site adapter (see adapter-development.md)
```

--------------------------------

### Daemon Host Configuration

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Configure the bb-browser daemon to listen on specific network interfaces. Use '127.0.0.1' for IPv4 only or '0.0.0.0' to listen on all interfaces for remote access.

```bash
bb-browser daemon --host 127.0.0.1    # IPv4 only (fix macOS IPv6 issues)
bb-browser daemon --host 0.0.0.0      # listen on all interfaces (for Tailscale / ZeroTier remote access)
```

--------------------------------

### Basic Fetch POST Request

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Perform a POST request with a JSON body. Ensure the body is correctly formatted.

```bash
bb-browser fetch https://api.example.com/data --method POST --body '{"key":"value"}'
```

--------------------------------

### Best Practice: Wait for Loading After Interaction

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Suggests using `bb-browser wait` to pause execution after triggering an AJAX load or other asynchronous operations, before taking a snapshot.

```bash
bb-browser click @3             # 触发 AJAX 加载
bb-browser wait 1000            # 等待加载
bb-browser snapshot -i          # 获取新内容的 ref
```

--------------------------------

### Fetch Request with JSON Output

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Perform a fetch request and output the JSON response directly to the console.

```bash
bb-browser fetch https://www.reddit.com/api/me.json --json
```

--------------------------------

### Create New Tab

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Creates a new tab using `invoke('tab_new')`. Sets the new tab as active, switches streaming if connected, and refreshes the tab list. Logs success or failure.

```javascript
newTabBtn.onclick = async () => {
    debugLog("tab", "new_click", { activeTabId });
    try {
        const result = await invoke("tab_new", {});
        activeTabId = result.tab || result.id;
        debugLog("tab", "new_done", { tab: result.tab });
        // Switch streamer to the new tab if (connected && activeTabId) {
            try {
                await invoke("stream.switch", { tab: activeTabId });
            } catch {}
        }
        await fetchTabs();
    } catch (err) {
        debugLog("tab", "new_failed", { message: err.message });
        setStatus("error", "New tab failed: " + err.message);
    }
};
```

--------------------------------

### Initial UI State and Tab Fetch

Source: https://github.com/epiral/bb-browser/blob/main/web/view.html

Sets the initial UI state by dimming the tab and URL bar, and fetches tabs even before the WebRTC connection is established.

```javascript
tabBar.classList.add("dimmed");
document.getElementById("url-bar").classList.add("dimmed");
fetchTabs();
```

--------------------------------

### Pass Named Arguments

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Use the --flag value format to pass named arguments to an adapter.

```bash
bb-browser site github/pr-create epiral/bb-sites --title "feat: ..." --head "user:branch"
```

--------------------------------

### View Hot Topics on Zhihu, Weibo, and V2EX

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Fetches trending topics from Zhihu, Weibo, and V2EX.

```bash
bb-browser site zhihu/hot
```

```bash
bb-browser site weibo/hot
```

```bash
bb-browser site v2ex/hot
```

--------------------------------

### Network Command: Add Multiple Route Rules

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/fetch-and-network.md

Demonstrates adding multiple interception rules to handle different types of network requests.

```bash
bb-browser network route "*tracker*" --abort
bb-browser network route "*/api/config" --body '{"feature_flag":true}'
```

--------------------------------

### Ref Format Explanation

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/snapshot-refs.md

Breaks down the structure of a ref, explaining each component from the unique ID to other attributes.

```text
@1 [tag type="value"] "文本内容" placeholder="提示"
│   │   │             │          │
│   │   │             │          └─ 其他属性
│   │   │             └─ 可见文本
│   │   └─ 关键属性
│   └─ HTML 标签
└─ 唯一 ref ID
```

--------------------------------

### Tab Management Commands

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Commands for listing, creating, switching, and closing tabs, with options to operate on the current tab, by index, or by tab ID.

```bash
bb-browser tab                  # 列出所有 tab
bb-browser tab new [url]        # 新建 tab
bb-browser tab 2                # 切换到第 2 个 tab（按 index）
bb-browser tab select --id 123  # 切换到指定 tabId 的 tab
bb-browser tab close            # 关闭当前 tab
bb-browser tab close 3          # 关闭第 3 个 tab（按 index）
bb-browser tab close --id 123   # 关闭指定 tabId 的 tab
```

--------------------------------

### Snapshot Commands

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Commands for taking page snapshots, with options to display only interactive elements, remove empty nodes, limit depth, scope by CSS selector, and output as JSON.

```bash
bb-browser snapshot             # 完整页面结构
bb-browser snapshot -i          # 只显示可交互元素（推荐）
bb-browser snapshot -c          # 移除空结构节点
bb-browser snapshot -d 3        # 限制树深度为 3 层
bb-browser snapshot -s ".main"  # 限定 CSS 选择器范围
bb-browser snapshot --json      # JSON 格式输出
# 选项可组合：bb-browser snapshot -i -c -d 5
```

--------------------------------

### Web Research Across Multiple Platforms

Source: https://github.com/epiral/bb-browser/blob/main/README.md

Perform cross-platform research on any topic by querying various sites like ArXiv, Twitter, GitHub, Stack Overflow, Zhihu, and 36Kr. Results are returned as structured JSON.

```bash
# Cross-platform research on any topic
bb-browser site arxiv/search "retrieval augmented generation"
bb-browser site twitter/search "RAG"
bb-browser site github search rag-framework
bb-browser site stackoverflow/search "RAG implementation"
bb-browser site zhihu/search "RAG"
bb-browser site 36kr/newsflash
```

--------------------------------

### Search ArXiv for Papers

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Searches the ArXiv preprint server for research papers.

```bash
bb-browser site arxiv/search "transformer attention mechanism"
```

--------------------------------

### Pass Positional Arguments

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/references/site-system.md

Pass arguments to an adapter in the order they are defined.

```bash
bb-browser site reddit/thread https://www.reddit.com/r/LocalLLaMA/comments/...
```

--------------------------------

### Frame Switching Commands

Source: https://github.com/epiral/bb-browser/blob/main/skills/bb-browser/SKILL.md

Commands to switch context between the main frame and nested iframes using CSS selectors or a 'main' keyword.

```bash
bb-browser frame "#iframe-id"   # 切换到 iframe
bb-browser frame main           # 返回主 frame
```