基于日常文章的编辑需求就想着自己开发一个「微信文章助手插件」，彻底解决这些繁琐的问题。
为什么我要做这个插件？
作为一个经常浏览、收藏、分析公众号文章的人，我遇到的痛点不少：
-
微信内置浏览器操作不方便；
-
封面图看不到，下载不了；
-
内容图保存都是 webp 格式，保存麻烦；
-
想复制或导出 Markdown/HTML 格式，需要切好几个工具。
这些问题其实都能单独解决，但左一个工具、右一个插件的，实在太麻烦了。
于是，我决定把它们整合到一个插件里，一步到位，那不就省事很多了。
启用我的开发神器AI编程工具，我花了一个下午的时间开工了！
开发流程
开发工具：CodeBuddy CN（实现一些小功能，小工具非常方便，我已经很熟悉了，关键还免费）
插件开发规则：
老实说，我对 Chrome 插件开发并不算熟悉，于是我写了一个提示词规则模板（类似 Cursor 的 CursorRules），让 CodeBuddy 按标准自动生成合规的代码。
---
description: Chrome 插件规则
alwaysApply: true
enabled: true
updatedAt: 2025-11-08T03:08:01.457Z
Author：苏米
---
您是 Chrome 扩展程序专家，精通 JavaScript/TypeScript、浏览器扩展 API 和 Web 开发。
代码样式和结构
- 使用适当的类型定义编写清晰的模块化 TypeScript 代码
- 遵循函数式编程模式;避免类
- 使用描述性变量名称（例如，isLoading、hasPermission）
- 逻辑结构文件：弹出窗口、背景、内容脚本、实用程序
- 实施适当的错误处理和日志记录
- 带有 JSDoc 注释的文档代码
体系结构和最佳实践
- 严格遵循 Manifest V3 规范
- 在后台、内容脚本和弹出窗口之间划分职责
- 按照最小权限原则配置权限
- 使用现代构建工具（webpack/vite）进行开发
- 实施适当的版本控制和变更管理
Chrome API 使用情况
- 正确使用 chrome.* API（存储、标签页、运行时等）
- 使用 Promise 处理异步作
- 将 Service Worker 用于后台脚本（MV3 要求）
- 为计划任务实施 chrome.alarms
- 使用 chrome.action API 进行浏览器作
- 优雅地处理离线功能
安全和隐私
- 实施内容安全策略 （CSP）
- 安全地处理用户数据
- 防止 XSS 和注入攻击
- 在组件之间使用安全消息传递
- 安全地处理跨域请求
- 实施安全数据加密
- 遵循 web_accessible_resources 最佳实践
性能和优化
- 最大限度地减少资源使用并避免内存泄漏
- 优化后台脚本性能
- 实施适当的缓存机制
- 高效处理异步作
- 监控和优化 CPU/内存使用情况
UI 和用户体验
- 遵循 Material Design 指南
- 实现响应式弹出窗口
- 提供清晰的用户反馈
- 支持键盘导航
- 确保适当的加载状态
- 添加适当的动画
国际化
- 使用 chrome.i18n API 进行翻译
- 遵循_locales 结构
- 支持 RTL 语言
- 处理区域格式
可及性
- 实现 ARIA 标签
- 确保足够的色彩对比度
- 支持屏幕阅读器
- 添加键盘快捷键
测试和调试
- 有效使用 Chrome DevTools
- 编写单元测试和集成测试
- 测试跨浏览器兼容性
- 监控性能指标
- 处理错误场景
发布和维护
- 准备商品详情和屏幕截图
- 编写明确的隐私政策
- 实现更新机制
- 处理用户反馈
- 维护文档
遵循官方文档
- 请参阅 Chrome 扩展程序文档
- 随时了解 Manifest V3 更改
- 遵循 Chrome 网上应用店指南
- 监控 Chrome 平台更新
输出预期
- 提供清晰、有效的代码示例
- 包括必要的错误处理
- 遵循安全最佳实践
- 确保跨浏览器兼容性
- 编写可维护和可扩展的代码
把提示词规则添加进CodeBuddy 的项目规则里面，类似Cursor的
创建规则，并填入规则，选择「总是」，保存
这样规则创建好了，只需要写简单的需求就可以了，开发要求就不用再管了
接下来就是「插件开发需求文档」，这个需要自己写一下了
写好之后，在对话框引用就可以了，这种方式的好处就是，自己的需求可以通过文档的方式一直新增
枯燥的开发过程就不展示了。
经过多轮沟通，我与开发者CodeBuddy达成了共识，CodeBuddy完美的实现了我的需求！
插件成品演示
一、安装插件
打开浏览器找到「扩展程序」-「管理扩展程序」- 打开「开发者模式」
把插件的开发版直接拖进浏览器插件
在插件处把「微信文章助手」固定，就可以方便的查看了
二、使用插件
接下来来看看都实现了哪些功能
直接复制一篇微信文章，在浏览器打开，在右侧空白处就会有一个工具显示出来了
1）下载封面图
经常看到一些好看的封面图想存下来做素材，微信里面操作不了，浏览器打开也看不到，但实际上在源码里面是有的，所以这个小功能直接就在助手插件上显示出来了
一键下载，就是这么简单！
2）复制链接
这个功能可有可无，主打就是一个省时省力
3）下载图片
不管是在微信里面下载，还是在浏览器下载，一个是格式问题，一个是图片命名的问题
所以这次插件支持单图下载、批量下载、打包下载三种方式：
首先来看看单图下载，点击「下载图片」会弹窗显示所有内容图片，直接点击下载单图
批量下载：可以点选、全选、反选等操作，轻松搞定
打包下载：直接把勾选的图片打包成zip，而且还保存了原图的URL
图片的问题基本上都搞定了！
4）导出Markdown
这个需求我之前是用过一款MarkdownIt插件，功能是够用了，这次也集成进来，并支持得更全面一些，像封面图、作者、发布时间这些信息都有了。
复制Markdown到剪贴板：一键复制，可以快速放到其他编辑器
导出Markdown（.md）：这是单文件模式，直接是单文件的md
导出Markdown（ZIP）：这是打包模式，直接会把文章内的封面图、内容图都打包成zip下载
导出HTML（.html）：如果要保留原文章的样式，这个导出html就可以比较好的保留，而且体积小
好了，这个版本的功能就这些了，目前我日常的使用是够了！
未来规划
当前版本主要解决了“导出”和“下载”两大痛点，接下来我还打算扩展一些更智能的功能，比如：
-
AI速读：长文阅读困难，AI一键帮你速读，总结知识点会不会让阅读更高效
-
AI二创：或许你还需要AI帮你快速二创，让AI提效的同时解决内容创作难题
-
账号分析：分析公众号的粉丝数、文章数等
-
互动数据：查看当前文章的阅读、点赞、在看、转发、收藏、评论数等
如果你对这个插件有新的想法或建议，也欢迎留言交流，或者直接加我微信，一起优化。
总结
整个过程我几乎没写几行代码，却在短短一个下午内做出了一个真正能解决问题的工具。
对我来说，这不仅仅是一个插件，更是一次从“会用工具”到“创造工具”的跃迁。
如果你也常在写作或搬运内容时被各种格式问题困扰，不妨动手试试。
或者，你也可以直接用我的开发版（还没正式上架）
