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 快速提供了一個高度精密的預製框架。開發者無需在基礎結構上耗費時間，而是可以立即跳到內飾裝修、細節調整和解決結構小缺陷的環節，極大縮短了從概念到交付的週期。