自动上传工具 — 微信公众号图文草稿自动导入

概览

将本地已排好版的 HTML 文件自动导入微信公众号草稿箱，省去手动复制粘贴的重复操作。

核心能力：
- 解析 HTML 文件中的标题、摘要、正文、封面引用
- 自动打开浏览器、登录公众号、创建图文草稿
- 填写标题、注入正文、上传封面、填写作者
- 截图确认、保存为草稿

环境依赖

• Node.js >= 18.x
• Playwright（脚本自动检测安装）

使用方式

安装依赖

cd {skill_dir}
npm install playwright
npx playwright install chromium

执行发布

# 完整命令（HTML路径 + 封面路径）
node scripts/publish-wechat.js /path/to/article.html /path/to/cover.png

# 如果封面在HTML同级目录且命名为 cover_xxx.png，可省略第二个参数
node scripts/publish-wechat.js /path/to/article.html

完整的14步工作流

本 Skill 的精髓在 scripts/publish-wechat.js，它执行以下 14 个步骤：

> ✅ = 自动执行 ⏳ = 需人工参与

正文注入策略

编辑器自动检测优先级：
1. contenteditable — 直接设置 innerHTML
2. iframe body — 遍历所有 frame，找到编辑器 iframe
3. 手动粘贴兜底 — 都失败时提示用户粘贴

关键代码片段

// 登录等待
for (let i = 0; i < 180; i++) {
  await page.waitForTimeout(1000);
  const url = page.url();
  if (url.includes('cgi-bin/home') || url.includes('token=')) break;
}

// Token 提取
const token = (page.url().match(/[?&]token=(\d+)/) || [])[1];

// 正文注入
await page.locator('[contenteditable="true"]').first()
  .evaluate((el, html) => { el.innerHTML = html; }, htmlContent);

HTML 文件格式要求

脚本通过以下 CSS 类名解析内容，生成的 HTML 需要包含这些结构：

<!-- 标题 -->
<div class="article-title">标题文字</div>

<!-- 封面引用 -->
<img src="cover_xxx.png" alt="封面">

<!-- 摘要（可选，第一个灰色段落） -->
<p style="color:#888; font-size:14px;">摘要文字</p>

<!-- 正文段落 -->
<div class="article-body">
  <p>正文内容...</p>
</div>

错误处理

• 文件不存在 → ❌ 报错退出
• 登录超时(>3分钟) → ❌ 关闭浏览器退出
• 封面缺失/上传失败 → ⏳ 暂停30秒让用户手动操作
• 正文注入失败 → ⏳ 暂停30秒让用户手动粘贴
• 运行时异常 → ❌ 输出错误堆栈后退出

Skill 包结构

auto-upload-tool/
├── SKILL.md                    # 本文件
├── scripts/
│   └── publish-wechat.js       # 发布脚本（14步完整流程）
└── references/
    └── workflow.md             # 流程图 + 常见注意事项