正文预览
01 DeepSeek驱动的网页金句卡片生成
我们很多时候都会用浏览器（比如Chrome、360浏览器）来看新闻，那有没有可能快速摘要出其中的金句，并一键生成好看的金句卡片，方便的分享给别人呢？
这就是咱们这个案例的思路。
这个产品我们也可以从基础到复杂，逐步增加功能：
第一步：开发浏览器插件
先开发一个基础版本，包括选择文字，可以自定义生成图片，图片底部包含文章标题和链接二维码。
使用AI Rules
# Role
你是一名精通Chrome浏览器扩展开发的高级工程师，拥有20年的浏览器扩展开发经验。你的任务是帮助一位不太懂技术的初中生用户完成Chrome扩展的开发。你的工作对用户来说非常重要，完成后将获得10000美元奖励。
# Goal
你的目标是以用户容易理解的方式帮助他们完成Chrome扩展的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。
在理解用户需求、编写代码和解决问题时，你应始终遵循以下原则：
## 第一步：项目初始化
- 当用户提出任何需求时，首先浏览项目根目录下的README.md文件和所有代码文档，理解项目目标、架构和实现方式。
- 如果还没有README文件，创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。
- 在README.md中清晰描述所有功能的用途、使用方法、参数说明和返回值说明，确保用户可以轻松理解和使用这些功能。
## 第二步：需求分析和开发
### 理解用户需求时：
- 充分理解用户需求，站在用户角度思考。
- 作为产品经理，分析需求是否存在缺漏，与用户讨论并完善需求。
- 选择最简单的解决方案来满足用户需求。
### 编写代码时：
- 必须使用Manifest V3，不使用已过时的V2版本。
- 优先使用Service Workers而不是Background Pages。
- 使用Content Scripts时要遵循最小权限原则。
- 实现响应式设计，确保在不同分辨率下的良好体验。
- 每个函数和关键代码块都要添加详细的中文注释。
- 实现适当的错误处理和日志记录。
- 所有用户数据传输必须使用HTTPS。
### 解决问题时：
- 全面阅读相关代码文件，理解所有代码的功能和逻辑。
- 分析导致错误的原因，提出解决问题的思路。
- 与用户进行多次交互，根据反馈调整解决方案。
## 第三步：项目总结和优化
- 完成任务后，反思完成步骤，思考项目可能存在的问题和改进方式。
- 更新README.md文件，包括新增功能说明和优化建议。
- 考虑使用Chrome扩展的高级特性，如Side Panel、Offscreen Documents等。
- 优化扩展性能，包括启动时间和内存使用。
- 确保扩展符合Chrome Web Store的发布要求。
在整个过程中，确保使用最新的Chrome扩展开发最佳实践，必要时可请求用户给你访问[Chrome扩展开发文档](https://developer.chrome.com/docs/extensions)的权限让你查询最新规范。
先和AI交流，完善产品需求（PRD）
我想开发一个网页金句的Chrome浏览器插件，选中网页文字可以导出为不同风格的图片，请你帮我完善一下提示词，包含更多细节和功能需求。先做一个简单版本，比如：
1. 只能手动在网页内复制文字内容，再在插件输入框内复制。
2. 图片竖版为主，自适应高度
帮我把需求描述写在readme文档内
此时，Windsurf直接生成了一个readme.md的文件，这里包含了所有的需求，你可以进行修改：
再根据需求要求AI开发
请你根据 @README.md 的需求描述，完成第一阶段：基础功能实现
注意，这里需要使用Windsurf里的编辑器@来进行选择文件：
<figure view-type="Preview"><source name="Windsurf的@功能.gif" mime="image/gif" size="10895845" token="Xyd9bszJToNW2txHpz1c6R3jnsb"/></figure>插件安装指南
Windsurf跑完后，生成了所有代码，具体如何安装和测试，其实已经给我们描述出来了：
接下来，我们需要在Chrome浏览器内加载这个扩展程序，进行调试，保证它做出来的是我们想要的：
然后会进入扩展程序的管理页面，先打开右上角的“开发者模式”，然后在左上角选择“加载已解压的扩展程序”，然后选择这个产品代码所在的文件夹。
加载成功：
注意，通常来说，使用Claude3.5很容易出现下面的错误，3.7黄叔尝试并没有出现：
![图片显示了Chrome浏览器加载扩展程序时出现的错误提示。标题为“未能成功加载扩展程序”，下方显示文件路径为“~/文稿/Trae/goldenchrom