Codex 换肤指南：原理、代码与开源工具

给 Codex 换上个性化皮肤，正成为开发者们的新乐趣。这项技术并非修改官方安装包，而是巧妙地利用了 Codex 基于 Electron（底层 Chromium）这一事实，通过 Chrome DevTools Protocol (CDP) 实现运行时动态样式注入。换肤工具作为客户端，通过 WebSocket 连接到 Codex 渲染进程的调试端口（默认 127.0.0.1:9222），发送 CDP 指令执行 JavaScript，在页面中插入自定义 CSS 覆盖默认外观。整个过程不触碰 app.asar 等任何核心文件，因此安全无虞，官方更新不会冲突，停止注入即可“一键还原”。

🔌 关键代码：建立 CDP 连接并注入样式

以下核心代码片段展示了换肤工具的底层实现逻辑（参考自开源项目）：

1. 1. 建立 CDP 会话（连接调试端口）

class CdpSession {
  constructor(wsUrl) {
    this.ws = new WebSocket(wsUrl);
    this.nextId = 1;
    this.pending = new Map();
  }
  async open() {
    await new Promise(resolve => this.ws.on('open', resolve));
    await this.send('Runtime.enable');  // 启用运行时域
    await this.send('Page.enable');     // 启用页面域
    return this;
  }
  send(method, params) {
    // 发送 JSON-RPC 命令
  }
}

1. 2. 执行注入脚本（动态插入）

async function injectSkin(session, cssText) {
  await session.evaluate(`
    (function() {
      const style = document.createElement('style');
      style.id = 'codex-skin-injected';
      style.textContent = \`${cssText}\`;
      document.head.appendChild(style);
    })();
  `);
}

1. 3. 清理残留（切换或还原时）

await session.evaluate(`
  document.getElementById('codex-skin-injected')?.remove();
  // 同时清理其他注入的 DOM 节点、定时器等
`);

🛠️ 开源工具与主题构成

目前社区已涌现多款基于上述原理的工具，您可体验：

· codex-autoskin（ https://github.com/Finderchangchang/codex-autoskin ）：Windows 平台，支持“一张图生成主题”并自动监听页面路由变化。
· codex-skin-manager（ https://github.com/ZhjGo/codex-skin-manager ）：跨平台，提供完整管理界面与零残留清理机制。
· Codex-Dream-Skin（ https://github.com/Fei-Away/Codex-Dream-Skin ）：另一款全功能方案。
· heige-codex-skin-studio（ https://github.com/HeiGeAi/heige-codex-skin-studio ）：macOS 专属，内置一键切换菜单。

一个完整的皮肤主题通常包含：背景图片、配色方案、CSS 样式代码，以及 theme.json 元数据文件（定义名称、作者、版本等）。

⚠️ 注意事项

· CDP 端口仅监听本机回环地址，但请勿在运行期间执行来路不明的本机程序，防止恶意注入。
· Codex 大版本更新可能导致 CSS 选择器变更，造成样式失效，此时需等待工具适配新版本。

通过上述技术，您可以自由、安全地为 AI 编程助手定制独一无二的视觉风格，享受 DIY 的乐趣。