如何在 Codex 中集成 ChatGPT 网页对话？手把手教程

你是不是也遇到过这种情况：在写代码时想问问 AI 怎么优化一个函数，结果还得切到浏览器打开 ChatGPT 网页版，来回切换账号还要翻墙，实在是太麻烦了？最近看到不少朋友在讨论如何在 Codex 这种编码工具里直接集成 ChatGPT 的网页对话功能，今天就把这个方案给大家拆解一下。

为什么要在 Codex 里用 ChatGPT 网页版？

编辑器左边写代码，右边是 ChatGPT 窗口的界面布局

首先说清楚，Codex 本身的 AI 插件虽然方便，但有时候模型的“智力”或者联网能力不如直接用 GPT-4 的网页版来得直接。特别是遇到最新技术栈的问题，网页版的信息更新往往更及时。集成后，你的编辑器左边写代码，右边就是 ChatGPT 窗口，这种“左右逢源”的开发体验，一旦用惯了就回不去了。

利用反向代理服务去除响应头限制，通过 iframe 嵌入 ChatGPT 的原理图

核心原理：iframe 与反向代理

其实这个功能的实现逻辑并不复杂。核心就是利用 iframe 嵌入技术。但直接把 chatgpt.com 放进去是行不通的，毕竟 OpenAI 有严格的 X-Frame-Options 防护，禁止被第三方页面嵌入。

这时候就需要一个“中间人”——一个反向代理服务。简单来说，你在本地或服务器上起一个服务，把 ChatGPT 的网页内容抓取下来，去掉那些限制嵌入的响应头，然后再把处理后的内容塞给 Codex 里的 iframe 显示出来。

实操步骤（以 VS Code + 简易插件为例）

虽然网上有很多现成的插件，但为了大家理解原理，这里教大家一个通用的搞法：

1. 准备代理服务： 技术大佬通常会用 Node.js 或 Python 写个简单的转发脚本。如果你不想自己写，GitHub 上有不少开源项目（关键词搜 chatgpt-proxy），找个 Star 多的部署到 VPS 上就行。如果你只是本地用，用 Caddy 或者 Nginx 配置一下 subs_filter 模块把响应头过滤掉也是可行的。

2. 获取 Cookie： 浏览器登录 ChatGPT 后，打开开发者工具 (F12)，在 Application -> Cookies 里找到对应域名的 Cookie 值。这一步很关键，因为代理转发请求时需要带上这个，才能证明“你是你”。

3. 配置 Codex / 编辑器： 大多数支持自定义 HTML 视图的编辑器（或者通过安装类似 Custom CSS/JS Loader 的插件），都允许你插入一个 Webview 面板。在这个面板的 URL 栏填上你刚才搭建的代理地址，并在请求头中注入刚才复制的 Cookie。

4. 解决跨域与流式输出： 可能会遇到的问题就是打字机效果的流式输出在 iframe 里卡住。这就需要你的代理服务支持 SSE (Server-Sent Events) 转发。如果你用的是现成的开源项目，大部分作者都已经解决过这个问题了。

遇坑指南：这事儿没这么简单？

有些朋友跟着做了一半发现页面一直在转圈，或者提示 “Access Denied”。这通常是 Cloudflare 的人机验证拦截了代理请求。解决办法有几个：

• 换 IP：家里的宽带动态 IP 可能被风控了，尝试用服务器的 IP 去请求。
• 浏览器模拟：在代理请求时，把 User-Agent 伪装成真实的 Chrome 浏览器，带上完整的 Sec-Ch-Ua 等头信息，减少被识别为机器人的嫌疑。
• 保持会话：不要让 Cookie 过期，如果 Cookie 失效，记得重新获取并更新配置。

总结

把 ChatGPT 网页版搬进 Codex，本质上就是一场打破“门户”的折腾。对于那些追求极致效率、不想在不同窗口间反复横跳的开发者来说，这点折腾绝对是值得的。虽然 OpenAI 官方不推荐这种操作，且后续可能会调整风控策略，但只要掌握了 iframe + 反向代理这一套组合拳，类似的嵌套需求你都能自己搞定。

如果你懒得折腾代码，也可以去搜一些封装好的浏览器插件，直接把 ChatGPT 嵌套成侧边栏应用，效果也是差不太多的。希望这篇教程能帮到正在找这个“隐藏功能”的你！