2024.12-2025.2总结
工作成果
C端平台构建(2024.11.25-2025-12.16)
采用Next.js全栈+前后端分离架构。数据服务在后端，页面首次加载采用ssg，由server端请求后端api数据、后续客户端增量请求由客户端直接请求后端api获取数据。
auth部分复刻了Auth.js(middleware.ts, signIn(), signOut(), auth(), getSession()等方法的逻辑)
封装了server fetcher方法。由于所有数据均需要从后端api获取，为保证类型严格继承，在封装fetcher方法时使用复杂的泛型类型继承，将payload和response类型抽象统一，使api path与payload&response类型严格绑定。
封装了各种组件。
在ai实时生成与语音实时转文字的左右两个list间，做了关联滚动与自动滚动，鼠标悬浮在左右两侧任意item上，另外一侧自动滚动到对应item并高亮，长时间没有hover动作或主动点击启用自动滚动，两侧均滚动到底部并保持实时生成内容在底部可视区域内。使用memo和useCallback来优化性能。
多处使用Motion做复杂动画，简单动画使用tailwindcss实现。
技术栈及使用率（AI分析）
Next.js (React): 100%
TypeScript: 95%
Tailwind CSS: 90%
Ant Design: 30%
Radix UI: 20%
Zod: 10%
React Hook Form: 15%
Axios: 15%
Microsoft Cognitive Services Speech SDK: 5%
Stripe: 5%
Sentry: 2%
Chrome Extension开发(2024-12.17-2025-2.8)
技术难点太多，亮点也太多。做了一款自动填充网页表单的插件(one step 浏览器agent)。
基于样板间https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite。
借鉴了fuji-web部分实现。
实现了ai+rule双模式并行，rule支持注释时rule，执行时rule。
解决了非同源iframe label data获取。
实现了一次性获取和拼接整个页面的长截图。
注释绘制转移到后台背景脚本中通过纯坐标的方式实现实现，这里的【iframe内元素坐标问题】、【浏览器页面缩放导致的绘制偏差，不准确问题】、【全页长截图拼接和绘制注释问题】给我搞麻了，还好最后还是解决了。
在ai方案上加rule方案，同样给我搞的头皮发麻，递归问题，元素合并问题，规则解析与执行问题… 懂得都懂
目前做到这里，我在网上还没有看到有同一方向的开源项目做到这个进度的。
到这里，我认为已经可以理论上解决100%的浏览器agent的执行成功率问题了，在不考虑ai响应随机性的前提下。
验证码，下拉框，动态交互等都可以完美解决。
本来想让ai分析项目出一个详细汇报，但是项目太大，他都只说冰山一角。