1. browser_navigate → https://space.bilibili.com/{uid}/fans/follow
2. browser_network_requests → Discovered:
   GET /x/relation/followings?vmid={uid}&pn=1&ps=24  →  [200]
   GET /x/relation/stat?vmid={uid}                    →  [200]
3. browser_evaluate → Verify API:
   fetch('/x/relation/followings?vmid=137702077&pn=1&ps=5', {credentials:'include'})
   → { code: 0, data: { total: 1342, list: [{mid, uname, sign, ...}] } }
4. Conclusion: Standard Cookie API, no Wbi signature required
5. Write following.ts → Build passes in one go

 ┌─────────────┐     ┌─────────────┐     ┌──────────────┐     ┌────────┐
 │ 1. API Discovery │ ──▶ │ 2. Select Strategy │ ──▶ │ 3. Write Adapter │ ──▶ │ 4. Test │
 └─────────────┘     └─────────────┘     └──────────────┘     └────────┘
   explore             cascade             YAML / TS            run + verify

opencli explore https://www.example.com --site mysite

undefined

Key information to pay attention to in packet capture results:
- **URL pattern**: `/api/v2/hot?limit=20` → This is the endpoint you need to call
- **Method**: `GET` / `POST`
- **Request Headers**: Cookie? Bearer? Custom signature headers (X-s, X-t)?
- **Response Body**: JSON structure, especially the path where the data is located (`data.items`, `data.list`)

undefined

Sites using Vue + Pinia (such as Xiaohongshu) can bypass signatures directly via Store Action.

---

opencli cascade https://api.example.com/hot

Can you get data directly with fetch(url)?
  → ✅ Tier 1: public (public API, no browser required)
  → ❌ Can you get data with fetch(url, {credentials:'include'}) carrying cookies?
       → ✅ Tier 2: cookie (most common, fetch within evaluate step)
       → ❌ → Can you get data after adding Bearer / CSRF header?
              → ✅ Tier 3: header (e.g. Twitter ct0 + Bearer)
              → ❌ → Does the site have Pinia/Vuex Store?
                     → ✅ Tier 4: intercept (Store Action + XHR interception)
                     → ❌ Tier 5: ui (UI automation, last resort)

ls src/clis/<site>/    # Check what already exists
cat src/clis/<site>/feed.ts   # Read the most similar one

Does your pipeline have an evaluate step (embedded JS code)?
  → ✅ Use TypeScript (src/clis/<site>/<name>.ts), automatically dynamically registered on save
  → ❌ Pure declarative (navigate + tap + map + limit)?
       → ✅ Use YAML (src/clis/<site>/<name>.yaml), automatically registered on save

args: [
  { name: 'page', type: 'int', required: false, default: 1, help: 'Page number' },
  { name: 'limit', type: 'int', required: false, default: 50, help: 'Page size (max 50)' },
],
func: async (page, kwargs) => {
  const pn = kwargs.page ?? 1;
  const ps = Math.min(kwargs.limit ?? 50, 50); // Respect API ps limit
  const payload = await fetchJson(page,
    `https://api.example.com/list?pn=${pn}&ps=${ps}`
  );
  return payload.data?.list || [];
},

undefined

undefined

undefined

> **Key Point**: The `fetch` inside the `evaluate` step runs in the browser page context, automatically carries `credentials: 'include'`, no need to handle cookies manually.

undefined

undefined

undefined

> **The `tap` step automatically completes**: Inject fetch + XHR dual interception → Find Pinia/Vuex store → Call action → Capture response matching URL → Clean up interception.  
> If the store or action is not found, a `hint` will be returned listing all available store actions for easy debugging.

| Tap Parameter | Required | Description |
|---------|------|------|
| `store` | ✅ | Pinia store name (e.g. `feed`, `search`, `notification`) |
| `action` | ✅ | Store action method name |
| `capture` | ✅ | URL substring match (matches network request URL) |
| `args` | ❌ | Parameter array passed to action |
| `select` | ❌ | Path extracted from captured JSON (e.g. `data.items`) |
| `timeout` | ❌ | Timeout in seconds waiting for network response (default 5s) |
| `framework` | ❌ | `pinia` or `vuex` (auto detected by default) |

// src/clis/twitter/search.ts
import { cli, Strategy } from '../../registry.js';

cli({
  site: 'twitter',
  name: 'search',
  description: 'Search tweets',
  strategy: Strategy.HEADER,
  args: [{ name: 'query', required: true, positional: true }],
  columns: ['rank', 'author', 'text', 'likes'],
  func: async (page, kwargs) => {
    await page.goto('https://x.com');
    const data = await page.evaluate(`
      (async () => {
        // Extract CSRF token from Cookie
        const ct0 = document.cookie.split(';')
          .map(c => c.trim())
          .find(c => c.startsWith('ct0='))?.split('=')[1];
        if (!ct0) return { error: 'Not logged in' };

        const bearer = 'AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D...';
        const headers = {
          'Authorization': 'Bearer ' + decodeURIComponent(bearer),
          'X-Csrf-Token': ct0,
          'X-Twitter-Auth-Type': 'OAuth2Session',
        };

        const variables = JSON.stringify({ rawQuery: '${kwargs.query}', count: 20 });
        const url = '/i/api/graphql/xxx/SearchTimeline?variables=' + encodeURIComponent(variables);
        const res = await fetch(url, { headers, credentials: 'include' });
        return await res.json();
      })()
    `);
    // ... parse data
  },
});

// src/clis/xiaohongshu/user.ts
import { cli, Strategy } from '../../registry.js';

cli({
  site: 'xiaohongshu',
  name: 'user',
  description: 'Get user notes',
  strategy: Strategy.INTERCEPT,
  args: [{ name: 'id', required: true }],
  columns: ['rank', 'title', 'likes', 'url'],
  func: async (page, kwargs) => {
    await page.goto(`https://www.xiaohongshu.com/user/profile/${kwargs.id}`);
    await page.wait(5);

    // Low-level XHR/Fetch interception: capture all requests containing 'v1/user/posted'
    await page.installInterceptor('v1/user/posted');

    // Trigger backend API: simulate human user scrolling to the bottom 2 times
    await page.autoScroll({ times: 2, delayMs: 2000 });

    // Extract all intercepted JSON response bodies
    const requests = await page.getInterceptedRequests();
    if (!requests || requests.length === 0) return [];

    let results = [];
    for (const req of requests) {
      if (req.data?.data?.notes) {
        for (const note of req.data.data.notes) {
           results.push({
             title: note.display_title || '',
             likes: note.interact_info?.liked_count || '0',
             url: `https://explore/${note.note_id || note.id}`
           });
        }
      }
    }

    return results.slice(0, 20).map((item, i) => ({
      rank: i + 1, ...item,
    }));
  },
});

undefined

undefined

opencli evaluate "(() => {
  const app = document.querySelector('#app')?.__vue_app__;
  const pinia = app?.config?.globalProperties?.\$pinia;
  return [...pinia._s.keys()];
})()"

undefined

⚠  tap: Action not found: wrongName on store notification
💡 Available: getNotification, replyComment, getNotificationCount, reset

undefined

undefined

 ┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌────────┐
 │ 1. Navigate  │ ──▶ │ 2. Explore store │ ──▶ │ 3. Write YAML   │ ──▶ │ 4. Test │
 │    to target page  │     │ name/action  │     │    tap step   │     │ Run verification │
 └──────────────┘     └──────────────┘     └──────────────┘     └────────┘

opencli bilibili hot --limit 1 -v          # View data flow of each pipeline step
opencli mysite hot -f json | jq '.[0]'     # Confirm JSON can be parsed
opencli mysite hot -f csv > data.csv       # Confirm CSV can be imported

opencli list | grep mysite                            # Confirm registration
git add src/clis/mysite/ && git commit -m "feat(mysite): add hot" && git push

import { cli, Strategy } from '../../registry.js';
import type { IPage } from '../../types.js';
import { apiGet } from './utils.js'; // Reuse platform SDK

cli({
  site: 'bilibili',
  name: 'subtitle',
  strategy: Strategy.COOKIE,
  args: [{ name: 'bvid', required: true }],
  columns: ['index', 'from', 'to', 'content'],
  func: async (page: IPage | null, kwargs: any) => {
    if (!page) throw new Error('Requires browser');

    // Step 1: Establish Session
    await page.goto(`https://www.bilibili.com/video/${kwargs.bvid}/`);

    // Step 2: Extract intermediate ID from page (__INITIAL_STATE__)
    const cid = await page.evaluate(`(async () => {
      return window.__INITIAL_STATE__?.videoData?.cid;
    })()`);
    if (!cid) throw new Error('Cannot extract CID');

    // Step 3: Call next-level API with intermediate ID (automatic Wbi signature)
    const payload = await apiGet(page, '/x/player/wbi/v2', {
      params: { bvid: kwargs.bvid, cid },
      signed: true, // ← Auto generate w_rid
    });

    // Step 4: Detect risk control degradation (null assertion)
    const subtitles = payload.data?.subtitle?.subtitles || [];
    const url = subtitles[0]?.subtitle_url;
    if (!url) throw new Error('subtitle_url is empty, suspected risk control degradation');

    // Step 5: Fetch final data (CDN JSON)
    const items = await page.evaluate(`(async () => {
      const res = await fetch(${JSON.stringify('https:' + url)});
      const json = await res.json();
      return { data: json.body || json };
    })()`);

    return items.data.map((item, idx) => ({ ... }));
  },
});

undefined

The generated candidate YAML is saved in `.opencli/explore/mysite/candidates/`, which can be directly copied to `src/clis/mysite/` and fine-tuned.

opencli record <url>
  → Open automation window and navigate to target URL
  → Inject fetch/XHR interceptor to all tabs (idempotent, can be injected repeatedly)
  → Poll every 2s: automatically inject when new tab is found, drain capture buffers of all tabs
  → Stop on timeout (default 60s) or Enter press
  → Analyze captured JSON requests: deduplicate → score → generate candidate YAML

undefined

undefined

site: tae
name: getList          # Name inferred from URL path
strategy: cookie
browser: true
pipeline:
  - navigate: https://...
  - evaluate: |
      (async () => {
        const res = await fetch('/approval/getList.json?procInsId=...', { credentials: 'include' });
        const data = await res.json();
        return (data?.content?.operatorRecords || []).map(item => ({ ... }));
      })()

import { cli, Strategy } from '../../registry.js';

cli({
  site: 'tae',
  name: 'get-approval',
  description: 'View reimbursement form approval process and operation records',
  domain: 'tae.alibaba-inc.com',
  strategy: Strategy.COOKIE,
  browser: true,
  args: [
    { name: 'proc_ins_id', type: 'string', required: true, positional: true, help: 'Process instance ID (procInsId)' },
  ],
  columns: ['step', 'operator', 'action', 'time'],
  func: async (page, kwargs) => {
    await page.goto('https://tae.alibaba-inc.com/expense/pc.html?_authType=SAML');
    await page.wait(2);
    const result = await page.evaluate(`(async () => {
      const res = await fetch('/approval/getList.json?taskId=&procInsId=${kwargs.proc_ins_id}', {
        credentials: 'include'
      });
      const data = await res.json();
      return data?.content?.operatorRecords || [];
    })()`);
    return (result as any[]).map((r, i) => ({
      step: i + 1,
      operator: r.operatorName || r.userId,
      action: r.operationType,
      time: r.operateTime,
    }));
  },
});