search

cssmagic / blog

CSS魔法 - 博客
http://blog.cssmagic.net/
2.8k stars 274 forks source link

ChatGPT 网页版崩了？魔法哥重操旧业，写个用户脚本来修复 #127

Open cssmagic opened 3 months ago

cssmagic commented 3 months ago

就在八月初的这几天，ChatGPT 网页版开始灰度上线一个新版本，但很快就有不少网友发现自己用不了了！

具体的症状是，登录 ChatGPT 没问题，但只要一开始对话，网页就会显示 “Oops, an error occurred! (Try again)”，如下图所示：

ChatGPT 网页版报错

用不了 ChatGPT 可是个大问题。怎么办？

（跟着本文实操需要一定的技术基础，但读完并不费力。如果你仍然担心看不懂，不妨转发给会编程的朋友一起看。）

分析问题

此时，如果我们在浏览器中按 “F12” 键，打开控制台，会看到 TypeError: n.toSorted is not a function 这样的报错信息。

我们前往 OpenAI 官方的服务状态页面（ https://status.openai.com/ ），发现 ChatGPT 并无故障。再结合控制台报错信息，我们可以推断：这个问题的根源不在服务器端，而是在浏览器端。

魔法哥使用的浏览器是 Chrome 的一个较早版本，而换用另一款 Chrome Canary 浏览器（这是 Chrome 面向开发者提供的测试版，内核版本较高），则可以正常使用 ChatGPT。这个结果进一步验证了上面的推断。

回顾控制台的错误消息，再进行一番查证，可以得出结论：ChatGPT 新版本的 JS 代码中使用了 Array.prototype.toSorted() 这个方法，它是在 ES2023 规范中引入的新特性，而这个方法只有在较新的 Chrome 110 或以上版本中才能使用（参见下图）。

MDN 上的兼容性表格

如果我们使用的是较低版本的 Chrome，或者你使用的国产浏览器内核太旧，就会遇到本文开头描述的问题。最简单的解决方案就是升级自己的浏览器。但如果你的软硬件条件不允许，或者你所使用的浏览器内核还没有升上来，那就需要另想办法了。

解决方案

这些年浏览器端的技术特性一直在飞速迭代，这类 “老浏览器不支持新特性” 的问题其实一直都存在。网页的开发者们通常采用一种叫做 “polyfill” 的技术手段来解决这类问题——给老浏览器打补丁，把它不支持的某些特性通过一段额外的代码来补上，从而让它可以像新浏览器一样运行那些用到新特性的代码。

原本 polyfill 是网页的开发者应该操心的问题，但 ChatGPT 这次显然没有考虑到这一点。确实 ChatGPT 在技术上一直相当激进，比如他们家的桌面客户端就只支持最新版的 macOS 操作系统。

因此，魔法哥决定自己动手，写一个 “用户脚本” 来给 ChatGPT 网页版补上缺失的 polyfill，让它可以在老浏览器中正常运行。

用户脚本

有一个小秘密，很多人可能还不知道——我们在浏览网页时，是可以根据自己的需要对网页进行自定义修改的。通常有这三种方法：

这三种方法的功能强弱依次递增，开发复杂度也依次递增。对于本文面临的问题，“用户脚本” 是最合适的解决方案。

也就是说，我们可以写一个用户脚本，让它在打开 ChatGPT 网页版时，自动向网页注入一段我们准备好的 polyfill，从而让 ChatGPT 的 JS 代码在老浏览器中正常运行。

当然，用户脚本并不是 Chrome 原生提供的功能，我们需要借助一款名为 “Tampermonkey”（篡改猴） 的插件来实现。Tampermonkey 作为用户脚本管理器，可以在浏览器中自动针对不同网页运行对应的用户脚本。

开发用户脚本

如果只是解决本文提到的问题，这个用户脚本并不算复杂。它只需要实现以下效果就可以了：

这两项工作其实都不需要我们掌握任何 JS 编程能力，因为 Tampermonkey 本身就提供了一些配置项来实现对应的效果。最小化的示意代码如下：

// ==UserScript==
// @name         Polyfill ChatGPT
// @match        https://chatgpt.com/*
// @require      http://xxxxx.com/polyfill.js
// ==/UserScript==

console.log('Userscript Loaded.')

简单解释一下这几行代码的作用：

准备所需的 Polyfill

既然 Tampermonkey 允许我们的用户脚本加载外部 JS 脚本，那么接下来，我们就需要完成以下任务：

  1. 得到 Array.prototype.toSorted() 的 polyfill 代码。
  2. 把这段 polyfill 代码保存为一个单独的 JS 文件。
  3. 把这个文件发布到某个公开的地址。

我们一步一步来。

首先，提到浏览器端的 polyfill，就不得不提到 core-js 这个开源项目（ https://github.com/zloirock/core-js ）。它分门别类地整理了几乎所有 JS 新特性的 polyfill 代码，已经成为这个领域的事实标准。

接下来，我们利用 core-js 提供的 core-js-builder 工具，稍作配置，就可以生成我们需要的 polyfill 文件。

最后，我们把这个文件上传到一个公开的地址。如果你有自己的个人网站，完成这一步应该不在话下。或者你也可以利用 GitHub Gist 服务来把代码发布为一个可访问的 URL。

当然，如果你只想给自己一个人用，也可以在本机运行一个简易的静态 web 服务器，只要让这个文件能以 HTTP 形式被访问到即可。如果你连这一步也不想弄，可以直接使用本文末尾的资源。

安装用户脚本

我们在 Chrome 的插件工具栏中点击 Tampermonkey 插件的图标，在弹出的菜单中选择 “创建一个新脚本”，会进入一个编辑器界面。

编辑器界面

这个编辑器里有一些初始代码，我们把它清空，把上面那段示意代码粘贴进去，再把 @require 字段修改为真实的 polyfill 文件的地址，保存即可生效。

此时，我们切换到 “已安装的用户脚本” 标签下，应该可以看到我们刚刚创建的这个用户脚本。

已安装的用户脚本

走完这一步，我们就可以打开 ChatGPT 网页版，刷新页面，再发起一轮新对话，应该可以看到对话功能已经恢复正常，而且控制台也不再报错了！

开源

如果你懒得跟着上面的步骤自己做，或者你觉得上面的描述不够详细，那可以直接参考魔法哥写好的这个开源项目。相关的背景说明、源代码、构建脚本、使用方法都放在这个仓库里： https://github.com/UserScript/Polyfill-My-Browser

如果你也想打造自己的用户脚本，并分享给更多的人使用，那这个仓库也会是一个不错的参考。此外，估计有朋友会在安装 Tampermonkey 插件时遇到困难，因此 README 中也提供了必要的帮助信息。

这个项目还不错吧？如果觉得有用，不妨点个 Star，支持一下魔法哥的开源精神。

小结

假如你是一名程序员，相信你已经 Get 到了今天的知识点，并且打开了一扇叫做 “用户脚本” 的大门。这确实是一项不为人知的神器，在某些时候，它往往可以出奇制胜，帮你解决棘手的问题。

即使你目前对编程无感，相信你也已经知道了 “如何魔改别人的网页” 这个小秘密。在未来的文章里，魔法哥还将分享通过 “用户样式” 来优化 ChatGPT 的使用体验，敬请期待！

 

🙏 抱歉，断更了一段时间，不过魔法哥并不是出去浪了，而是在筹备新书。群里的小伙伴应该都知道了，魔法哥参与撰写了一本面向零基础同学的 “AI 辅助编程” 入门书，已经进入出版流程，很快上架。一直想学编程但又无从下手的朋友，不妨持续关注。

魔法哥最近一年都在做 AI 领域的研发和探索，下期分享更精彩。各位新朋友请关注公众号，下次更新不迷路：

weixin-qrcode

📣 AI 魔法群开放啦！

对 AI 感兴趣的同学不妨扫码加群，与数百名同好交流分享：

qun-qr

🔥 往期推荐

AI 应用开发指南：

ChatGPT 高级技巧：

AI 资讯与评述：

© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

Anmilover commented 3 months ago

您好，邮件已查收。Anmi、

cssmagic commented 3 months ago

ChatGPT 网页版已经修复了这个问题。不过大家仍然可以在这个测试页面感受效果： https://www.cssmagic.net/lab/userscript-polyfill/