AI 驱动下的 Google Chrome 扩展快速开发实践：以屏幕标注工具的实现为例🧣
CCF程序员大会码力全开：方向1-工具提效-屏幕标注工具 | 围巾哥萧尘🧣
作者： 围巾哥萧尘
摘要： 本文记录了利用百度文心快码（Comate）参与 CCCF 大会"马力全开 AI 加速"活动的作品开发过程。该项目目标是解决日常工作中的信息反馈效率问题，聚焦于工具提效 方向。通过 AI 加速开发，在大约两天的时间内，成功完成了一款功能强大的 Google Chrome 屏幕标注扩展插件的开发与迭代。本文重点阐述了从简洁提示词到功能实现的整个过程，以及在调试和优化中遇到的核心技术问题及其解决办法。
一、 引言（Introduction）
为响应百度文心快码（Comate）CCF 大会的号召，即在"最佳提效"、"最佳创意"等方向利用 AI 提速开发，我们选定了开发一款实用的屏幕标注扩展插件。该插件旨在为用户提供快速的网页标记能力，支持画笔、矩形、箭头以及可移动的文字标注等功能。本次开发的核心价值在于验证和展示 AI 工具在复杂应用开发，特别是 Chrome 扩展开发领域的加速能力。
二、 开发方法与 AI 加速实施（Methodology and Implementation）
整个项目启动后，开发速度的关键依赖于文心快码的代码生成能力。
1. 初始代码生成： 项目没有从零开始编写基础框架，而是直接向文心快码输入了一个简洁的核心提示词，要求其生成插件的框架和功能。
- 使用的提示词为： "你是一个谷歌扩展插件开发专家，开发一个屏幕标注的谷歌插件"。
文心快码在收到提示后，开发速度相当快，迅速完成了插件的初步开发。这使得开发者的主要工作重点从架构搭建和功能实现，转移到了后续的调试和优化上。
2. 开发者主要工作重心： 在 AI 完成初步开发后，开发过程的主要精力被投入到**修 bug（修正程序错误）**上，这一环节花费了主要的时间。此外，还涉及到插件图标的设计和制作。图标是使用"豆包"设计工具完成的，随后利用开发者此前开发的 Smart Icon Converter 工具完成了图标尺寸的制作。
smart-icon-converter.vercel.app/
三、 调试、问题与解决（Debugging, Problems, and Solutions）
虽然 AI 实现了快速生成，但在实际应用和用户体验方面，仍需要人工介入解决一系列问题。
| 遇到的问题 (Problem) | 解决办法 (Solution) | 来源 |
|---|---|---|
| P1：编码与乱码问题 | 初始生成的代码存在功能不可用的现象。 | 进行了针对性的 bug 修复（修掉 bug） 。 |
| P2：界面本地化缺失 | 插件初始界面全部是英文的，没有中文支持。 | 手动调整，使其完成中文标注的适配。 |
| P3：工具交互性不足 | 多个标注工具的细节存在缺陷，影响用户体验：a. 箭头尺寸过小。b. 画笔工具不是所需的方块形状。c. 文字标注完成后无法很好地移动。 | 针对性地完成了修改，修复了箭头和画笔的尺寸和形状问题，并解决了文字标注的移动功能。 |
| P4：功能取舍与完成度 | 插件中的截屏功能一直未能很好地实现，影响了产品的整体完成度。 | 为确保产品整体的完成度更强，决定将该未能良好实现的功能去除。 |
四、 结论（Conclusion）
通过本次屏幕标注 Chrome 扩展的开发实践，我们成功展示了文心快码在提升开发效率方面的巨大潜力。借助 AI 快速生成主体代码，开发人员得以将精力集中在解决细节、优化用户体验和修复具体 Bug 上，从而在**极短的时间内（约两天）**交付了一个功能完整的工具。这一过程有力地印证了"码力全开 AI 加速"的主题，并期望在本次征文中能争取到"最佳提效"的奖项。
项目最终实现了颜色选择、画笔、矩形、箭头和可移动文字标注等核心功能。
类比总结：
如果将传统的软件开发比作从零开始建造一座复杂的建筑，那么本次利用文心快码的 AI 加速开发过程，就像是 AI 快速提供了一个高度精密的预制框架。开发者无需在基础结构上耗费时间，而是可以立即跳到内饰装修、细节调整和解决结构小缺陷的环节，极大缩短了从概念到交付的周期。