前言

这两年AI发展十分火爆，我也在思考有没有什么可以用得上并且可以练手的项目。由于我的blog一直是先通过写在石墨文档上，再抽时间转成本地markdown文档调整格式，再上传到服务器。虽然石墨文档可以直接下载为markdown文件，但会导致有些图片无法显示，以及大于3M的文档无法导出。于是笔者有了刚好把这一套流程编写成一个Skill的想法，顺便熟悉和了解一下MCP的使用。在操作过程中了解到其实有一个github的开源项目rush-shimo-cli（https://github.com/kanyun-inc/rush-shimo-cli）可以直接提取石墨文档内容，但本文还是以Chrome MCP为例，后续再通过tokens的使用速度以及操作流程的便利性考虑是否进行优化。

梳理流程

  1. 通过 Chrome 浏览器打开指定网页（复用已登录的 Chrome 账号，可能用 Chrome MCP）
  2. 把网页文字和图片转换成规定格式的 .md 文件并保存
  3. 图片先通过 PicGo 上传到图床，再以网络图片 URL 写入 MD
  4. 保存并提炼为 Skill

这里我们使用TraeCode进行整个流程的操作。

浏览器抓取

第一步 启动Chrome远程调试

这是让 MCP 能“看到”已登录 Chrome 的前提。在 Chrome 地址栏输入：

chrome://inspect/#remote-debugging

img

第二步 在 TraeCode 中添加 MCP 服务器

打开 TraeCode 设置 → MCP → 添加服务器。推荐直接从市场搜索 “Chrome DevTools” 添加；

img

如果手动配置，JSON 如下：

1
2
3
4
5
6
7
8
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

由于石墨文档是私密并未选择公开，所以关键参数是 --autoConnect，它会让 MCP 自动连接到已经开启远程调试的 Chrome 实例，从而复用登录态。

配置过程中发现node.js版本过低，我们去nodejs.org官网下载合适的版本

img

img

第三步 绑定到智能体

配置完成后，在创建或编辑 TraeCode 的自定义智能体时，记得在工具选项中勾选 chrome-devtools MCP，智能体才能调用它。

img

img

第四步 使用Chrome打开目标网页并提取内容

接下来我们使用AI写的内容提取脚本，并使用以下提示词：

用chrome浏览器打开 https://shimo.im/docs/9030Jv5rP0fBN0kw 。打开目标网页后，等待页面加载完成，调用 chrome-devtools 的 evaluate_script 工具，执行以下函数，先执行滚动脚本触发图片懒加载，然后执行提取脚本，返回 {title, bodyText, imgUrls, bodyHtml}:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
() => {
  // 1. 正文容器
  const editor = document.querySelector('div.hk-editor-content[contenteditable="true"]');
  if (!editor) {
    return { error: '未找到正文容器，请确认页面已加载完成' };
  }

  // 2. 标题：按优先级尝试多个候选，最后降级到 document.title
  const titleCandidates = [
    document.querySelector('[class*="doc-title"]'),
    document.querySelector('[class*="title"] input'),
    document.querySelector('input[class*="title"]'),
    document.querySelector('h1')
  ];
  let title = '';
  for (const el of titleCandidates) {
    if (el) {
      const t = (el.value || el.innerText || '').trim();
      if (t) { title = t; break; }
    }
  }
  if (!title) {
    // 降级：去掉石墨常见的后缀
    title = document.title.replace(/\s*[-–—]\s*石墨文档.*$/, '').trim();
  }

  // 3. 正文文字：innerText 只取可见文本，天然排除容器外元素
  const bodyText = editor.innerText;

  // 4. 正文图片：收集容器内所有 img 的 src（含懒加载 data-src）
  const imgUrls = Array.from(editor.querySelectorAll('img'))
    .map(img => img.src || img.getAttribute('data-src') || '')
    .filter(url => url && !url.startsWith('data:')); // 排除 base64 内联图

  return {
    title,
    bodyText,
    imgUrls,
    bodyHtml: editor.innerHTML   // 可选：保留结构，便于后续转 MD 时还原标题层级
  };
}

其中 div.hk-editor-content[contenteditable="true"] 是我们通过F12开发者工具获取到的正文容器。

img

保存为markdown文件

TraeCode很聪明，直接问我们是否需要导出成带图片的Markdown，我们直接导出

img

顺便它也提到了图床的问题，虽然石墨的外链不一定会失效，但是毕竟容量有限，这也是笔者为什么要自己弄图床的原因。

当然图床也可能哪天失效，所以在这次的任务基础上，我们将图片下载到本地改成相对路径做个备份，再上传到图床，并且新建一个使用了图床图片的博客版本，将该版本部署到网站。

img

img

将图片上传到图床

这里我们使用picgo-uploader命令连接PicGo的桌面端的方式，虽然也有其他的方式，这里我们先暂且按下不表。

我们在PicGo设置中，启用Server，端口默认为36677（理论上该Server是默认启用的）

img

在终端中全局安装

npm install -g picgo-uploader

img

在TraeCode中配置MCP

1
2
3
4
5
6
7
{
  "mcpServers": {
    "picgo-uploader": {
      "command": "picgo-uploader"
    }
  }
}

img

在工具中我们可以看到已经安装成功了。

img

接下来让智能体调用命令即可

img

保存并提炼为 Skill

让智能体将刚才的整个流程提取成Skill：

img

剩下的细枝末节就可以慢慢的修改了。

后记

虽然最开始我的流程梳理是使用网页版免费DeepSeek做的，但是使用DeepSeek-V4.1-Flash模型的时候觉得它确实太智能了，基本预判了我后续的操作。

最后我们再尝试使用rush-shimo-cli的方式进行文档内容的抓取。

由于个人无法获得石墨文档开发者API，所以就没有后续的新的选择了┓( ´∀` )┏