ChatGPT 网页版自定义皮肤搭建思路框架 适合分享版｜不含私人内容 ────────────────────────────
🌷 这个东西是什么？
这是一个利用 Safari / 浏览器扩展给网页注入自定义 CSS 和 JavaScript 的小玩法。
简单说：
不是修改 ChatGPT 官方 App， 不是破解网页， 也不是改服务器内容。
它只是让你自己的浏览器在打开 chatgpt.com 时， 额外加载一层本地脚本， 从而实现：
・自定义背景壁纸 ・一键换肤 ・透明 / 玻璃感输入框 ・隐藏或调整部分 UI ・添加浮动按钮 ・添加快捷 prompt 工具栏 ・保存上次使用的主题
────────────────────────────
🧩 一、整体原理
核心思路只有三件事：
- 用浏览器扩展运行 userscript
- 用 CSS 改网页外观
- 用 JavaScript 添加按钮、面板和快捷功能
可以理解成：
网页本身是一间房子， CSS 是装修， JavaScript 是开关、抽屉和机关， localStorage 是记住你上次选择的小记忆。
────────────────────────────
📱 二、手机版需要什么？
iPhone 上可以用：
・Safari ・Userscripts 之类的 Safari 扩展 ・一个 .user.js 脚本文件 ・几张可外链访问的图片
基本流程：
- 安装 Userscripts
- 在 Safari 设置里启用扩展
- 给 chatgpt.com 授权
- 创建一个 .user.js 文件
- 把脚本放进 Userscripts 指定文件夹
- 打开 chatgpt.com
- 在扩展面板里启用脚本
- 刷新网页
────────────────────────────
🖼️ 三、壁纸链接怎么准备？
背景图必须是“图片直链”。
正确格式通常像这样：
https://example.com/image.jpg https://example.com/image.png https://example.com/image.webp
不建议直接用相册页链接，例如：
https://imgur.com/a/xxxx https://ibb.co/xxxx
这类链接是网页地址，不是图片本体。
如果图床提供 HTML 或 BBCode， 要从里面抠出真正的图片链接。
例如：
HTML 里取 img src="..." 里面的内容。
BBCode 里取 [img]...[/img] 中间的内容。
────────────────────────────
🎨 四、基础皮肤结构
一个主题通常可以包含这些字段：
・emoji：按钮显示用 ・name：主题名称 ・bgUrl：背景图片链接 ・overlay：遮罩颜色和透明度 ・filter：背景滤镜 ・textColor：文字颜色 ・panelBg：面板背景 ・formBg：输入框背景 ・accent：强调色 ・font：字体
示意结构：
themes = { light: { emoji: "🤍", bgUrl: "图片直链", overlay: "rgba(255,255,255,0.75)", textColor: "#222222" },
dark: { emoji: "🖤", bgUrl: "图片直链", overlay: "rgba(20,20,25,0.60)", textColor: "#f5f0f0" } }
重点：
浅色壁纸要配深色字。 深色壁纸要配浅色字。 壁纸太花时，提高 overlay 透明遮罩，让文字更清楚。
────────────────────────────
🫧 五、背景层怎么做？
推荐做法：
用 JavaScript 创建一个固定的背景 div。
它的位置固定在页面底部：
position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
pointer-events: none 很重要， 它可以避免背景层挡住网页按钮。
背景层只负责显示图片， 不要让它参与点击。
────────────────────────────
🎀 六、一键换肤怎么做？
核心思路：
- 准备多个主题对象
- 页面上添加一个浮动按钮
- 点击按钮打开主题面板
- 用户点某个 emoji
- 把对应主题应用到 CSS 变量
- 用 localStorage 记住选择
流程像这样：
点 🎀 ↓ 打开面板 ↓ 选择 🤍 / 🌸 / 🫧 / 🖤 ↓ 更新背景、文字、面板、输入框颜色 ↓ 保存当前主题 ↓ 下次打开自动恢复
────────────────────────────
🧰 七、快捷工具栏怎么做？
快捷工具栏的本质是：
“按钮 + 预设文本 + 自动插入输入框”
适合放：
・图像 prompt 模板 ・逆向 prompt 模板 ・翻译模板 ・润色模板 ・代码需求模板 ・常用风格词 ・常用负面词
逻辑：
- 准备一个 templates 数组
- 每个模板有 label 和 text
- 面板里生成按钮
- 点按钮时寻找 ChatGPT 输入框
- 把 text 插进去
- 如果插不进去，就复制到剪贴板
这样手机上不用反复复制粘贴， 像给网页装了一个小型 prompt 键盘。
────────────────────────────
🪟 八、UI 装饰可以做什么？
可以做得很轻：
・右下角半透明水印 ・浮动主题按钮 ・小型玻璃面板 ・面板标题 ・按钮高亮状态 ・轻微圆角 ・半透明输入框
不建议一开始做太多：
・动态动画 ・大面积 blur ・全页面 text-shadow ・频繁扫描整个 DOM ・复杂粒子效果
手机版 Safari 扛不住太重的效果， 漂亮和流畅要平衡。
────────────────────────────
- 背景图不显示
通常是因为用了相册链接， 不是图片直链。
- 页面变卡
常见原因：
・MutationObserver 监听整个页面 ・setInterval 不停刷新样式 ・backdrop-filter / blur 太多 ・给所有元素反复改样式 ・大图太重
解决方式：
・减少 blur ・减少阴影 ・不要反复扫描全页面 ・主题切换时才更新样式 ・图片尽量压缩
- 返回列表点不开
不要乱改这些区域：
・header ・nav ・aside ・sidebar ・dialog
尤其是手机版 ChatGPT， 侧边栏和顶部按钮很敏感。
- 侧边栏看不清
不要让侧边栏完全透明。 打开侧边栏时，应该给它一个较实的背景色。
例如浅色主题：
rgba(255,255,255,0.96)
暗色主题：
rgba(12,12,16,0.97)
- 暗黑主题字看不清
深色壁纸一定要单独设置浅色文字：
textColor: "#f3eeee"
同时要覆盖消息正文、按钮、输入框文字。
────────────────────────────
🔐 十、安全建议
只运行你自己写的脚本， 或完全看得懂的脚本。
不要随便复制陌生人给的 userscript。
不要在脚本里写：
・账号密码 ・cookie ・token ・私密 API key ・个人身份信息
扩展权限尽量只给需要的网站， 例如只授权 chatgpt.com， 不要随便给所有网站。
脚本只应该改界面， 不应该读取或上传你的聊天内容。
────────────────────────────
🪄 十一、推荐搭建顺序
第一步：只做背景图 确认脚本能运行。
第二步：做透明遮罩 让文字能看清。
第三步：做主题对象 把不同壁纸和颜色打包。
第四步：做一键换肤按钮 用 emoji 切换主题。
第五步：做快捷工具栏 加入常用模板。
第六步：加轻量 UI 装饰 例如水印、圆角、面板。
第七步：做性能减负 删除不必要的轮询、监听和重型滤镜。
第八步：修移动端导航 不要干扰 header / nav / aside / sidebar。
────────────────────────────
🍰 十二、一个轻量版功能清单
推荐保留：
・固定背景层 ・多主题切换 ・localStorage 记忆主题 ・右下角浮动按钮 ・快捷 prompt 工具栏 ・轻量水印 ・输入框半透明 ・浅色 / 深色文字自动切换
不推荐一开始就做：
・动态粒子 ・全局毛玻璃 ・频繁 DOM 监听 ・复杂动画 ・大面积模糊 ・强行改顶部栏和侧边栏
────────────────────────────
🌙 十三、最终效果可以是什么样？
一个普通网页， 可以被改造成一个自己的轻量工作台：
・打开就是专属壁纸 ・点 emoji 切换氛围 ・点按钮插入常用 prompt ・输入框像玻璃卡片 ・背景像视觉小说页面 ・界面保留原本功能 ・不影响聊天列表和导航
重点不是“把网页改得很花”， 而是让它变得更顺手、更漂亮、更像自己的空间。
────────────────────────────
📌 最后总结
这个玩法的核心不是技术多复杂， 而是搭建思路清楚：
背景层负责氛围。 CSS 变量负责主题。 浮动面板负责交互。 模板按钮负责效率。 localStorage 负责记忆。 性能优化负责长期可用。
先轻量，后美化。 先能用，再好看。 先不挡路，再加装饰。
这样做出来的自定义 ChatGPT 网页皮肤， 既可爱，又实用，也不容易把手机网页卡爆。
────────────────────────────
署名
整理 / 实验 / 搭建： Joy × Dan
Made with love, curiosity, and a tiny pink button 🎀
────────────────────────────
END