【开源】SyncCaster：一次编辑，处处发布 —— 多平台文章同步 Chrome 扩展

你是不是也经历过这种循环：
写完一篇技术文章 → 发到掘金 → 再手动复制到 CSDN → 然后知乎 → 简书 → 公众号……

每个平台的编辑器不一样，格式要调整，图片要重新上传，标签要重新打。一篇文章同步到 5 个平台，可能要花掉半小时甚至更久。

更要命的是：公众号的富文本编辑器会把你的 Markdown 格式全部吃掉，代码高亮没了，数学公式变成乱码……

于是我做了 SyncCaster。

一、SyncCaster 是什么？

SyncCaster 是一个 Chrome 浏览器扩展，帮助内容创作者将文章 一键同步到 17+ 主流博客平台。
核心理念很简单：一次编辑，处处发布。
你只需要在 SyncCaster 内置的 Markdown 编辑器里写好文章，勾选要发布的平台，点击发布 —— 剩下的事情它来搞定。

🔒 完全本地运行，不收集、不存储任何用户信息。代码开源，数据自己掌控。

二、支持哪些平台？

目前已支持 17 个主流平台：

平台	Markdown	LaTeX 公式	备注
掘金	✅	✅
CSDN	✅	✅
博客园	✅	✅	需开启数学公式支持
51CTO	✅	✅
腾讯云开发者社区	✅	✅
知乎	✅	✅	富文本编辑器
简书	✅	✅
阿里云开发者社区	✅	✅
思否 (SegmentFault)	✅	✅
哔哩哔哩专栏	✅	✅
微信公众号	✅	✅	完整保留渲染样式，支持主题
开源中国	✅	✅
今日头条	✅	✅	富文本编辑器
InfoQ	✅	✅
百家号	✅	✅	富文本编辑器
网易号	✅	✅	富文本编辑器
Medium	✅	✅	英文平台

覆盖了国内主流的技术社区、自媒体平台，以及海外的 Medium。

三、核心功能

3.1 内置 Markdown 编辑器

不需要在外部编辑器写好再复制进来。SyncCaster 内置了功能完整的 Markdown 编辑器：

• 实时预览，所见即所得
• 代码高亮（highlight.js）
• LaTeX 数学公式渲染（KaTeX）
• Mermaid 图表支持
• 多种主题样式可选

写技术文章最头疼的公式和代码块，这里都能完美渲染。

3.2 智能内容采集

看到一篇好文章想转载？SyncCaster 可以从任意网页 一键采集文章内容：

• 智能提取标题、正文、图片、公式
• 基于 AST（抽象语法树）的规范化处理
• 自动转换为统一的 Markdown 格式
• 保留原文结构，不丢失格式

技术上，我们用 Mozilla 的 Readability 库提取正文，然后通过自研的 CanonicalAST 管道做清洗和标准化。这意味着无论原文来自哪个平台，采集后的格式都是干净统一的。

3.3 一键多平台发布

这是 SyncCaster 的核心能力：

1. 选择要发布的文章
2. 勾选目标平台（可多选）
3. 点击发布
4. 自动打开各平台编辑页，填充内容，提交

整个过程通过 DOM 自动化 实现，模拟人工操作。你可以看到每个平台的发布进度，失败了还能重试。

发布完成后，所有打开的标签页会 自动归入一个分组，方便你检查和管理。

3.4 微信公众号特别优化

公众号是最难搞的平台 —— 它的富文本编辑器会吃掉几乎所有 Markdown 格式。

SyncCaster 专门为公众号做了适配：

• 完整保留渲染样式：标题、代码块、引用、表格都能正常显示
• CSS 内联处理：把样式直接写进 HTML，绕过公众号的过滤
• 多种主题可选：不同风格的排版样式
• 数学公式支持：LaTeX 公式正常渲染

这部分参考了 doocs/md 项目的实现，在此致谢。

3.5 账号状态管理

• 自动检测各平台的登录状态
• Cookie 过期预警
• 一键刷新账号状态
• 支持重新登录

不用担心发布到一半发现某个平台掉线了。

3.6 任务队列与进度追踪

• 发布任务队列管理
• 实时进度条
• 详细日志记录
• 失败重试机制

发布 10 个平台也不慌，进度一目了然。

四、技术架构（给感兴趣的开发者）

SyncCaster 采用 monorepo 架构，主要模块：

SyncCaster/
├── apps/
│   └── extension/                  # Chrome 扩展主应用
│       ├── background/             # Service Worker
│       │   ├── scheduler.ts        # 任务调度
│       │   ├── publisher.ts        # 发布引擎
│       │   └── index.ts
│       │
│       ├── content-scripts/        # 内容脚本
│       │   ├── collector.ts        # 页面内容采集
│       │   ├── auth-check.ts       # 登录状态检测
│       │   └── index.ts
│       │
│       └── ui/                     # 扩展前端界面（Vue 3）
│           ├── pages/              # 页面（发布、配置、预览等）
│           ├── components/         # 通用组件
│           ├── store/              # 状态管理
│           └── main.ts
│
├── packages/
│   ├── adapters/                   # 平台适配层
│   │   ├── zhihu/                  # 知乎
│   │   ├── juejin/                 # 掘金
│   │   ├── weibo/                  # 微博
│   │   ├── wechat/                 # 微信公众号
│   │   └── ...                     # 共 17 个平台
│   │
│   ├── core/                       # 核心业务模块
│   │   ├── ast/                    # CanonicalAST
│   │   │   ├── parser.ts           # Markdown / HTML → AST
│   │   │   ├── transformer.ts      # AST 规范化处理
│   │   │   └── serializer.ts       # AST → 平台格式
│   │   │
│   │   ├── collector/              # 通用采集逻辑
│   │   │   ├── extractor.ts
│   │   │   └── normalizer.ts
│   │   │
│   │   ├── wechat/                 # 微信公众号专项逻辑
│   │   │   ├── editor-adapter.ts
│   │   │   └── image-uploader.ts
│   │   │
│   │   └── db/                     # 本地数据存储
│   │       ├── schema.ts           # IndexedDB 表结构
│   │       ├── migrations.ts
│   │       └── index.ts
│   │
│   └── utils/                      # 通用工具函数
│       ├── dom.ts
│       ├── time.ts
│       ├── logger.ts
│       └── types.ts
│
└── md/                             # 内嵌 Markdown 编辑器
    ├── editor/                     # 编辑器核心
    ├── plugins/                    # 扩展插件
    └── themes/                     # 样式主题

技术栈：

• 前端：Vue 3 + TypeScript + Naive UI + UnoCSS
• 构建：Vite + pnpm
• 存储：IndexedDB (Dexie.js)
• Markdown：marked + highlight.js + KaTeX + Mermaid
• 扩展：Chrome Extension Manifest V3

适配器设计

每个平台都有一个独立的适配器，继承自 BaseAdapter：

abstract class BaseAdapter {
  abstract id: PlatformId;
  abstract name: string;
  abstract capabilities: PlatformCapabilities;
  
  // 认证检查
  abstract ensureAuth(ctx): Promise<AuthSession>;
  // 内容转换（Markdown → 平台格式）
  abstract preEditPost(post, ctx): Promise<PlatformPayload>;
  // 发布
  abstract publish(payload, ctx): Promise<PublishResult>;
  
  // DOM 自动化配置
  dom?: {
    matchers: string[];  // URL 匹配规则
    fillAndPublish(payload): Promise<PublishResult>;
  };
}

想支持新平台？新增一个适配器文件，实现这几个方法就行。

五、SyncCaster 适合谁？

• 技术博主：写完文章要同步到掘金、CSDN、知乎、公众号……
• 自媒体作者：需要在多个平台分发内容
• 内容运营：管理多个平台账号，批量发布
• 知识管理者：想把散落各处的好文章统一采集归档
  如果你每周至少发布 1 篇文章到 3 个以上平台，SyncCaster 能帮你省下大量重复劳动。

六、快速开始

安装使用

# 克隆仓库
git clone https://github.com/RyanYipeng/SyncCaster.git
cd SyncCaster

# 安装依赖
pnpm install

# 构建扩展
pnpm build

然后在 Chrome 中加载扩展：

1. 打开 chrome://extensions/
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择 apps/extension/dist 目录

开发调试

pnpm dev    # 开发模式（热更新）
pnpm test   # 运行测试

七、为什么开源？

我相信好的工具应该是开放的。

• 数据自主：你的文章、你的账号信息，都存在本地 IndexedDB，不经过任何服务器
• 可扩展：平台适配器是插件化设计，社区可以贡献新平台支持
• 可信任：代码完全公开，你可以审计每一行

八、最后

SyncCaster 解决的是一个很具体的问题：让内容创作者专注于写作，而不是被「同步」这件事消耗。
如果你也被多平台发布折磨过，欢迎试试。
项目地址：
SyncCaster

由于谷歌商店审核时间较长，因此现在还未上线谷歌商店（审核中），后续上线会及时更新。
如果觉得有用，欢迎 Star ⭐️ —— 这会让我更有动力持续维护。
有问题或建议，欢迎提 Issue 或 PR。