SyncCaster

SyncCaster 是一个浏览器扩展，帮助内容创作者将文章一键同步到多个博客平台。

🔒 本扩展完全本地运行，不收集、不存储任何用户信息。如需添加更多平台或改善同步准确度，欢迎提 Issue 或 PR。

✨ 特性

• 📝 内置 Markdown 编辑器，支持实时预览
• 🔍 智能采集任意网页文章内容
• 🚀 一键同步到 17+ 主流博客平台
• 🔐 自动检测各平台登录状态
• 📁 同步的标签页自动归入分组，便于管理
• 🎨 微信公众号同步时完整保留渲染样式
• 🧮 支持 LaTeX 数学公式渲染

🌐 已支持的平台

🛠️ 技术栈

• 前端框架: Vue 3 + TypeScript
• 构建工具: Vite + pnpm (monorepo)
• UI 框架: Naive UI + UnoCSS
• 数据存储: IndexedDB (Dexie.js)
• Markdown: marked + highlight.js + KaTeX + Mermaid
• 扩展 API: Chrome Extension Manifest V3

⚙️ 核心功能

1. 内容采集

• 从任意网页采集文章内容
• 智能提取标题、正文、图片、公式
• 基于 AST 的规范化处理（CanonicalAST）
• 转换为统一的 Markdown 格式

2. Markdown 编辑器

• 内置功能完整的 Markdown 编辑器
• 实时预览，支持代码高亮
• LaTeX 数学公式渲染（KaTeX）
• Mermaid 图表支持
• 多种主题样式

3. 多平台发布

• 支持 17+ 主流博客平台
• DOM 自动化模拟人工发布
• 统一的适配器接口
• 智能图片处理和上传

4. 账号管理

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

5. 任务管理

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

📁 项目结构

SyncCaster/
├── apps/
│   └── extension/              # Chrome 扩展应用
│       ├── src/
│       │   ├── background/     # Service Worker（后台脚本）
│       │   │   ├── index.ts              # 消息处理、任务调度
│       │   │   ├── account-service.ts    # 账号管理服务
│       │   │   ├── platform-api.ts       # 平台 API 调用
│       │   │   ├── publish-engine.ts     # 发布引擎核心
│       │   │   ├── publish-progress.ts   # 发布进度管理
│       │   │   ├── tab-group-manager.ts  # 标签页分组管理
│       │   │   ├── wechat-md-publish.ts  # 微信公众号发布
│       │   │   └── inpage-runner.ts      # 站内脚本执行器
│       │   ├── content-scripts/          # 内容脚本（页面注入）
│       │   │   ├── index.ts              # 入口
│       │   │   ├── auth-detector.ts      # 登录状态检测
│       │   │   ├── canonical-collector.ts # 内容采集器
│       │   │   └── collector-utils.ts    # 采集工具函数
│       │   └── ui/                       # 用户界面
│       │       ├── popup/                # 弹出窗口
│       │       ├── sidepanel/            # 侧边栏
│       │       └── options/              # 设置页面（主界面）
│       │           ├── views/            # 页面视图
│       │           │   ├── Dashboard.vue # 仪表盘
│       │           │   ├── Editor.vue    # Markdown 编辑器
│       │           │   ├── Posts.vue     # 文章管理
│       │           │   ├── Accounts.vue  # 账号管理
│       │           │   └── Tasks.vue     # 任务管理
│       │           └── components/       # 组件
│       ├── public/
│       │   └── md-editor/      # 内嵌 Markdown 编辑器
│       └── dist/               # 构建输出
├── packages/
│   ├── adapters/               # 平台适配器
│   │   └── src/
│   │       ├── base-adapter.ts # 适配器基类
│   │       ├── juejin.ts       # 掘金
│   │       ├── csdn.ts         # CSDN
│   │       ├── zhihu.ts        # 知乎
│   │       ├── jianshu.ts      # 简书
│   │       ├── cnblogs.ts      # 博客园
│   │       ├── wechat.ts       # 微信公众号
│   │       ├── 51cto.ts        # 51CTO
│   │       ├── tencent-cloud.ts # 腾讯云
│   │       ├── aliyun.ts       # 阿里云
│   │       ├── segmentfault.ts # 思否
│   │       ├── bilibili.ts     # 哔哩哔哩
│   │       ├── oschina.ts      # 开源中国
│   │       ├── toutiao.ts      # 今日头条
│   │       ├── infoq.ts        # InfoQ
│   │       ├── baijiahao.ts    # 百家号
│   │       ├── wangyihao.ts    # 网易号
│   │       ├── medium.ts       # Medium
│   │       └── index.ts        # 适配器注册
│   ├── core/                   # 核心模块
│   │   └── src/
│   │       ├── types/          # TypeScript 类型定义
│   │       ├── db/             # IndexedDB 数据库（Dexie）
│   │       ├── ast/            # AST 处理（DOM → 规范化）
│   │       │   ├── canonical-ast.ts   # 规范化 AST 定义
│   │       │   ├── dom-to-ast.ts      # DOM 转 AST
│   │       │   ├── ast-transformer.ts # AST 转换器
│   │       │   ├── ast-serializer.ts  # AST 序列化
│   │       │   └── pipeline.ts        # 处理管道
│   │       ├── collector/      # 内容采集
│   │       │   ├── canonical-collector.ts # 规范化采集器
│   │       │   └── platform-rules.ts      # 平台规则
│   │       ├── renderer/       # Markdown 渲染
│   │       │   └── mdh-core.ts # MDH 渲染核心
│   │       ├── wechat/         # 微信公众号专用
│   │       │   ├── wechat-formatter.ts # 格式化器
│   │       │   ├── renderer.ts         # 渲染器
│   │       │   └── themes.ts           # 主题样式
│   │       ├── assets/         # 资源处理
│   │       │   ├── image-pipeline.ts   # 图片处理管道
│   │       │   └── platform-strategies.ts # 平台策略
│   │       └── storage/        # 存储桥接
│   │           └── chrome-storage-bridge.ts
│   └── utils/                  # 工具函数
├── md/                         # Markdown 编辑器子项目
│   └── apps/web/               # Web 编辑器应用
├── docs/                       # 项目文档
│   ├── WECHAT_PUBLISH_FLOW.md  # 微信发布流程
│   ├── WECHAT_FORMATTER.md     # 微信格式化器
│   ├── CROSS_PLATFORM_PUBLISH.md # 跨平台发布
│   ├── CANONICAL_AST_UPGRADE.md  # AST 升级说明
│   ├── LOGIN_STATE_MANAGEMENT.md # 登录状态管理
│   └── ...
└── scripts/                    # 构建脚本

🔌 适配器架构

适配器接口

interface PlatformAdapter {
  id: PlatformId;           // 平台标识
  name: string;             // 平台名称
  kind: 'dom' | 'api';      // 适配器类型
  capabilities: {           // 平台能力
    supportsMarkdown: boolean;
    supportsHtml: boolean;
    supportsTags: boolean;
    supportsLatex: boolean;
    // ...
  };
  
  ensureAuth(ctx): Promise<AuthSession>;     // 认证检查
  transform(post, ctx): Promise<Payload>;    // 内容转换
  publish(payload, ctx): Promise<Result>;    // 发布
  
  dom?: {                   // DOM 自动化配置
    matchers: string[];     // 匹配的 URL 模式
    fillAndPublish(payload): Promise<Result>;
  };
}

发布流程

1. 用户选择文章和目标平台
2. 创建发布任务（Job）
3. 对每个目标平台：
   a. 获取适配器
   b. 检查认证状态
   c. 转换内容格式（Markdown/HTML）
   d. 处理图片资源
   e. 执行发布：
      - DOM 模式：打开目标页面，执行 fillAndPublish
      - API 模式：直接调用平台 API
   f. 记录结果
4. 更新任务状态
5. 标签页自动归入分组

📊 数据模型

CanonicalPost（统一内容模型）

interface CanonicalPost {
  id: string;
  title: string;
  body_md: string;      // Markdown 正文
  summary?: string;
  cover?: AssetRef;
  tags?: string[];
  categories?: string[];
  assets?: AssetRef[];  // 图片等资源
  formulas?: MathNode[]; // 提取的公式
}

Account（账号模型）

interface Account {
  id: string;
  platform: PlatformId;
  nickname: string;
  avatar?: string;
  status: 'active' | 'expired';
  cookieExpiresAt?: number;
  lastError?: string;
}

Job（发布任务）

interface Job {
  id: string;
  postId: string;
  targets: PublishTarget[];
  state: 'PENDING' | 'RUNNING' | 'PAUSED' | 'FAILED' | 'DONE';
  progress: number;
  logs: LogEntry[];
}

🚀 快速开始

方式一：下载预构建包（推荐）

适合普通用户，无需安装任何开发工具。

1. 前往 Releases 页面 下载最新版本
2. 下载 Source code.zip 文件
3. 解压 ZIP 文件到任意文件夹（如 D:\SyncCaster）
4. 打开 Chrome，访问 chrome://extensions/
5. 开启右上角的 开发者模式
6. 点击 加载已解压的扩展程序
7. 选择刚才解压的文件夹

提示：解压后的文件夹请勿删除，Chrome 需要持续访问该目录。

方式二：从源码构建

适合开发者或需要自定义修改的用户。

环境要求

• Node.js 18+
• pnpm 8+

构建步骤

# 克隆仓库
git clone [email protected]:RyanYipeng/SyncCaster.git
cd SyncCaster

# 安装依赖
pnpm install

# 构建扩展
pnpm build

加载本地扩展

1. 打开 Chrome，访问 chrome://extensions/
2. 开启右上角的 开发者模式
3. 点击 加载已解压的扩展程序
4. 选择 apps/extension/dist 目录

开发者命令

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

📖 开发指南

添加新适配器

1. 在 packages/adapters/src/ 创建新文件
2. 继承 BaseAdapter 或实现 PlatformAdapter 接口
3. 在 index.ts 中导出并注册
4. 在 packages/core/src/types/platforms.ts 添加平台 ID

// newplatform.ts
import { BaseAdapter } from './base-adapter';

export class NewPlatformAdapter extends BaseAdapter {
  id = 'newplatform' as const;
  name = '新平台';
  
  dom = {
    matchers: ['https://newplatform.com/editor*'],
    async fillAndPublish(payload) {
      // 实现 DOM 自动化逻辑
    },
  };
}

调试技巧

1. 查看后台日志: 右键扩展图标 → 检查 Service Worker
2. 查看页面日志: 在目标平台页面打开开发者工具
3. 调试模式: 修改 publish-engine.ts 中的 closeTab: false 保持标签页打开

📚 相关文档

• 微信公众号发布流程
• 微信格式化器
• 跨平台发布
• 规范化 AST 升级

🙏 致谢

感谢下面的开源项目：

• md

⭐ Star History

📄 License

本项目基于 MIT 许可证 开源。

如有问题或建议，欢迎提交 Issue 或 Pull Request。