代码实时预览插件：让ChatGPT生成的组件代码即刻可见
原创
想必，看到这篇文章的你会经常使用 gpt 去生成一些代码吧，不瞒你说，我也是，但是，有时候，我生成的代码，我想要看到他的效果，但是，我又不想去复制粘贴，然后去一个一个的创建文件，然后去一个一个的粘贴，这样的效率实在是太低了，所以，我就想到了，有没有一种插件，可以让我生成的代码即刻可见呢？
什么是更好的体验
想象一下，你对 GPT 提了一个问题，比如，你说，嘿，给我使用 React生成一个用户登录组件，有两个按钮，登录，注册。然后 GPT 就给你巴拉巴拉的输出一大堆代码。
但是，你看不到这个组件渲染的效果是怎么样的，如果你想看到效果，你大概的步骤可能是这样的：
- 准备执行环境，React，Vue，或者其他
- 复制代码
- 创建一个文件
- 粘贴代码
- 做一些连接，加载这个组件
或者，你可以借助一些在线的工具，比如 CodeSandbox，CodePen，JSFiddle，但是，这样的方式，你还是需要手动的去复制粘贴，然后去一个一个的创建文件，然后去一个一个的粘贴，这样的效率实在是太低了。
你有没有先过，如果鼠标悬浮在 GPT 生成的代码上，就可以看到这个组件的效果呢？这样的效率是不是会高很多呢？这个体验是不是会更好呢？
大声告诉我，这是不是你需要的？
代码实时预览插件
读到这里，我想你大概已经猜到了，我想干一件什么事情，没错，我就是想要开发一个插件，让 ChatGPT 生成的代码即刻可见。
步骤
创建浏览器插件：编写插件的manifest.json和必要的脚本文件。
捕获代码块：在网页中检测代码块，并添加鼠标悬停事件。
代码解析和渲染：根据代码块内容，识别代码类型并进行渲染。
实时预览：在用户悬停代码块时，显示实时预览效果。
部署和使用：将插件打包并安装到Chrome浏览器中，打开包含代码块的网页即可实时预览生成的组件效果。
实现
这里不啰嗦，关键两个问题，一个是如何捕获代码块，一个是如何实时预览。
捕获代码块
document.querySelectorAll('pre').forEach((block) => {
block.addEventListener('mouseover', (event) => {
// Show preview
});
block.addEventListener('mouseout', (event) => {
// Hide preview
});
});实时预览
const preview = document.createElement('div');
/// ...省略一大堆样式
block.addEventListener('mouseover', (event) => {
preview.style.display = 'block';
preview.innerHTML = block.innerText;
});
block.addEventListener('mouseout', (event) => {
preview.style.display = 'none';
});html 实时预览问题不大，但是，如果是 react，vue，或者其他框架，就需要借助于一些可以实时预览 react，vue，或者其他框架，想必做过组件化开发的人，应该第一时间会想到 Storybook，但是这么玩有一个坑，就是本地得启动一个 storybook 服务，然后浏览器插件预览代码需求时，通过 ws 通信的方式，把代码传递到本地的 storybook ，通过写文件的方式，然后 storybook 会自动刷新，这样的效率是不是有点低呢？
app.post('/preview', (req, res) => {
const { code } = req.body;
// 将代码写入到 Storybook 中的某个文件（例如，`generated.stories.js`）
fs.writeFileSync('./src/stories/generated.stories.js', `
import React from 'react';
export default { title: 'Generated' };
export const DynamicComponent = () => (
${code}
);
`);
res.json({ success: true });
});我踩过，大概的路子是这个鬼样子。
那么，有没有更好的办法呢？别忘记，我们上面还提到了 JSFiddle，我们是否可以在 chrome 插件中内嵌一个 jsfiddle 的 iframe 呢
https://docs.jsfiddle.net/embedding-fiddles
,然后，在 github 上创建一个 gist，然后，将代码写入到 gist 中，然后，将 gist 的 url 传递给 iframe，这样是不是轻松很多呢？
fetch('https://api.github.com/gists', {
method: 'POST',
headers: {
'Authorization': 'token YOUR_GITHUB_TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify(gistContent)
})
.then(response => response.json())
.then(data => {
const gistUrl = `https://jsfiddle.net/gh/get/library/pure/username/gist_id/${data.id}/`;
iframe.src = gistUrl;
});好吧，今天的黑科技就聊到这里了，插件写得比较烂，仅供自己使用，希望给你一个思路。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
