我做了一个为 ai 模型实现代码预览和实时交互的谷歌浏览器插件.

项目背景

在与 ChatGPT 等 AI 助手进行编程对话时，我们往往会遇到一系列阻碍编程效率的问题：

AI 生成的代码效果无法直观预览。 React 组件和 CSS 样式被分散在多个对话中，代码组织变得复杂。需要将代码片段手动复制粘贴到编辑器中，才能查看运行效果。多次复制粘贴导致代码格式可能混乱，不利于开发效率。

为了解决这些痛点，我开发了一款名为 AI Code Preview 的 Chrome 扩展。它让编程对话变得更加高效便捷，通过集成预览和管理功能，为前端开发者、学习者和技术支持人员提供直观、流畅的开发体验。

核心功能

实时代码预览支持一键预览 HTML/CSS/JS 组合代码的运行效果，让用户快速查看代码在页面中的效果。实时渲染 React 组件，避免频繁的复制粘贴操作。支持 Vue 单文件组件（.vue 文件）的即时预览，便于 Vue 开发者调试和查看组件。提供预览视图和源码视图之间的快速切换功能。

智能代码收集能自动识别 React/JSX 代码片段，方便前端开发者在不同对话中获取和整合代码。支持自动收集分散在多个对话中的 CSS 样式，便于样式的管理和优化。实现 React 组件与 CSS 样式的自动关联，避免手动整合的麻烦。支持将多个代码块组合在一起预览，便于整体查看和调试复杂组件。

便捷管理工具提供一键复制代码到剪贴板的功能，方便在开发环境中快速调用代码。支持本地文件下载，用户可以将生成的代码直接保存。支持实时重新加载预览，帮助开发者迅速查看改动效果。集成代码语法高亮显示，增强代码的可读性和调试体验。

使用场景

前端开发快速验证组件效果：在 AI 助手生成代码后，即可实时查看组件的外观和功能效果。实时调试样式和布局：在预览窗口中实时调整 CSS 和布局，优化设计。收集和整理代码片段：适合频繁使用代码片段的开发者进行高效的代码收集和管理。

学习交流直观理解代码运行结果：对于新手来说，能实时查看代码效果，有助于更快掌握知识点。便于分享代码示例：扩展工具支持的代码管理功能，使得与他人分享代码更方便。加速学习反馈循环：在学习过程中实时预览代码效果，加快理解和反馈速度。

技术支持快速验证解决方案：技术支持人员可以直接在预览中测试代码，迅速找到解决方案。实时展示修复效果：在协助解决问题时，可以即时查看修复效果，提高沟通效率。

技术特点

安全性使用隔离的 iframe 运行环境，确保代码的安全运行。无需依赖外部服务，所有代码预览和处理都在本地进行，保障数据安全。支持本地资源加载，不需要将代码片段上传到远程服务器。

易用性自动识别代码类型，无需手动指定代码语言。智能代码预处理，减少运行错误。友好的错误提示，帮助用户快速定位并修复问题。

扩展性支持多种代码类型，适应不同的前端框架和语言。提供灵活的预览配置，用户可以根据需求自定义预览效果。支持可定制的样式主题，满足个性化的需求。

为什么选择 AI Code Preview

提升效率节省了多次复制粘贴的时间，简化了开发流程。避免了环境配置和兼容性问题，使用更加便捷。实现了快速验证代码效果，使开发和测试流程更加流畅。

改善体验通过所见即所得的方式，开发者可以直接查看预览效果。实时反馈让用户能够更快发现和调整代码中的问题。提供便捷的操作体验，减少不必要的步骤。

专业可靠持续更新和维护，确保适应最新的开发环境和需求。提供社区支持，与更多开发者一起改进和优化。

安装使用

用户可以在 Chrome Web Store 搜索“AI Code Preview”进行安装。同时，建议安装 CSP Unblock 扩展，以获得最佳体验。在安装完成后，用户即可在 ChatGPT 等 AI 平台中直接使用该工具。

这是插件地址： https://chromewebstore.google.com/detail/ai-code-preview/loajhmclhgofappkpogllbhjpocgeoil?hl=en-US&utm_source=ext_sidebar

未来展望

我们将不断改进和扩展 AI Code Preview 的功能，计划添加更多框架支持、代码片段管理、自定义主题等。此外，我们也在积极考虑引入对 TypeScript 和 Python 语言的支持，以满足更多开发者的需求，为跨语言开发提供更加全面的预览体验。通过这些功能扩展，我们希望为用户提供更强大的功能和更好的用户体验。