以 Crawl4AI + BrowserOS + Obsidian + Supermemory + OpenClaw 为基础打造自己的高效 Agent

以 Crawl4AI + BrowserOS + Obsidian + Supermemory + OpenClaw 为基础打造自己的高效 Agent

写在前面：这篇文章不是工具评测，而是我自己跑了两个月后沉淀下来的一套个人 Agent 栈。如果你也想给自己攒一个能记住你、会用浏览器、能写能搜、还能跨 session 帮你发知乎/小红书/博客园的"赛博小助理"，这套组合拳应该对你有用。

这篇文章首发于我的知乎专栏与小红书，下面是面向技术博客的版本，附带完整的代码片段和协议细节。

一、为什么又搭一套？

市面上的 Agent 产品（Cursor、Windsurf、Manus、Devin……）确实厉害，但有几个问题让我这个"重度的日常使用者"始终不踏实：

痛点 表现
记不住 每次开新对话都从零开始，不知道你昨晚写过一篇知乎
会失忆 隔了一个月回来，连你自己的账号、签名、目标受众都忘了
会被平台反爬 SaaS Agent 跑在你看不见的集群里，IP/UA/cookie 都是公共的，登录态根本拿不到
不能存草稿 Agent 给你写了一篇很好的稿子，结果它只放在它自己的对话历史里
不容易沉淀 你想让 Agent 学到的东西，明天再教它一次

我需要的，其实是一个本地的、能长期记忆的、能驱动真实浏览器、还能让我自己用 Markdown 维护配置的 Agent 栈。下面这套就是我在 2026 年跑通了的一版。

二、整体架构

                ┌──────────────────────────────────────────────┐
                │              Obsidian Vault                   │
                │  (~/workroom/ai_knowledge/.../agents/skills/) │
                │   ├─ skills/publish-zhihu.md                  │
                │   ├─ skills/publish-cnblogs.md                │
                │   ├─ skills/publish-xiaohongshu.md            │
                │   └─ drafts/2026-XX-XX-*/...                  │
                └────────▲─────────────────────┬────────────────┘
                         │ 读写 Markdown        │ 读取 skill
   ┌──────────────────┐  ┌──┴──────────────────────────┐  ┌──────────────────────┐
   │   Supermemory    │◀─┤      OpenClaw Agent         ├─▶│  Cron / Heartbeat    │
   │   (云端长期记忆)  │  │   (本地 LLM + tool runtime)  │  │  定时任务 & 心跳     │
   └──────────────────┘  └─┬───────────────────────────┘  └──────────────────────┘
                            │ Playwright CDP
                            ▼
                  ┌────────────────────────────┐
                  │       BrowserOS            │
                  │  本地持久化 Chrome  9100    │
                  └────────────┬───────────────┘
                               │ 110 个 MCP 工具
                               ▼
                  ┌────────────────────────────┐
                  │       Crawl4AI MCP         │
                  └────────────────────────────┘

五个组件各管一摊：

  • OpenClaw：Agent runtime，跑在你自己的 Mac 上
  • Supermemory：把对话、决策、踩过的坑、重要事实写进云端长期记忆
  • Obsidian：你的"永久仓库"，所有草稿、skill、profile、模板都用 Markdown 写在这里
  • BrowserOS：本地常驻 Chrome，CDP 端口 9100
  • Crawl4AI：作为 MCP server 集成进 OpenClaw，提供 110 个工具

三、最关键的几个工程实践

1. 强制协议：执行任何浏览器自动化前先 supermemory recall

每次写脚本前第一句话：

supermemory recall <platform> <action>

比如今天要发知乎，第一件事：

supermemory recall zhihu publish
supermemory recall browser automation react fiber

平台的 DOM 选择器、按钮位置、React Fiber 树深度都会漂移。这一条帮我在过去一周避免了至少 3 次发到一半失败。

2. 知乎：Draft.js / Slate 编辑器只能走 React Fiber

知乎专栏用的是 Draft.js（早期是 Slate）。直接 execCommand('insertHTML') 一定失败——内容"看起来"写进去了，发布后是空白，因为它没触发 React 状态。

唯一可靠的方法是顺着 React Fiber tree 找到 onChange 回调，调用 EditorState.push() 或 resetWithValue()：

const editor = document.querySelector('.DraftEditor-root')
            || document.querySelector('[data-slate-editor]');

// 找到 React Fiber 上的 props
const key = Object.keys(editor).find(k => k.startsWith('__reactProps$'));
const props = editor[key];

// 深度 3-4 找到 onChange
const onChange = props.onChange ?? walkFiber(editor, 4).memoizedProps.onChange;

// 推荐用法（Slate 路径）
onChange(editorState);

如果是 HTML 来源（从 markdown 转的），用 html-to-draftjs 或 draft-convert 转 ContentState，再构造 EditorState 推送。

3. 博客园：Angular 注入协议——三件事缺一不可

博客园后台是 Angular（nz-tree-select 这类组件）。React 那套 setter 在这里会失效，必须三步走：

function injectAngularValue(el, value) {
  const proto = el.tagName === 'TEXTAREA'
    ? HTMLTextAreaElement.prototype
    : HTMLInputElement.prototype;

  // 1. 原生 setter (绕过 Angular 的 value tracking)
  const setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
  setter.call(el, value);

  // 2. 双事件派发
  el.dispatchEvent(new Event('input', { bubbles: true }));
  el.dispatchEvent(new Event('change', { bubbles: true }));

  // 3. blur 触发 Angular 提交
  el.blur();
}

少了第三步（blur），你点"发布"后会发现标题正文全为空。少了第二步的 change 事件，Angular 会以为你没改过。

4. 小红书：发布按钮必须用硬编码坐标

小红书的"发布"按钮走 icon + z-index，没法用 selector 稳定定位。视口必须设成 1440x900，按钮在 (1280, 850) 附近：

await page.setViewportSize({ width: 1440, height: 900 })
await page.mouse.click(1280, 850)

而且不能直接打开 /publish 或 /creator/note-editor（早被废弃），必须走 xiaohongshu.com/new/home → 头部 "发布笔记" 下拉箭头 ▾ → 选 "上传图文"。

5. Skill Workshop：让所有"反复做的事"变成可复用的 skill

OpenClaw 的 skill_workshop 是这套栈的灵魂。每个我跑通的发布协议，都打成 skill proposal 写进 vault：

skill_workshop action=create name=publish-zhihu \
  description="发布文章到知乎专栏 (zhuanlan.zhihu.com)" \
  proposal_content="$(cat ~/.../publish-zhihu.md)"

关键约定：

  • action=create 创提案；action=update 改已上线 skill；action=revise 改 pending 提案
  • 不能直接用 write / edit / shell 改 skill 文件——所有变更走 skill_workshop
  • description 控制在 160 字节内
  • 提案正文控制在 40000 字节内

效果：跨 session 复用。今天让 Agent 发小红书，明天新 session 它也能发，因为 skill 在 vault 里是结构化文档，不是对话历史里的临时脚本。

四、一个完整的"三平台同步发布"长什么样？

假设今天我写完一篇 blog，想同步到知乎 + 博客园 + 小红书：

[User] 帮我把这篇文章发到知乎、小红书、博客园
[Agent]
  1. supermemory recall zhihu publish        # 拉最新选择器
  2. supermemory recall cnblogs publish
  3. supermemory recall xiaohongshu publish
  4. read vault/drafts/2026-07-01-*/main.md  # 读 Markdown 草稿
  5. convert md -> html (可选)
  6. connect BrowserOS ws://localhost:9100   # 通过 Playwright
  7. for platform in [zhihu, cnblogs, xhs]:
       a. navigate to editor URL
       b. inject title (Angular setter / native setter)
       c. inject body (React Fiber onChange / Angular dual-event / ProseMirror execCommand)
       d. inject tags / topics
       e. upload cover image
       f. click publish (selector / hardcoded coords)
       g. wait for navigation / save URL
       h. for zhihu: 手动补一次话题 ⚠️

整套约 80-120 秒，三平台都是真实账号登录态。

五、Crawl4AI 在 Agent 栈里的真实用法

Crawl4AI 通过 mcporter 注册成 MCP server，由 OpenClaw 暴露成 110 个工具：

{
  "mcpServers": {
    "crawl4ai": {
      "command": "crawl4ai-mcp",
      "env": {
        "CRAWL4AI_API_URL": "http://localhost:11235",
        "BROWSER_CDP_URL": "ws://localhost:9100"
      }
    }
  }
}

重点是复用 BrowserOS 的 9100 端口——这样 Crawl4AI 启动的浏览器就是你日常登录的 Chrome。

高频工具：

  • crawl(url, extraction_schema)：单页抓取 + LLM 结构化抽取
  • deep_crawl(url, max_depth, filters)：整站爬
  • extract(url, css_selector)：CSS 选择器精确抽取
  • markdownify(url)：干净 Markdown 输出
  • browser.screenshot(url)：截图（绕过反爬时备选）

六、Supermemory 的真实用法：别把它当搜索框

新手最容易把 Supermemory 当成"高级 grep"，它的核心其实是结构化召回：

# 写
supermemory_store text="公众号排版优先用 1.6 倍行距、配图主色 #0EA5E9" category=preference
supermemory_store text="知乎发文后必须补至少 3 个话题，否则推荐归零" category=decision

# 读（强制协议步骤）
supermemory_search query="知乎发布流程" limit=5
supermemory_profile   # 看看系统对你了解多少

三条实战军规：

  1. 每个新 session 第一件事：supermemory_profile + supermemory_search 关键词
  2. 每条"以后还会用到"的结论：立刻 supermemory_store，不要等
  3. MEMORY.md / SOUL.md 写硬约束，supermemory 写偏好/事实/决策——两者职责分明

七、可执行清单

如果你也想搭这套，按这个顺序来：

  1. 装 BrowserOS（Chrome 持久化容器，跑在后台监听 9100）
  2. 装 OpenClaw，确认 tools, cron, agents capabilities
  3. 注册 Supermemory，写进 ~/.openclaw/config.yaml
  4. 搭 Obsidian vault：agents/skills/ + drafts/YYYY-MM-DD-*/ + templates/
  5. 装 crawl4ai-mcp + mcporter，配置 mcporter.json 指向 BrowserOS 9100
  6. 建第一批 skill proposal（知乎/博客园/小红书）
  7. 约定强制协议：每次发布前必须 supermemory recall <platform> publish
  8. 把 BrowserOS 的 cookie 登满

跑通前三个平台大约一周，每个平台踩 2-3 次坑后就稳定了。

八、一些真实的"坑"和"惊喜"

坑：

  • BrowserOS 的 CDP 端口是 9100，不是 9201（9201 是 RPC）
  • 知乎发文不带话题不推荐——必须补
  • 小红书的"发布"按钮坐标会随版本漂移
  • 博客园的标签输入需要模拟 Enter 形成 chip
  • Crawl4AI + BrowserOS 共用 9100 端口时，批量抓取会抢占登录态

惊喜：

  • 当 Agent 开始"记得"你上周说过什么，那种感觉真的像养了一只电子猫
  • vault + skill_workshop 的组合让"个人知识库"和"Agent runtime"是同一个文件系统
  • 跑通后，每周省下来的"键盘时间"约 6-8 小时
  • 心跳 + cron 把"周报生成""股票提醒""RSS 总结"自动化得干净利落

写在最后

2026 年，"个人 Agent 栈"已经不是能不能搭的问题，而是搭得有多稳的问题。这套组合拳的精髓总结成一句话：

让 Agent 看得见你的账本，记得住你的偏好，碰得到你的浏览器，读得懂你的知识库。

如果你也在搭，欢迎交流——我自己的 vault 在 ~/workroom/ai_knowledge 下，整理过的 skill 文档也会陆续公开。

— shenkang @ 2026.07.01

posted @ 2026-07-01 14:16  michaelleel1  阅读(3)  评论(0)    收藏  举报