利用通义灵码编写FlowFocus插件过程
本文记录了浏览器插件开发的全过程,主要包括:1)上传需求分析文档至Github;2)通过AI工具撰写并优化架构设计和开发计划文档;3)按计划进行模块化开发;4)测试阶段发现并修复了插件加载、配置保存等多项功能问题;5)持续优化UI体验,包括添加默认值、批量操作选项、界面布局调整等。整个开发过程通过Github进行版本控制,并借助AI辅助完成文档编写和问题修复。
插件简介
FlowFocus是一款Chrome浏览器侧边栏插件,帮助互联网用户高效获取网页文本,利用主流大模型对获取到的文本进行二次创作,提升日常工作效率。
需求分析
Github commit截图
将撰写好的需求分析文档上传到github
架构设计
Github commit截图
要求灵码撰写架构设计文档,并检查文档,对不合适或欠缺的地方要求灵码修改。
代码开发
Github commit截图
要求灵码撰写开发计划文档,并检查文档,对不合适或欠缺的地方要求灵码修改。
按照确定的开发计划文档逐个模块进行开发
测试与功能完善
Github commit截图
要求灵码撰写测试计划文档,方便后续有条理的进行测试。
打开浏览器,加载插件,发现加载不成功。
F12进入浏览器的开发者模式,发现有错误消息。
将错误消息反馈给灵码,让其修复Bug。
修复完插件加载是的报错信息后再次加载插件,发现插件无法弹出。
将这个现象描述给DeepSeek,DeepSeek给出了可能的原因,将这些原因反馈给灵码,让灵码检查并修复代码。
插件正常弹出后,试用大模型配置页面。
配置信息都是空白,填起来有点麻烦,给配置页面添加上默认值。
点击大模型配置标签页的“保存设置”按钮时,发现配置表单的内容都会被清空,
不利于后续的测试大模型链接和修改配置参数,所以需改变其初始实现的保存行为。
大模型提供商切换,意图是要填写下一个大模型配置了。
需将原配置的名称和API Key清除,同时帮用户填上下个模型的默认值。
保证不会误用配置参数的同时节省了用户精力。
大模型配置名称相同给用户提示,避免用户误操作。
给大模型配置记录表的每条记录配上复选框,方便后续批量操作。
编辑模式下保存大模型配置会新建一条记录
不符合编辑功能预期,进行Bug修复。
将改写功能标签页的大模型提示词默认值进行修改,变成英文翻译相关提示词。
给改写工作记录表的每条记录配上复选框,方便后续批量操作。
改写记录表只展示改写工作名称,其它细节信息展示出来不美观。
将改写记录复选框和标题对齐,进一步提升界面美观度。
添加改写提示词的清空按钮,方便用户撰写新的提示词。
按同样风格修改大模型配置记录列表的样式
希望点击插件图标时直接弹出插件侧边栏,不需要弹出页面,节省用户时间。
“获取选中内容”按钮的功能不稳定,学习用通义灵码编写的另一个插件的相关源码修复此插件的功能。
本来实现好的功能突然无效了,可能是我让灵码调整一波界面的时候误改了,只好重新修复一下。
调整改写功能标签中三个文本框的高度,让界面更紧凑一些。
更多推荐
所有评论(0)