💡 作者按：一个刚毕业的打工牛马，最近写公众号被排版折磨到忍无可忍，索性自己动手写了个浏览器插件。今天把它开源放出来，免费拿。先讲我踩过的坑，再讲它能干啥，最后讲怎么用——3500 字读完，你也能像我一样，从此告别公众号排版地狱。
一、写文章 10 分钟，调排版 2 小时
写公众号的同行，应该都被同一个坑埋过。
你在 Notion / VSCode / 飞书文档里把文章打磨得漂漂亮亮，标题层级清楚、表格整齐、代码块带高亮、引用块灰底加粗——一切都好。然后你打开公众号编辑器，”啪”地粘贴进去。
下一秒，你的心情大概是这样的：
- 标题字号没了，全变成正文
- 表格的边框没了，斑马色没了，变成一堆裸数据
- 代码块的灰底没了，变成普通段落
- 图片裂了，因为原网站用的是懒加载（
data-src），公众号编辑器不认 - 外链全在，但发文时会被审核拦下，理由是”含外部链接”
- 几十个
<div>嵌套，公众号编辑器把它们当成”未知元素”，渲染得歪七扭八
你写正文用了 10 分钟，调排版要花 2 小时。
我干了这个活才发现，第一次被一个所见即所得编辑器折磨成这样。一开始我以为是我的问题，后来在群里聊起来，发现做公众号的同行——不管你是写新闻、写财经、写情感、写技术——每个人都在重复手工劳动，每个人都恨这玩意儿恨得牙痒。
更气人的是网上的现成工具：
- 在线工具一半要会员，免费版限字数
- 把内容传到别人服务器，写敏感行业的天然不放心
- 浏览器扩展商店里那几个，要么不维护了，要么只能转 Markdown，转不了富文本网页
- 公众号官方的「秀米」「壹伴」，功能堆得花里胡哨，但核心痛点反而没解决
折腾了两周，我决定不忍了，自己写一个。
二、动手：看我两把刷子能干点啥实在的
最早的版本是个 Python 命令行脚本。
逻辑很简单：读剪贴板里的 HTML → 跑一套清洗流水线 → 写回剪贴板。一行命令搞定，理论上很丝滑。
实际用了几天，我自己都嫌麻烦：
- 写一篇文章要切换 7、8 次窗口
- 每次都要打开 PowerShell，敲
python wechat_compat.py --clip - Windows 上的 Python 是精简版，时不时跳出来一句
ModuleNotFoundError: No module named 'tempfile'，让你想骂街 - 团队里的非技术同事根本没法用——你让一个文案小姐姐天天开命令行？她当场辞职给你看
那天我在 PowerShell 前坐着，盯着报错看了一分钟，决定重新做一遍——做成浏览器插件。
理由很直接：
- 零门槛：装好就用，不用懂代码
- 零依赖：插件就 20KB，没有任何外部库，断网也能跑
- 零等待：右键一点 3 秒搞定，比开命令行快十倍
- 零隐私风险：所有转换都在你浏览器本地完成，一个字节都不往外传
一上午，把 Python 版的清洗流水线 1:1 移植成纯 JavaScript，写了 550 多行核心逻辑、4 个文件、2 个图标，打包成一个 20KB 的扩展。装到 Edge 上一测——稳了。
三、它到底能干啥？3 秒做完这 13 件事
打开浏览器插件的核心代码 converter.js，你会看到一条完整的转换流水线。我把它翻译成人话，就是它能自动帮你做这 13 件事：
| 痛点 | 插件做了什么 |
|---|---|
| 标题字号丢失 | h1~h6 自动补默认字号样式 |
| 图片显示裂了 | data-src 懒加载图片自动转回 src |
| 外链触发审查 | 外链 href 剥离，文字保留 |
| 锚点链接报错 | <a href="#xxx"> 自动转 <span> |
| div 嵌套渲染歪 | 所有 <div> 自动转成公众号识别的 <section> |
| 标题被当普通段落 | h1~h6 同样转 <section>，保留视觉权重 |
| CSS Grid 完全失效 | display:grid + repeat(n,1fr) 自动转 display:flex |
| Flex 子项错位 | 子项自动补 flex:1 1 calc(50% - gap) + min-width:230px |
| 表格边框斑马纹丢了 | 表头自动转 tbody.firstRow，公众号识别 |
| 内嵌样式失效 | 所有 CSS 自动内联到行内 style 属性 |
| 容器尺寸错乱 | section 自动补 box-sizing:border-box |
| 危险标签触发拦截 | script 类标签、HTML 注释全部剥离 |
| 字符冗余报警 | 多余分号合并、空属性删除、字体单引号转义 |
这套规则不是我拍脑袋定的，是过去半年我真实踩过的 13 个坑，一个一个填出来的。
举个具体例子。你在 Notion 里写了一个 3 列的卡片布局，用的是 CSS Grid——公众号编辑器完全不认 Grid，粘贴过去 3 张卡片会叠在一起，像三明治。
插件干了什么？
- 把
display: grid; grid-template-columns: repeat(3, 1fr)自动重写成display: flex; flex-wrap: wrap - 每个子卡片自动补上
flex: 1 1 calc(33.33% - gap)，再加一个min-width: 230px兜底 - 移动端阅读时，卡片宽度不够 230px 就自动换行——响应式照样保留
这是过去我手工调整需要 15 分钟的事，插件 0.3 秒搞定。
四、两种用法：右键复制 + 工具栏一键
我做了两种入口，应对两种典型场景。方式 A：右键转换（看别人文章，挑段落抄）
适用场景：你在知乎/CSDN/简书/即刻看到一段写得特别好的内容，想引用到自己公众号。
操作步骤：
- 在网页上选中你想要的段落（支持跨多段、含图、含表）
- 鼠标右键 → 菜单里点「转为公众号格式并复制」
- 页面右上角弹出一个绿色 toast：「✅ 已转换，复制成功」
- 切到公众号编辑器，
Ctrl+V粘贴——所见即所得，零调整
整个过程 3 秒。方式 B：工具栏一键（看到好的文章，整页转换）
适用场景：你在 Notion / VSCode 预览页 / 飞书文档 / 自己博客上写完一整篇文章，想原样搬到公众号。
操作步骤：
- 在文章所在的网页上，点浏览器右上角的插件图标
- 弹窗里点「转换整页并复制」
- 插件自动读取当前网页的 HTML 源码（不需要你手动选中）
- 处理完成后弹出提示，剪贴板已就绪
- 切到公众号编辑器粘贴——整篇文章一次到位
3000 字的文章，从点击到复制完成，3 秒。
五、效率对比：从 1.5 小时到 3 秒
我拿自己上周写的《某上市公司深度剖析》做了个对比测试。原文 4200 字，含 6 个表格、9 张图、2 个 Grid 卡片布局、若干外链。
| 排版环节 | 没插件（手工） | 用插件（自动） |
|---|---|---|
| 9 张图重新上传或改 src | 15 分钟 | 0 秒 |
| 6 个表格手动改 firstRow 样式 | 20 分钟 | 0 秒 |
| 标题字号逐个调（24 个标题） | 12 分钟 | 0 秒 |
| 2 个 Grid 卡片重新布局 | 25 分钟 | 0 秒 |
| 12 个外链手工剥离防审查 | 8 分钟 | 0 秒 |
| div 嵌套结构肉眼检查 | 10 分钟 | 0 秒 |
| 字号、行距、缩进等微调 | 18 分钟 | 0 秒 |
| 合计 | 1 小时 48 分 | 3 秒 |
这还只是单篇文章的对比。我每周固定写 3 篇公众号——以前要花一整个下午在排版上，现在 30 秒搞定。省下来的时间，我能多写一篇文章，能多陪家里人吃顿饭，能多看一场电影。
更重要的是：
- 手工排版会遗漏，插件不会
- 手工排版会疲劳走神，插件不会
- 手工排版会因为心情不好将就，插件永远是最佳状态
六、它是怎么做到的？（技术原理，不感兴趣可以跳过）
这一段写给同行里的技术朋友，非技术读者可以直接跳到下一节。
插件的核心是一段 550 多行的 JavaScript，叫 converter.js。它在浏览器沙盒里跑，纯前端、零依赖、零网络请求。流水线大致 13 步：
原始 HTML
↓ preClean 删 script、注释、危险标签
↓ inlineCSS DOMParser 解析 style 块，把所有 CSS 选择器匹配到的样式合并到元素 style 属性
↓ patchHeading h1~h6 补默认字号
↓ fixImageLazy data-src → src
↓ neutralizeLinks 外链 href 剥离 / 锚点 a 转 span
↓ divToSection 所有 div → section
↓ headingsToSection h1~h6 → section（保留视觉权重）
↓ gridToFlex CSS Grid → Flex
↓ addBoxSizing section 补 box-sizing
↓ processFlex Flex 子项补 calc + min-width
↓ simplifyTables 表头 thead → tbody.firstRow
↓ cleanup 冗余字符清理
剪贴板写入用的是浏览器标准 ClipboardItem(text/html + text/plain)——同时把富文本和纯文本写进剪贴板，公众号编辑器自动识别富文本，其他场景（比如纯文本编辑器）也能粘出来纯字。
整套方案最骄傲的一点：真正的隐私安全。
- 不传服务器
- 不需要登录
- 不收集任何信息
- 不挂任何外部脚本
- 断网照样能用
我自己写公众号经常聊上市公司财报、聊行业内部数据，这种隐私敏感性，市面上任何在线工具都给不了。这也是我必须自己写一个的根本原因。
七、零成本拿走：下载地址 + 3 步装好
文件大小：20KB（不到一张缩略图）
适用浏览器：Microsoft Edge、Google Chrome、以及所有 Chromium 内核浏览器（360、QQ 浏览器、Brave、Opera 等）
系统要求：Windows / macOS / Linux 均可
安装步骤：
- 解压
wechat-compat-ext.zip到任意目录（建议放D:\tools\或Documents下，别放下载文件夹防止哪天清空了） - 浏览器地址栏输入
edge://extensions/（Chrome 用户输入chrome://extensions/） - 打开右上角「开发者模式」开关 → 点左上角「加载已解压的扩展」→ 选你刚才解压的文件夹
完事。浏览器右上角会多出来一个绿色的「公」字图标，看到它就说明装好了。
下载方式：评论区扣「插件」两个字，我把云盘链接发你。或者直接私信我「公众号插件」，自动回复给你下载地址。
八、写给同行的一段话
我写这个插件，完全没想过卖钱。
我的本意是：遇到痛点 → 写工具 → 把工具喂给所有跟我有同样痛点的人。这个习惯从我刚入行写 BAT 脚本帮同事自动签到开始，到现在写浏览器扩展，一脉相承。
所以这个插件完全开源、完全免费、永远不收费。
我后续会继续维护，遇到不兼容的场景（比如某个新平台的 HTML 结构特殊），你在评论区或者私信反馈给我，我加完规则更新版本号，云盘链接换成新版。
我对自己的承诺：只要我还在写公众号，这个插件就一直更新。
如果它帮你省了时间，最大的回报不是钱，是你把这篇文章转发给同样在排版地狱里挣扎的朋友——让他们也能解放出来。
九、最后说点感想
干了公众号运营，最深的一个体会是：好工具不在于多复杂，而在于多准确地命中一个真痛点。
公众号排版这事，痛吗？痛得很。复杂吗？技术上其实不复杂，就是没人愿意花一上午认真做一个。
我做了。3500 字的故事讲完，希望它能在你下次写公众号时，帮你省下那 1 小时 48 分。
省下来的时间，去做你真正想做的事。
——诗蕊-Siri她姐，一个被公众号排版逼到自己写插件的打工人
👉 关注我，回复「公众号插件」获取下载链接
👉 觉得有用，点个「在看」让更多同行看到
👉 关注我，了解更多使用小工具
发表回复