腾讯codebuddy助力，craft生成一个chrome插件居然只要一句话....

前言

在日常的技术创作中，我一般在Chrome中使用在线的markdown编辑器创作，经常会复制一些常用的文本，例如自我介绍、片尾图链接等，每次都需要切换到其他软件复制文本，然后粘贴到浏览器中，感觉超级麻烦。所以我就想开发一款Chrome浏览器插件，专门用来管理这些常用的文本。

但是我对于浏览器插件的开发经验基本为零，想到之前使用腾讯云AI代码助手零基础开发过一个vscode插件，在新版本CodeBuddy发布之后，还是迫不及待想要体验一下，是否可以零代码帮助我完成浏览器插件的开发。

Codebuddy

在开发之前，我们先了解一下Codebuddy，首先可以访问Codebuddy官网

在我们常用的IDE（例如Vscode、IDEA、Visual Studio等）中，可以通过插件的方式轻松安装Codebuddy。在官网，也可以看到Codebuddy支持当前主流的编辑

Codebuddy为开发者赋能，提供了强大的AI编程能力：

1. 智能补全代码信息：可以对 IDE 中的业务代码进行全面解析，在随后的代码编程中进行自动补全。
2. 精准修复错误代码：可以快速检查代码中的语法错误和逻辑错误，帮助开发者规范代码格式。
3. 清晰解释既有代码：帮助开发者快速理解初始代码，降低理解成本，便于在既有代码上进行延展开发。
4. 按需生成单元测试：根据函数、方法、内容逻辑生成相关的测试代码，快速实现单元测试。
5. 智能审查本地代码：提供智能评审辅助功能，帮助开发者及时发现并解决本地代码变更可能引入的问题。
6. 清晰理解工程代码：支持 @workspace 和 #Codebase 能力，可对工程进行提问，快速获取代码仓库相关的问题答案。
7. 人工智能技术对话：集成对话问答功能，支持技术咨询，并可一键插入代码到编辑器中。
8. 支持自定义指令：允许设置常用代码片段或函数，调整 AI 响应方式，提升团队代码一致性。
9. 支持创建 RAG 知识库：企业可构建专属知识库，提升研发问答和智能编码的精准度。
10. 支持对话大模型接入和切换：除腾讯混元大模型外，还支持 DeepSeek 等大模型接入，优化 AI 编程体验。

安装

因为平时用 IDEA 比较多，这里就以 IDEA 为例，安装 Codebuddy 插件。在设置中找到 plugins，搜索 Codebuddy。

点击安装，然后再右侧边栏我们就可以看到 Codebuddy 已经安装完成。

点击即可进入对话窗口。

Craft

开发智能体 Craft 是 Codebuddy 新增的功能，输入自然语言指令，支持文件多选，AI 深度理解，自主完成多文件代码生成和改写，即刻落地可执行应用。与 Chat 对话功能相比，跨文件上下文理解、批量代码生成与修改、智能代码优化与重构是 Craft 的核心功能，尤其是在生成代码工程中表现突出，能够显著提升开发者的效率。

换句话说就是：Chat 能帮你生成一个文件的代码，Craft 能帮你一个项目的代码。Craft 的主要功能是将用户的需求拆解，然后自动生成项目，Chat 更多的是对项目的整体理解和技术问答。

登录

腾讯云代码助手CodeBuddy，需要登录之后才能使用。点击底部栏图标，找到登录按钮，跳转登录页面扫码登录。

在登录之后，就可以使用腾讯云代码助手CodeBuddy进行代码开发。

插件开发

目前腾讯云代码助手CodeBuddy已经集成了3个大模型，分别hunyuan、DeepSeek-R1以及DeepSeek-V3，用户可以选择任一模型来完成对话，Craft 当前使用的是 DeepSeek-V3。

在Craft的对话框中，输入我的开发需求，Codebuddy 就会分析用户需求，然后就会给出用户解决方案，并生成相应的代码和自动创建项目文件。

开发一个Chrome浏览器插件，主要功能：1. 用户可以新增、删除和编辑一些常用文本 2. 点开插件每条文本以列表形式展示 3. 用户通过点击文本内容或者文本右侧末尾的复制按钮进行复制

选择DeepSeek-V3模型，输入上面提示词：

如上图所示，我的项目textCopyManager是一个空文件夹，Codebuddy 在分析了我的需求之后，帮我创建了4个文件，其中包括：配置文件 manifest.json、页面设计代码文件 popup.html、逻辑控制代码文件 popup.js，以及样式代码文件 popup.css。

在生成的过程中，codebuddy 在程序变更前会默认询问你是否进行修改，我们也可以选择自动修改文件，这样codebuddy就会自动进行修改。

这样，codebuddy不仅帮我们创建了代码文件，还在在代码编辑区帮助我们快速生成了代码，创建项目文件之后，Codebuddy会询问用户是否接受这些变更，点击变更之后，代码就会应用到文件中。

然后就帮助我们创建了html文件。

接着就是js逻辑代码文件。

最后就是css样式文件：

创建图标

在manifest.json配置文件中，我们看到图标文件都在icons目录下，但是上面只创建了四个代码文件，没有创建icons目录，所以运行这个命令。

点击运行，自动在终端中执行命令来进行icons目录创建。Craft 会打开一个终端，执行命令，如下图所示，当执行错误之后，codebuddy会接收到终端返回的错误日志信息，然分析并给出解决方案。

虽然创建了icons目录，但是里面还没有png图标文件，codebuddy 在思考之后，也考虑到了这个问题，帮我们创建base64格式的图标文件。

这里我们也可以使用AI工具帮助我们生成png图标文件，修改名称后放入icons目录下。

代码生成

然后就帮助我们创建了html文件。

接着就是js逻辑代码文件。

最后就是css样式文件：

插件测试

在Codebuddy完成插件代码开发和图标准备之后，后面也给出了测试方案。在这里我们也可以单独向 Codebuddy 询问测试方案。

我们在Chrome地址栏中输入 chrome://extensions/ 进入到扩展管理页面，点击 加载已解压的扩展程序，选择 textCopyManager 文件夹。

如图，一个名为文本快捷管理的扩展已经被加载，我们在扩展程序中轻松找到这个插件。

但是我们发现插件好像乱码了，猜测可能是html中编码的问题，我们把乱码问题描述给Codebuddy。

Codebuddy根据提示词对乱码问题进行了修改。

如之前所料，修改成UTF-8之后就解决了编码导致的乱码问题。

然后重新加载插件进行测试，如下图所示，添加、复制、删除这些基础的功能都已经具备。

插件优化

最后我们来完成插件的细节优化，我们可以让Codebuddy进行样式上的调整。

UI优化

可以将文字按钮修改成图标，这样看起来更简洁，添加一个过度动画效果，见提示词输入到codebuddy中。

对功能按钮进行一些调整，去掉原有的复制按钮，双击文字就可以进行复制。

告诉Codebuddy我想将整体样式修改成便利贴风格：

最终效果图如下：

动图看一下插件功能：

逻辑优化

为了避免存入重复的文本，这里让Codebuddy帮我实现重复检测逻辑：

最后测试，效果如下：

如图，这个插件完成了基本的功能：

1. 点击文本框会复制当前文本
2. 隐藏文本框，悬停会弹出，可以添加文本
3. 删除文本
4. 文本单行显示，超长则会隐藏避免溢出
5. 重复文本检测

结语

本篇文章主要描述了如何使用codebuddy，来零代码实现一个Chrome浏览器插件。在整个开发过程中，我没有写一行代码，只是在最开始创建了一个空目录，并将插件功能描述告诉了Codebuddy ，然后只要等待就可以了。

当出现问题或者需要优化的时候，我们也只需要描述清楚反馈给codebuddy即可。在codebuddy强大AI能力的加持下，轻轻松松完成了插件的开发。

@CodeBuddy