很多人觉得开发Chrome插件是程序员的专利，其实不然。只要你会用AI工具，30分钟就能开发一个属于自己的浏览器插件。本文手把手教你用Cursor开发一个「网页内容一键复制为Markdown」的工具插件，看完就能动手做。
为什么用Cursor开发Chrome插件
传统的Chrome插件开发需要深入理解Chrome扩展API、编写复杂的manifest.json配置、调试困难需要反复刷新浏览器。
用Cursor开发Chrome插件的优势：AI实时补全代码减少手动编写量，可以用自然语言描述需求AI生成代码，支持边开发边预览调试效率高，不需要死记硬背API用到哪里问哪里。
开发准备
工具准备：Chrome浏览器、Cursor编辑器（官网下载）、一个简单的文本编辑器。
创建项目结构：在电脑任意位置新建文件夹命名为markdown-clipper，内部需要manifest.json、popup.html、popup.js、content.js、icon.png这几个文件。
核心功能开发
manifest.json是Chrome插件的配置文件，告诉浏览器插件的基本信息。需要设置manifest版本为3、插件名称、版本号、描述、权限和弹出页面等配置。
popup弹窗页面是点击插件图标后弹出的界面，包含转换按钮和结果显示区域。用HTML和CSS编写简洁的界面设计。
popup.js处理按钮点击事件，向content script发送消息获取网页内容并复制到剪贴板。
content.js负责提取网页内容并转换为Markdown格式，包括移除无关元素、提取标题和正文段落、组装Markdown字符串。
测试与调试
加载插件到Chrome的步骤：打开chrome://extensions/，开启开发者模式，点击加载已解压的扩展程序，选择创建的文件夹。
调试技巧：右键点击插件图标选择审查弹出内容查看popup控制台，在扩展页面点击service worker链接查看后台日志，修改代码后点击刷新按钮。
优化建议
添加更多转换规则：处理代码块保留代码块标记，处理图片转换为图片格式，处理链接转换为链接格式。
添加快捷键支持：在manifest.json中添加键盘快捷键配置，设置为Ctrl+Shift+M可以快速调用插件。
添加复制成功提示：加入浏览器通知功能，让用户清楚知道操作是否成功。
发布到Chrome商店
注册Chrome Web Store开发者账号需支付5美元一次性注册费，打包插件为zip文件，登录Chrome开发者后台上传打包文件，填写插件描述截图隐私政策后提交审核，通常1至3个工作日完成审核。
结语
用Cursor开发Chrome插件关键是善用AI辅助：不确定API怎么用直接问AI，不知道某个功能怎么实现描述需求让AI帮你写，遇到bug把错误信息贴给AI分析。30分钟的开发时间大部分花在调试和优化上核心代码可能只需要5至10分钟。动手试试你会发现AI编程比想象中简单得多。
今日行动：打开Cursor创建上述项目结构复制代码试试效果。遇到问题直接在Cursor里问AI，95%的问题都能解决。
|
