一处写作,多平台分发:我给掘金做了一款开源 Chrome 插件

一处写作,多平台分发:我给掘金做了一款开源 Chrome 插件

"写作本该是一种心流享受,而分发却成了精神内耗。"

凌晨一点,你刚在掘金敲完最后一行技术干货,满心欢喜准备关电脑睡觉。突然你想起:"还要同步到微信公众号和 CSDN 呢......"

打开公众号后台,把 Markdown 粘进去------排版瞬间全崩,代码缩进全被吞掉,外链全变成无法点击的死文本,图片全被防盗链拦截,后台还弹窗催你手动裁剪 16:9、1:1、3:4 三套封面图。

等你把所有平台的格式调完、图片重新传一遍,一个多小时已经过去了。

作为长期深耕社区的技术博主,这种"写作两小时,搬砖一下午"的折磨,我忍受了整整三年。

市面上不是没有同步工具,但体验过一圈后,我发现它们往往走向了两个极端:要么要求你把账号密码甚至 Cookie 上传到第三方服务器(安全风险极高),要么自作主张直接公开发布(格式错乱根本来不及挽回)

为了彻底治好这个痛点,我花时间开发并开源了一款专注端侧安全的 Chrome 扩展------「文章摆渡 · Article Ferry」


01. 拒绝偷窥:我们给工具立下的"三条铁律"

在写第一行代码之前,我就为「文章摆渡」定下了极其克制的产品边界:

scss 复制代码
                    ┌─────────────────────────┐
                    │    掘金创作者本地浏览器   │
                    │   (无中转服务 / 零凭证托管)│
                    └────────────┬────────────┘
                                 │
                 ┌───────────────┴───────────────┐
                 ▼                               ▼
       ┌───────────────────┐           ┌───────────────────┐
       │   CSDN 草稿箱     │           │  微信公众号草稿箱 │
       │ (保留审核与发布权)│           │ (保留审核与发布权)│
       └───────────────────┘           └───────────────────┘

1. 绝对的端侧安全(Zero Credential Hosting)

市面很多同步工具需要搭一套云端中转服务器,要求用户授权托管账号密码或 Cookie。一旦服务器被黑,你的所有社交账号都将处于裸奔状态。

「文章摆渡」坚决不碰敏感的 cookies 权限,不存密码,不设任何云端中转服务器。 所有的内容解析、图片转存与接口通信,都在你自己的浏览器沙箱内完成,直接复用当前官方标签页的登录会话。开源透明,每一行代码都经得起检验。

2. 敬畏平台规则,坚决"只进草稿箱"

工具永远不该僭越作者的意志。一键自动公开发布看似省事,实则是灾难------每个平台有不同的敏感词规则、推荐机制与原创规范。

「文章摆渡」的定位非常清晰:它只负责消灭 90% 机械繁琐的格式清洗、图床转存与封面裁剪工作,把文章体体面面地送进草稿箱。最终的发布按钮,永远留给创作者自己。

3. 不留垃圾草稿(幂等更新)

网络抖动在所难免。很多脚本重试一次就会多出一篇一模一样的重复文章。「文章摆渡」内置了精准的本地草稿映射机制,二次同步优先更新已有草稿,并提供误覆盖二次确认机制,拒绝把草稿箱搞成垃圾堆。


02. 硬核解密:微信公众号这块"硬骨头",我们是怎么啃下的?

写过多端同步工具的人都知道,微信公众平台的富文本编辑器是公认的难伺候。为了让掘金的 Markdown 文章能够优雅、无损地呈现在公众号读者眼前,「文章摆渡」在底层做了大量的工程化重构:

痛点 ①:代码块缩进丢失、高亮错乱?

  • 传统做法 :简单把 HTML 塞进 pre code,在微信手机端直接换行跑偏、缩进全无。
  • 摆渡做法 :我们实现了一套微信专用的 AST 编译器,严格遵循微信公众平台官方编辑器的 section / pre / code 树状节点结构。代码逐行独立输出,完整保留原始 Tab 缩进、空行与特殊符号,并自动提取 Markdown 围栏语言标注,无论电脑端还是手机端,阅读体验都像官方内置代码块一样整洁舒服。

痛点 ②:必须手动上传裁剪三套封面图?

  • 微信草稿箱强制要求绑定 16:9、1:1、3:4 三套不同比例的封面,过去每发一篇都要打开剪图工具切三次。
  • 「文章摆渡」会自动读取掘金文章的封面图(或智能抓取正文首图),在浏览器端直接调用微信官方图片裁切 API,全自动生成 3 种比例并精准绑定草稿!即使原文章没有封面,也能平滑同步草稿,绝不中断发文流程。

痛点 ③:正文外链在微信里是死链接?

  • 微信环境限制非白名单外链直接跳转,强行插入链接会被过滤或失效。
  • 「文章摆渡」自动将正文中的所有外部超链接提取,规范化编译为学术级文末编号参考引用(Footnotes),既保留了开源出处与延伸阅读,又完全符合微信阅读习惯。

03. 对比:多平台同步体验进化

体验维度 传统手动搬运 😫 常见云端同步工具 ⚠️ 文章摆渡 (Article Ferry) ⛵
安全与隐私 安全,但累死人 需上传 Cookie / 密码至云端 纯本地浏览器环境,零凭证托管
微信排版 手动调样式、常错位 格式生硬、样式易污染 专有 AST 编译器,内联排版
代码块还原 缩进常丢失、无行节点 容易被 HTML 转义破坏 微信原生 section/pre/code 逐行结构
公众号封面 人肉切 3 种比例上传 往往缺失或不支持裁剪 自动上传并智能裁切 3 套比例
正文图床 防盗链报错,需逐张转存 依赖第三方代理图床 直通目标官方素材库,无水印提取
发布控制权 完全手动 容易粗暴自动公开触发违规 安全着陆草稿箱,人工确认发布
开源状态 大多闭源且收费订阅 MIT 协议完全开源,自由免费

04. 极简 3 步:如何将它放进你的浏览器?

无需任何后端部署,只需 30 秒即可在你的 Chrome 或 Edge 上安装完毕:

第一步:加载插件

  1. 前往 GitHub Releases 页面 下载最新发布的安装包并解压;
  2. 打开 Chrome 地址栏输入 chrome://extensions/,打开右上角 "开发者模式"
  3. 点击 "加载已解压的扩展程序",选择刚刚解压的目录。

第二步:登录平台

在当前浏览器中,确保已经正常登录了你的 掘金CSDN微信公众号 账号(插件直接复用当前标签页的登录态,无需二次扫码)。

第三步:一键摆渡

打开掘金文章编辑器(或进入「创作者中心 - 文章管理」),你会发现界面右上角多了一个清爽的 「同步多平台」 按钮:

scss 复制代码
[ 掘金文章 ] ──► 点击「同步多平台」 ──► 弹窗勾选 (CSDN / 微信公众号) ──► 确认摆渡!

稍等几秒钟,系统通知弹窗提示完成,点击即可直接进入对应平台的草稿箱。检查一下排版和封面,点击发布,搞定收工!


05. 写在最后:把时间还给写作

作为一个写了多年技术博客的工程师,我始终认为:技术创作者的核心价值在于沉淀思考、分享洞见,而不是把生命浪费在各家平台的格式差异与重复搬运上。

这个项目目前已经在 GitHub 完整开源,基于 TypeScript、esbuild 与 Vitest 构建,通过了 84 项严格的自动化集成测试

如果你也被繁琐的多平台分发折磨已久,不妨花一分钟试试这款小工具。如果觉得好用,别忘了顺手给项目点个 ⭐️ Star,也欢迎在评论区留下你希望支持的下一个平台(知乎、博客园已在规划中)!


💡 最后的彩蛋

实不相瞒------你此刻正在掘金(以及微信公众号、CSDN)阅读的这篇图文并茂、代码工整的文章,就是我写完后用「文章摆渡」一键摆渡过来的! 真实效果,如你所见。

相关推荐
货拉拉技术2 小时前
货拉拉开源Hadice:安卓 & 鸿蒙桌面调试工具
前端
程序猿DD3 小时前
OctaFuse Gateway 2.11.0:流式请求优化、用户折扣策略与错误契约升级
前端·后端
尾善爱看海3 小时前
《JavaScript 数组操作全攻略:12 类 API + 30 个实战场景 + 20 个避坑指南》
前端·javascript·面试
计算机魔术师3 小时前
Anthropic 估值冲 4 万亿,但企业客户已经偷偷换了便宜模型
前端
王六米。3 小时前
RAG知识库建设 文档解析 切分与索引如何衔接
服务器·前端·网络·企业数字化转型·智钳智能盒子
名字还没想好☜3 小时前
React 文件上传实战:预览 URL 回收、多文件逐个进度与拖拽放置区踩坑
前端·react·next.js
console.log('npc')3 小时前
06 — Model 层:数据模型与操作
前端·后端·node.js·express
linux_cfan4 小时前
16 · `custom-media-element`:属性拦截与转发
前端·javascript·音视频
右耳朵猫AI4 小时前
Web前端周刊2026W38 | React 19.3 发布、StyleX 深潜、jsdom 30.1 提速
前端·javascript·react.js·typescript·node.js