AI相关系列二：Chrome自动写博客

配置

guide:https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance

In Chrome (>= M144), do the following to set up remote debugging:

1. Navigate to chrome://inspect/#remote-debugging to enable remote debugging.

2. Follow the dialog UI to allow or disallow incoming debugging connections.

Trae配置提示词

结果：https://boommanpro.cn/post/trae-chrome-browser-automation

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

请先写一篇关于trae如何操作chrome的文章，然后编一个标题，然后操作浏览器 https://boommanpro.cn/console/posts ，新建一篇博客，将内容写入并且发布

# Trae 自动发布博客操作指南

本文档总结了使用 Trae 浏览器自动化能力发布博客的操作经验和最佳实践。

## 一、整体流程

1. **打开博客管理页面** - 使用 `new_page` 或 `navigate_page` 打开目标网站
2. **新建文章** - 点击 "New" 按钮进入编辑器
3. **填写标题** - 使用 `fill` 工具填写标题输入框
4. **填写内容** - 使用 `type_text` 工具输入文章正文
5. **设置元数据** - 点击 "Settings" 按钮设置 Categories、Tags、Slug 等
6. **保存发布** - 点击 "Save" 保存，然后点击 "Publish" 发布

## 二、关键操作技巧

### 2.1 页面快照获取

每次操作前都应获取最新的页面快照，了解当前页面结构：

```
使用 take_snapshot 工具获取页面快照
快照会显示所有可交互元素及其 uid
```

### 2.2 填写表单

**标题填写** - 使用 `fill` 工具：

- 直接填写，会覆盖原有内容
- 示例：`fill(uid, "标题内容")`

**正文填写** - 推荐使用 `type_text` 工具：

- 先点击编辑器区域获取焦点
- 然后使用 `type_text` 输入内容
- `fill` 工具在某些编辑器中可能无法正确保存内容

### 2.3 修改已有内容

**修改 Slug**：

1. 点击 Settings 按钮打开设置面板
2. 点击 Slug 输入框
3. 使用 `Meta+A` (Mac) 或 `Ctrl+A` (Windows) 全选
4. 使用 `type_text` 输入新的 Slug

### 2.4 保存与发布

- **Save** - 保存文章内容，不改变发布状态
- **Publish** - 发布文章（如果已发布则更新）
- 建议先 Save 再 Publish，确保内容已保存

## 三、常见问题与解决方案

### 3.1 内容未保存

**问题**：使用 `fill` 工具填写正文后，预览时发现内容为空。

**解决方案**：

1. 点击编辑器区域获取焦点
2. 使用 `type_text` 工具输入内容
3. 点击 Save 按钮保存

### 3.2 Slug 格式问题

**问题**：默认 Slug 是中文标题的拼音，不够专业。

**解决方案**：

1. 打开 Settings 面板
2. 全选 Slug 输入框内容
3. 输入英文 Slug（如：`trae-chrome-browser-automation`）

### 3.3 弹窗干扰

**问题**：版本更新提示等弹窗遮挡操作元素。

**解决方案**：

- 点击关闭按钮（通常是 × 或 "Close"）
- 或使用 `Escape` 键关闭弹窗

### 3.4 元素 uid 变化

**问题**：页面刷新或操作后，元素 uid 发生变化。

**解决方案**：

- 每次操作前重新获取页面快照
- 使用最新的 uid 进行操作

## 四、最佳实践

### 4.1 操作顺序

```
1. 打开页面 → take_snapshot
2. 点击新建 → take_snapshot
3. 填写标题 → fill
4. 填写内容 → click 编辑器 → type_text
5. 打开设置 → take_snapshot
6. 设置 Categories/Tags/Slug
7. 保存设置 → take_snapshot
8. 保存文章
9. 发布文章
10. 验证结果 → take_snapshot
```

### 4.2 内容准备

在操作浏览器之前，先准备好：

- 文章标题
- 文章正文（Markdown 格式）
- Categories（分类）
- Tags（标签）
- Slug（英文链接）

### 4.3 错误处理

- 如果操作失败，重新获取快照后重试
- 如果元素找不到，检查是否有弹窗遮挡
- 如果内容未保存，尝试使用 `type_text` 替代 `fill`

## 五、工具对照表

| 操作     | 推荐工具                            | 说明                             |
| ------ | ------------------------------- | ------------------------------ |
| 打开页面   | `new_page` / `navigate_page`    | 打开或导航到目标 URL                   |
| 获取页面结构 | `take_snapshot`                 | 获取所有可交互元素及 uid                 |
| 点击元素   | `click`                         | 通过 uid 点击元素                    |
| 填写标题   | `fill`                          | 直接填写输入框                        |
| 填写正文   | `type_text`                     | 模拟键盘输入，更可靠                     |
| 全选内容   | `press_key` + `Meta+A`          | Mac 使用 Meta，Windows 使用 Control |
| 关闭弹窗   | `click` 或 `press_key("Escape")` | 关闭对话框或弹窗                       |
| 截图验证   | `take_screenshot`               | 验证页面状态                         |

## 六、工作流模板

当用户提供主题后，按以下流程执行：

1. **生成文章内容**
   - 根据主题撰写文章标题
   - 撰写完整的文章正文（Markdown 格式）
   - 确定合适的 Categories 和 Tags
   - 生成英文 Slug
2. **执行发布流程**
   - 打开博客管理页面
   - 新建文章
   - 填写标题和内容
   - 设置元数据
   - 保存并发布
3. **验证结果**
   - 确认文章状态为 Published
   - 确认内容已正确保存
   - 确认 Slug、Categories、Tags 设置正确

***

*本文档基于 Trae 浏览器自动化实践经验总结，持续更新中。*