Claude Code案例-浏览器插件开发之notion to markdwon剪切板(已开源)

💡 大家好,我是可夫小子,《小白玩转ChatGPT》专栏作者,关注AI编程、AI自动化和自媒体。

背景

我自己的主力笔记软件是使用notion,有时候需要把笔记转成markdown格式发布到其他平台,比如知乎、CSDN是直接支持Markdown格式。notion笔记自带导出为Markdown的功能 ,但获得的是markdown格式和本地图片,但这不能完全满足我的需求,而我期望的是把markdown内容copy到剪切板。于是借助Claude Code,两个小时就手撸了一个可用的浏览器插件。现在我也开源了,地址我写在文章后面,接下来看看我是怎样一步一步完这个小项目的。

方案调研

已有方案的缺陷

我首先在搜索引擎内搜索是否有相关工具或者插件。在排名前几的网页都是使用github 的action来实现下载的(github.com/marketplace...),他们的使用场景是把markdown文章放到个人网站下面渲染。这不是插件,也不是网站,是需要配置github的action,这么调研下来,还是没有复制到粘贴板的方案。

我之前用于Notion MCP和Picgo + 腾讯对象存储COS的接口,于是我想到通过Claude Code来编写一个插件,整合之前单个使用到技术,主要用到的技术栈如下。

🛠️ 技术栈

  • Notion API : @notionhq/client - 官方 Notion API 客户端:用于拉取Notion的文章内容
  • Markdown 转换 : notion-to-md - Notion 块到 Markdown 的转换:把Notion格式转成标准的Markdown格式
  • 云存储 : cos-js-sdk-v5 - 腾讯云对象存储 SDK:用于图片的处理,这是重点。
  • 构建工具: Webpack 5:这是Claude Code选择方案。

界面

Vibe Coding过程

我会把我整个与claude code对话的过程展示出来,有一些冗余,目的是让你看到我是如何一步一步做出来,希望能给到你一些启发,自己动作做一个小工具,会比看万篇教程更有收获。

我先给一些背景资料供他研究。

javascript 复制代码
阅读这个项目https://github.com/marketplace/actions/notion2markdown-action,协助我配置好这个项目,让我快速实现notion文章转成Markdown

很快,他就总结了这个项目技术方案,接着我就引导他改造成chrome插件。

javascript 复制代码
根据这样的机制,实现一个chrome浏览器插件,把Notion文章,一键拷贝为Markdown格式文章,要注意图片的处理,可以通过picgo+腾讯云COS 对象存储

现在就开始真正大量时间大概5-8分钟在编程上,先规划,再一步一步实现,其实就完成一初稿。接着我就让他打包,生成插件。

javascript 复制代码
你构建一下这个项目

这个打包过程,如果电脑缺少工具或者包,就会自己去下载。打包完成之后,我自己上手调试一下。发现出错了,第一步加载就失败了,就把错误日志发给他。

javascript 复制代码
加载失败:[Pasted text #1 +5 lines]

他分析了日志,就修复代码,我再次尝试,加载正常了。接下来我就把相关配置信息填好,测试功能,又出错了,同时,都交给Calude Code。

javascript 复制代码
设置好相关参数,执行出错:Error: Failed to execute 'fetch' on 'Window': Illegal invocation

仍然出错,继续交给它自己反思。

javascript 复制代码
仍然出相同的错误。Error: Failed to execute 'fetch' on 'Window': Illegal invocation。

经过几次迭代,就完成了基本功能,非常丝滑。有了背景让他学习,基本上就按照可靠的技术路线来实现,你只要测试把关即可。

接着,我又让它把代码提交到github仓库,写README文档,提交commit这些都让它操作

javascript 复制代码
完成了基本功能,请把chrome-extension 相关源码整理,创建git仓库,并创建一条初始提交,并上传到github上。我的github账号koffuxu,我应该配置了github的公钥,如果没有,请通知我配置。

这就完成了基本功能,github地址如下:

后面我自己还迭代了几个版本,兼容了Cookie的方案,还在调试中,大家感兴趣可以接着开发。Token方式是完全可用,就是配置要复杂一点。

后记

市场上一定有未被满足的长尾需求,你要善于发现,如果发现不了,就从自己的生活点滴出来来提炼。

有了AI编程,一定自己动手做,当你开始code时,比看万篇教程都有收获。你解决了一个问题,或者是其他人的痛点,那你离变现就很近了。


🧨 彩蛋

我的《AI编程与自动化 》2026训练营正式开营,以AI编程为驱动,让每个个体都拥有自己的小产品、小生意。训练营已积累了我过去三年200篇+的教程和案例。都是我自己实操总结,都是使用心得,并非复制网上过时的信息。现在以每周至少三篇的更新频率,让你获得最新、最接地气的AI资讯和教程。

知识库模块


相关推荐
kyriewen14 分钟前
我数了 647 条大厂前端 JD:AI 不再只是加分项
前端·程序员·ai编程
四六的六26 分钟前
一次改回去越界的沙箱复盘:配置恢复了,token 还活着,检测器漏了最关键的那条
人工智能·openai·agent·个人开发·ai编程·ai大模型·ai产品
墨林陌43 分钟前
AI 热点日报(2026-10-20):DeepSeek V4.1-Flash落地,Meta开源816B大模型,国产AI芯片涨价20%-50%
openai
ZzT1 小时前
Claude Code 和 Codex 组队协作 12 天:1648 条消息里,真讨论只占 15%–25%
ai编程·claude
伊泽瑞尔ts1 小时前
从零了解 Langfuse 7:Prompt 管理
ai编程·ai可视化
Vex2une1 小时前
PowerShell 7.5新特性解析:跨平台自动化与AI集成实战指南
ai编程·powershell·安全合规·自动化脚本·.net 9·跨平台运维·ssh远程
举个栗子。2 小时前
443 条断言全绿,输入框却 9 次提交都不能用:一次关于「假护栏」的复盘
微信小程序·自动化·ai编程
9i编程2 小时前
用 Trae 吃透掘金文章:从拉取 Demo 到跑起 Three.js 太阳能电场,AI 问出来的学习路径
人工智能·openai·ai编程
Ward的AI产品实战17 小时前
多个订阅接多个 Agent 怎么管?我从 CC-Switch 迁移到了开源 AI 网关 Magpie(上篇)
开源·ai编程
qinglongcn18 小时前
为什么 Agent 循环是 for{} 而不是 DAG——架构选择的深层原因
agent·ai编程