AI 驱动下的 Google Chrome 扩展迅速开发实践：以屏幕标注软件的实现为例

截屏2025-11-22 23.18.48.png

CCF程序员大会码力全开：方向1-工具提效-屏幕标注工具 | 围巾哥萧尘

作者： 围巾哥萧尘

摘要：本文记录了利用百度文心快码（Comate）参与 CCCF 大会“马力全开 AI 加速”活动的作品开发过程。该任务目标是解决日常工作中的信息反馈效率问题，聚焦于工具提效方向。经过 AI 加速开发，在大约两天的时间内，成功完成了一款功能强大的 Google Chrome 屏幕标注扩展插件的开发与迭代。本文重点阐述了从简洁提示词到机制建立的整个过程，以及在调试和优化中遇到的核心技术问题及其解决办法。

截屏2025-11-22 23.12.18.png

一、 引言（Introduction）

为响应百度文心快码（Comate）CCF 大会的号召，即在“最佳提效”、“最佳创意”等方向利用 AI 提速开发，大家选定了开发一款实用的屏幕标注扩展插件。该插件旨在为用户提供快速的网页标记能力，支持画笔、矩形、箭头以及可移动的文字标注等效果。本次创建的核心价值在于验证和展示 AI 工具在复杂应用开发，特别是 Chrome 扩展开发领域的加速能力。

二、 开发方法与 AI 加速实施（Methodology and Implementation）

整个项目启动后，开发速度的关键依赖于文心快码的代码生成能力。

1. 初始代码生成：直接向文心快码输入了一个简洁的核心提示词，要求其生成插件的框架和特性。就是项目没有从零开始编写基础框架，而

  • 使用的提示词为：“你是一个谷歌扩展插件开发专家，开发一个屏幕标注的谷歌插件”。

截屏2025-11-22 23.11.24.png文心快码在收到提示后，研发速度相当快，迅速完成了插件的初步开发。这使得开发者的主要工作重点从架构搭建和功能实现，转移到了后续的调试和优化上。

截屏2025-11-22 23.23.09.png

2. 开发者主要工作重心： 在 AI 完成初步开发后，开发过程的主要精力被投入到**修 bug（修正程序错误）**上，这一环节花费了主要的时间。此外，还涉及到插件图标的设计和制作。图标是使用“豆包”设计工具完成的，随后利用开发者此前开发的 Smart Icon Converter 工具完成了图标尺寸的制作。

smart-icon-converter.vercel.app/

截屏2025-11-22 23.24.07.png

三、 调试、挑战与应对（Debugging, Problems, and Solutions）

虽然 AI 实现了快速生成，但在实际应用和用户体验方面，仍需要人工介入解决一系列问题。

遇到的问题 (Problem)解决办法 (Solution)来源
P1：编码与乱码问题初始生成的代码存在能力不可用的现象。进行了针对性的bug 修复（修掉 bug） 。
P2：界面本地化缺失插件初始界面全部是英文的，没有中文支持。手动调整，使其完成中文标注的适配。
P3：工具交互性不足多个标注工具的细节存在缺陷，影响用户体验：a. 箭头尺寸过小。b. 画笔工具不是所需的方块形状。c. 文字标注完成后无法很好地移动。针对性地结束了修改，修复了箭头和画笔的尺寸和形状问题，并克服了文字标注的移动功能。
P4：机制取舍与完成度插件中的截屏功能一直未能很好地实现，影响了产品的整体完成度。为确保产品整体的完成度更强，决定将该未能良好实现的功能去除。
四、 结论（Conclusion）

通过本次屏幕标注 Chrome 扩展的创建实践，我们成功展示了文心快码在提升创建效率方面的巨大潜力。借助 AI 快速生成主体代码，开发人员得以将精力集中在解决细节、优化用户体验和修复具体 Bug 上，从而在**极短的时间内（约两天）**交付了一个功能完整的工具。这一过程有力地印证了“码力全开 AI 加速”的主题，并期望在本次征文中能争取到“最佳提效”的奖项。

项目最终达成了颜色选择、画笔、矩形、箭头和可移动文字标注等核心功能。

类比总结：

如果将传统的软件开发比作从零开始建造一座复杂的建筑，那么本次利用文心快码的 AI 加速开发过程，就像是 AI 敏捷给出了一个高度精密的预制框架。开发者无需在基础结构上耗费时间，而是可以立即跳到内饰装修、细节调整和解决结构小缺陷的环节，极大缩短了从概念到交付的周期。