WeChat → Obsidian Clipper

Clips a WeChat public article to your Obsidian vault:

• - Headless — uses agent-browser (no visible window, fast)
• Full fidelity — extracts text and images in their original DOM order
• Images downloaded — saves to attachments/ next to the note using curl with correct Referer header (required to avoid 403)
• Clean Markdown — Obsidian ![[filename]] embed syntax

Requirements

• - agent-browser ≥ 0.17: INLINECODE6
• INLINECODE7 (pre-installed on macOS/Linux)
• An Obsidian vault accessible on the local filesystem

Trigger

User sends a mp.weixin.qq.com link and says something like:

• - "存 Obsidian" / "剪藏" / "帮我存"
• "save to Obsidian" / "clip this" / "save article"

Standard Workflow

Step 1 — Open page (headless)

CODEBLOCK0

Step 2 — Get title

CODEBLOCK1

Step 3 — Scroll to trigger lazy-loaded images

WeChat uses lazy loading — must scroll before extracting image URLs.

CODEBLOCK2

Step 4 — Extract content in DOM order

Important: Use classic function(){} syntax, not arrow functions — arrow functions inside JSON.stringify() cause a syntax error in agent-browser eval.

CODEBLOCK3

Image filter rules (skip these):

• - mmbiz.qlogo — author avatar
• INLINECODE12 — account profile image
• height < 50px — decorative dividers
• alt containing 二维码 / 引导 / 赞赏 — QR codes and tip prompts

Step 5 — Confirm save location

Always ask the user before writing. Suggest a directory based on topic:

📂 Suggested: <vault_root>/<topic_directory>/
📄 Filename: <title-keywords-YYYY-MM-DD>.md
🖼 Images → same folder's attachments/ directory
Confirm, or pick a different location?

Step 6 — Download images

CODEBLOCK4

Naming convention: <slug>-图00.png, 图01.jpg … numbered in DOM order.
Extension: check wx_fmt=jpeg → .jpg, otherwise → .png.

Shell tip for batch download — use a function, not declare -A (zsh doesn't support associative arrays):

CODEBLOCK5

Step 7 — Write the note

Strictly follow the DOM order from Step 4 — insert images at their original positions, not at the top or bottom.

CODEBLOCK6

Step 8 — Close browser

CODEBLOCK7

Step 9 — Report to user

Tell the user:

• - Note path
• Number of images downloaded
• ⚠️ Reminder: if you move the note, move the attachments/ folder with it. Obsidian's ![[]] does a global vault search so links won't break immediately, but it's cleaner to keep them together.

---

Gotchas (hard-won lessons)

#	Issue	Fix
1	Lazy-loaded images return empty INLINECODE27	Always scroll the full page before extracting
2

WeChat images return 403 | curl must pass -e 'https://mp.weixin.qq.com/' as Referer |
| 3 | Image order wrong | Traverse DOM nodes in order — don't collect images separately |
| 4 | zsh: bad substitution | zsh doesn't support declare -A; use a shell function instead |
| 5 | SyntaxError: missing ) after argument list in agent-browser eval | Use classic function(){} not arrow functions inside JSON.stringify() |
| 6 | async eval hangs | Wrap in (async () => { ... })() — no outer await needed |