Codex进阶注入技巧用React Fiber遍历精准定位并改造Codex界面组件的3种姿势【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplusCodex 是一个面向 Codex 桌面应用的 tweak 注入系统无需重新编译应用就能往它的 React 界面里注入自定义功能、修复 UI 问题并附带一个 Tweak 管理面板。对进阶用户来说它最“狠”的能力是内置的 React Fiber 工具——让 tweak 无需拿到 React 本体就能精准定位并改造 Codex 界面组件。这篇文章带你看懂它的工作原理并掌握从“找到 Fiber”到“稳定注入”的 3 种姿势。为什么需要 React Fiber 注入Codex 的前端打包产物是压缩混淆的 Vite 构建文件不暴露任何模块注册表React 本身也不是稳定依赖。所以 Codex 的 SDK 故意不把 React 引用交给 tweak而是提供 3 个低层工具定义在 packages/sdk/src/index.tsgetFiber(node)— 把任意 DOM 节点还原成 React fiberfindOwnerByName(node, name)— 沿 fiber 树向上查找指定名字的组件实例waitForElement(selector)— 等指定元素出现后再动手注入这 3 个工具由渲染进程侧的 packages/runtime/src/preload/tweak-host.ts 实现背后都依赖同一个巧妙机制。幕后机制一个 React 会主动喂你的钩子Codex 的 preload 脚本会先装一个极简的__REACT_DEVTOOLS_GLOBAL_HOOK__。Codex 的 React 初始化时会主动向该钩子注入内部方法findFiberByHostInstance于是我们就能从任意 DOM 节点反查它的 Fiber实现在 packages/runtime/src/preload/react-hook.ts。如果钩子拿不到代码还会回退扫描节点上以__reactFiber开头的内部属性双保险。整体注入链路loader → runtime → tweak可参考 docs/ARCHITECTURE.md。姿势一读取组件 Props——getFiber最基础的一步从任意元素拿到它的“内部数据卡”。const node document.querySelector([data-testidmessage-row]); const fiber api.react.getFiber(node); // 非 React 节点会返回 null api.log.info(fiber?.memoizedProps);Fiber 节点SDK 中定义为ReactFiberNode最常用的字段字段用途type组件类型函数组件或标签名字符串memoizedProps组件最近一次收到的 propsmemoizedState最近一次渲染后的 state / hooks 值return/child/siblingfiber 树中的父 / 首子 / 兄弟指针 有了memoizedProps你就能读到 Codex 组件内部的数据比如消息列表的原始内容这是纯 DOM 手段做不到的。姿势二按名字定位组件实例——findOwnerByName想知道“这个按钮是谁渲染的”沿return指针一路向上匹配组件的displayName或函数名即可const btn document.querySelector(button[aria-labelSend]); const card api.react.findOwnerByName(btn, MessageCard); api.log.info(card?.memoizedProps);使用小贴士返回null说明祖先链上没有该名字的组件先换名字或去 DevTools 里确认真实组件名它只找最近的匹配祖先适合从具体元素反查宿主卡片/容器组件姿势三稳定等目标出现——waitForElement注入最大的坑是时机start()执行时目标可能还没渲染。别自己写轮询循环直接用内置等待工具内部基于 MutationObserver等待期间零轮询开销const composer await api.react.waitForElement([data-testidcomposer], 5000); // 拿到元素后再做 DOM 改造或 Fiber 遍历默认等待 5 秒超时会自动抛错配合api.log.error就能把“目标始终没出现”的问题记录下来。避坑指南写出稳定的注入代码改造 Codex 界面时遵守 tweaks/AGENTS.md 里的 4 条军规❌ 不要直接import React——只用api.react.*或原生 DOM❌ 不要硬编码色值——沿用 Codex 的text-token-*设计令牌让注入内容与原生 UI 浑然一体❌ 不要轮询 DOM——用api.react.waitForElement✅ 在stop()中清理你添加的所有 DOM 节点与事件监听完整 API 清单与示例见 docs/WRITING-TWEAKS.md。总结getFiber读“数据卡”findOwnerByName查“属主组件”waitForElement保证“时机稳定”——3 行调用就是精准改造 Codex 界面组件的全部工具进阶玩法把这些技巧装进api.settings.registerPage就能在 Codex 设置侧边栏里直接看到你的功能页想动手深挖优先阅读这几个文件Fiber 查找核心实现packages/runtime/src/preload/react-hook.tsTweak 宿主与 API 装配packages/runtime/src/preload/tweak-host.tsSDK 类型定义ReactFiberNode等packages/sdk/src/index.ts架构总览docs/ARCHITECTURE.md【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Codex++进阶注入技巧：用React Fiber遍历精准定位并改造Codex界面组件的3种姿势
Codex进阶注入技巧用React Fiber遍历精准定位并改造Codex界面组件的3种姿势【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplusCodex 是一个面向 Codex 桌面应用的 tweak 注入系统无需重新编译应用就能往它的 React 界面里注入自定义功能、修复 UI 问题并附带一个 Tweak 管理面板。对进阶用户来说它最“狠”的能力是内置的 React Fiber 工具——让 tweak 无需拿到 React 本体就能精准定位并改造 Codex 界面组件。这篇文章带你看懂它的工作原理并掌握从“找到 Fiber”到“稳定注入”的 3 种姿势。为什么需要 React Fiber 注入Codex 的前端打包产物是压缩混淆的 Vite 构建文件不暴露任何模块注册表React 本身也不是稳定依赖。所以 Codex 的 SDK 故意不把 React 引用交给 tweak而是提供 3 个低层工具定义在 packages/sdk/src/index.tsgetFiber(node)— 把任意 DOM 节点还原成 React fiberfindOwnerByName(node, name)— 沿 fiber 树向上查找指定名字的组件实例waitForElement(selector)— 等指定元素出现后再动手注入这 3 个工具由渲染进程侧的 packages/runtime/src/preload/tweak-host.ts 实现背后都依赖同一个巧妙机制。幕后机制一个 React 会主动喂你的钩子Codex 的 preload 脚本会先装一个极简的__REACT_DEVTOOLS_GLOBAL_HOOK__。Codex 的 React 初始化时会主动向该钩子注入内部方法findFiberByHostInstance于是我们就能从任意 DOM 节点反查它的 Fiber实现在 packages/runtime/src/preload/react-hook.ts。如果钩子拿不到代码还会回退扫描节点上以__reactFiber开头的内部属性双保险。整体注入链路loader → runtime → tweak可参考 docs/ARCHITECTURE.md。姿势一读取组件 Props——getFiber最基础的一步从任意元素拿到它的“内部数据卡”。const node document.querySelector([data-testidmessage-row]); const fiber api.react.getFiber(node); // 非 React 节点会返回 null api.log.info(fiber?.memoizedProps);Fiber 节点SDK 中定义为ReactFiberNode最常用的字段字段用途type组件类型函数组件或标签名字符串memoizedProps组件最近一次收到的 propsmemoizedState最近一次渲染后的 state / hooks 值return/child/siblingfiber 树中的父 / 首子 / 兄弟指针 有了memoizedProps你就能读到 Codex 组件内部的数据比如消息列表的原始内容这是纯 DOM 手段做不到的。姿势二按名字定位组件实例——findOwnerByName想知道“这个按钮是谁渲染的”沿return指针一路向上匹配组件的displayName或函数名即可const btn document.querySelector(button[aria-labelSend]); const card api.react.findOwnerByName(btn, MessageCard); api.log.info(card?.memoizedProps);使用小贴士返回null说明祖先链上没有该名字的组件先换名字或去 DevTools 里确认真实组件名它只找最近的匹配祖先适合从具体元素反查宿主卡片/容器组件姿势三稳定等目标出现——waitForElement注入最大的坑是时机start()执行时目标可能还没渲染。别自己写轮询循环直接用内置等待工具内部基于 MutationObserver等待期间零轮询开销const composer await api.react.waitForElement([data-testidcomposer], 5000); // 拿到元素后再做 DOM 改造或 Fiber 遍历默认等待 5 秒超时会自动抛错配合api.log.error就能把“目标始终没出现”的问题记录下来。避坑指南写出稳定的注入代码改造 Codex 界面时遵守 tweaks/AGENTS.md 里的 4 条军规❌ 不要直接import React——只用api.react.*或原生 DOM❌ 不要硬编码色值——沿用 Codex 的text-token-*设计令牌让注入内容与原生 UI 浑然一体❌ 不要轮询 DOM——用api.react.waitForElement✅ 在stop()中清理你添加的所有 DOM 节点与事件监听完整 API 清单与示例见 docs/WRITING-TWEAKS.md。总结getFiber读“数据卡”findOwnerByName查“属主组件”waitForElement保证“时机稳定”——3 行调用就是精准改造 Codex 界面组件的全部工具进阶玩法把这些技巧装进api.settings.registerPage就能在 Codex 设置侧边栏里直接看到你的功能页想动手深挖优先阅读这几个文件Fiber 查找核心实现packages/runtime/src/preload/react-hook.tsTweak 宿主与 API 装配packages/runtime/src/preload/tweak-host.tsSDK 类型定义ReactFiberNode等packages/sdk/src/index.ts架构总览docs/ARCHITECTURE.md【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考