如何写出你的第一个Codex Tweak10分钟从manifest.json到设置页附完整示例代码【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplusCodex 是一个为 Codex 桌面应用提供的tweak 系统无需重新打包应用就能注入自定义功能。本文将手把手教你写出第一个 Codex Tweak从manifest.json到设置页 UI10 分钟完成附完整可运行示例代码。商店里的 Goal 插件就是一个标准的 Codex Tweak1. Tweak 是什么一个 Codex Tweak 就是一个文件夹里面只需要两个文件my-tweak/ ├── manifest.json # 描述元信息必须 └── index.js # 入口脚本必须也可以是 .mjs / .cjs把它放进你的 tweaks 目录即可生效系统tweaks 目录macOS~/Library/Application Support/codex-plusplus/tweaks/Linux~/.local/share/codex-plusplus/tweaks/Windows%APPDATA%/codex-plusplus/tweaks/放入后按Cmd/CtrlR刷新 Codex或重启应用设置页的Tweaks标签里就会出现你的插件。 不想手写直接运行codexplusplus create-tweak my-tweakCLI 会生成一套完整的骨架模板代码见 create-tweak.ts。2. 编写 manifest.json10个核心字段速查manifest.json是 Codex 识别插件的身份证完整字段定义见 WRITING-TWEAKS.md 和 tweaks/AGENTS.md字段必填说明id✅反向域名式唯一 ID如com.you.my-tweakname✅显示名称version✅语义化版本如0.1.0githubRepo✅owner/repo格式用于每日检查新版本不会自动更新description选填一句话描述author选填字符串或{name, url}对象scope选填renderer默认/main/bothmain选填入口文件名默认index.jsiconUrl选填图标支持相对路径如./icon.pngtags选填标签数组如[ui, shortcut]最小可用 manifest{ id: com.you.my-tweak, name: My First Tweak, version: 0.1.0, githubRepo: you/my-tweak, description: 我写的第一个 Codex Tweak, scope: renderer }⚠️ 注意id只能包含字母、数字、点、下划线和短横线githubRepo必须是owner/repo格式否则校验会失败。这些规则实现在 packages/sdk/src/index.ts 的validateTweakManifest()中。3. 编写 index.js注册你的第一个设置页入口脚本默认导出{ start(api), stop() }。对于 renderer 插件最常用的 API 是api.settings.registerPage()——它会给你的 Tweak 注册一个独立的设置页侧边栏出现专属入口module.exports { start(api) { api.settings.registerPage({ id: main, title: My First Tweak, description: 我的第一个设置页, render(root) { root.innerHTML ; const count api.storage.get(count, 0) 1; api.storage.set(count, count); const btn document.createElement(button); btn.textContent 你打开了设置页 ${count} 次; btn.className h-token-button-composer rounded-md px-3 text-sm font-medium bg-token-charts-red/10 text-token-charts-red hover:bg-token-charts-red/20 cursor-interaction; btn.onclick () api.log.info(按钮被点击了); const tip document.createElement(p); tip.textContent 这是来自 Codex Tweak 的自定义 UI。; root.append(btn, tip); }, }); api.log.info(tweak started); }, stop() { // 清理定时器、事件监听器等热重载时 stop() 会被调用保持幂等 }, };常用api能力一览完整类型见 packages/sdk/src/index.tsapi.log.info(...)— 输出到日志文件和 DevTools 控制台api.storage.get/set/delete— 按插件 ID 隔离的持久化 KV 存储⚙️api.settings.register()— 注册设置行小功能用registerPage()— 注册独立设置页大功能用api.react.waitForElement(selector)— 等待 Codex 页面元素出现适合做 UI 注入api.ipc.invoke/handle— renderer 与 main 进程通信需要scope: bothUI 风格小贴士不要硬编码颜色和尺寸使用 Codex 自带的 Tailwind token如text-token-text-primary、bg-token-foreground/5让插件 UI 与原生气质保持一致。现成的组件片段开关、卡片、行布局都写在 tweaks/AGENTS.md 里直接复制即可。4. 验证、加载与调试第 1 步本地校验 manifestcodexplusplus validate-tweak ~/tweaks/my-tweak第 2 步放入目录并热重载Codex 会监视你的 tweak 文件夹保存即热重载start()会被重新调用——所以不用自己写文件监视逻辑。第 3 步调试打开 DevToolsView 菜单或 Codex 命令面板控制台过滤[codex-plusplus]主进程报错看user-data-dir/log/main.log安装/完整性问题运行codexplusplus doctor想直接探测 Codex 的 DOM开发时设置环境变量CODEXPP_REMOTE_DEBUG1启动 Codex即可通过 Chrome DevTools Protocol 从外部执行 JS开关在 packages/runtime/src/main.ts5. 进阶用 TypeScript SDK 编写想要类型提示安装官方 SDK 后导入defineTweakimport { defineTweak } from codex-plusplus/sdk; export default defineTweak({ start(api) { // api 有完整类型提示 }, stop() {}, });注意runtime 不会转译 TS需自行打包成 JS 后再放入 tweaks 目录。SDK 源码在 packages/sdk/包含TweakManifest、TweakApi、SettingsPage等全部类型定义。常见问题清单问题解决方法Tweaks 列表看不到插件检查目录是否正确、manifest 是否通过validate-tweak报 scope must be one of...scope只接受renderer/main/bothUI 点击无反应确认scope是renderer或bothapi.settings只在渲染进程可用热重载后 DOM 残留在stop()中清理你添加的 DOM 节点和监听器 更多参考docs/WRITING-TWEAKS.mdAPI 全解、docs/ARCHITECTURE.md架构细节、docs/TROUBLESHOOTING.md排错指南、store/index.json官方商店插件清单。现在打开编辑器10 分钟后你就拥有自己的第一个 Codex Tweak 了【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何写出你的第一个Codex Tweak10分钟从manifest.json到设置页附完整示例代码【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplusCodex 是一个为 Codex 桌面应用提供的tweak 系统无需重新打包应用就能注入自定义功能。本文将手把手教你写出第一个 Codex Tweak从manifest.json到设置页 UI10 分钟完成附完整可运行示例代码。商店里的 Goal 插件就是一个标准的 Codex Tweak1. Tweak 是什么一个 Codex Tweak 就是一个文件夹里面只需要两个文件my-tweak/ ├── manifest.json # 描述元信息必须 └── index.js # 入口脚本必须也可以是 .mjs / .cjs把它放进你的 tweaks 目录即可生效系统tweaks 目录macOS~/Library/Application Support/codex-plusplus/tweaks/Linux~/.local/share/codex-plusplus/tweaks/Windows%APPDATA%/codex-plusplus/tweaks/放入后按Cmd/CtrlR刷新 Codex或重启应用设置页的Tweaks标签里就会出现你的插件。 不想手写直接运行codexplusplus create-tweak my-tweakCLI 会生成一套完整的骨架模板代码见 create-tweak.ts。2. 编写 manifest.json10个核心字段速查manifest.json是 Codex 识别插件的身份证完整字段定义见 WRITING-TWEAKS.md 和 tweaks/AGENTS.md字段必填说明id✅反向域名式唯一 ID如com.you.my-tweakname✅显示名称version✅语义化版本如0.1.0githubRepo✅owner/repo格式用于每日检查新版本不会自动更新description选填一句话描述author选填字符串或{name, url}对象scope选填renderer默认/main/bothmain选填入口文件名默认index.jsiconUrl选填图标支持相对路径如./icon.pngtags选填标签数组如[ui, shortcut]最小可用 manifest{ id: com.you.my-tweak, name: My First Tweak, version: 0.1.0, githubRepo: you/my-tweak, description: 我写的第一个 Codex Tweak, scope: renderer }⚠️ 注意id只能包含字母、数字、点、下划线和短横线githubRepo必须是owner/repo格式否则校验会失败。这些规则实现在 packages/sdk/src/index.ts 的validateTweakManifest()中。3. 编写 index.js注册你的第一个设置页入口脚本默认导出{ start(api), stop() }。对于 renderer 插件最常用的 API 是api.settings.registerPage()——它会给你的 Tweak 注册一个独立的设置页侧边栏出现专属入口module.exports { start(api) { api.settings.registerPage({ id: main, title: My First Tweak, description: 我的第一个设置页, render(root) { root.innerHTML ; const count api.storage.get(count, 0) 1; api.storage.set(count, count); const btn document.createElement(button); btn.textContent 你打开了设置页 ${count} 次; btn.className h-token-button-composer rounded-md px-3 text-sm font-medium bg-token-charts-red/10 text-token-charts-red hover:bg-token-charts-red/20 cursor-interaction; btn.onclick () api.log.info(按钮被点击了); const tip document.createElement(p); tip.textContent 这是来自 Codex Tweak 的自定义 UI。; root.append(btn, tip); }, }); api.log.info(tweak started); }, stop() { // 清理定时器、事件监听器等热重载时 stop() 会被调用保持幂等 }, };常用api能力一览完整类型见 packages/sdk/src/index.tsapi.log.info(...)— 输出到日志文件和 DevTools 控制台api.storage.get/set/delete— 按插件 ID 隔离的持久化 KV 存储⚙️api.settings.register()— 注册设置行小功能用registerPage()— 注册独立设置页大功能用api.react.waitForElement(selector)— 等待 Codex 页面元素出现适合做 UI 注入api.ipc.invoke/handle— renderer 与 main 进程通信需要scope: bothUI 风格小贴士不要硬编码颜色和尺寸使用 Codex 自带的 Tailwind token如text-token-text-primary、bg-token-foreground/5让插件 UI 与原生气质保持一致。现成的组件片段开关、卡片、行布局都写在 tweaks/AGENTS.md 里直接复制即可。4. 验证、加载与调试第 1 步本地校验 manifestcodexplusplus validate-tweak ~/tweaks/my-tweak第 2 步放入目录并热重载Codex 会监视你的 tweak 文件夹保存即热重载start()会被重新调用——所以不用自己写文件监视逻辑。第 3 步调试打开 DevToolsView 菜单或 Codex 命令面板控制台过滤[codex-plusplus]主进程报错看user-data-dir/log/main.log安装/完整性问题运行codexplusplus doctor想直接探测 Codex 的 DOM开发时设置环境变量CODEXPP_REMOTE_DEBUG1启动 Codex即可通过 Chrome DevTools Protocol 从外部执行 JS开关在 packages/runtime/src/main.ts5. 进阶用 TypeScript SDK 编写想要类型提示安装官方 SDK 后导入defineTweakimport { defineTweak } from codex-plusplus/sdk; export default defineTweak({ start(api) { // api 有完整类型提示 }, stop() {}, });注意runtime 不会转译 TS需自行打包成 JS 后再放入 tweaks 目录。SDK 源码在 packages/sdk/包含TweakManifest、TweakApi、SettingsPage等全部类型定义。常见问题清单问题解决方法Tweaks 列表看不到插件检查目录是否正确、manifest 是否通过validate-tweak报 scope must be one of...scope只接受renderer/main/bothUI 点击无反应确认scope是renderer或bothapi.settings只在渲染进程可用热重载后 DOM 残留在stop()中清理你添加的 DOM 节点和监听器 更多参考docs/WRITING-TWEAKS.mdAPI 全解、docs/ARCHITECTURE.md架构细节、docs/TROUBLESHOOTING.md排错指南、store/index.json官方商店插件清单。现在打开编辑器10 分钟后你就拥有自己的第一个 Codex Tweak 了【免费下载链接】codex-plusplusCodex tweak system for the Codex desktop app项目地址: https://gitcode.com/gh_mirrors/co/codex-plusplus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
