three-devtools 源码开发指南：从本地调试到 Chrome 网上应用店发布的完整教程

three-devtools 源码开发指南从本地调试到 Chrome 网上应用店发布的完整教程【免费下载链接】three-devtoolsthree.js devtools项目地址: https://gitcode.com/gh_mirrors/th/three-devtoolsthree-devtools是一款面向 three.js 的浏览器开发者工具扩展three.js devtools能在 DevTools 中可视化检查 3D 场景、渲染器、材质与纹理并支持直接修改参数。本文是一份从零开始的源码开发指南带你完成环境搭建、本地调试、构建打包最终把扩展发布到 Chrome 网上应用店Chrome Web Store与 Firefox 附加组件商店的完整流程。 先认识项目它是什么three-devtools 以面板Panel的形式嵌入浏览器开发者工具中。打开一个运行 three.js 应用的页面后你可以在three标签页里 浏览场景对象树Scene Graph 查看并实时修改材质、几何体参数️ 预览纹理漫反射、法线、粗糙度等 PBR 贴图⚙️ 调整渲染器与相机参数下面的示例场景就来自项目自带的演示页打开开发者工具即可用 three-devtools 检查其中的网格、材质与纹理项目官方说明文档DEVELOPMENT.md、README.md 一键安装克隆仓库并安装依赖只需 3 条命令即可开始git clone https://gitcode.com/gh_mirrors/th/three-devtools cd three-devtools npm install依赖项定义在 package.json 中核心依赖包括lit-elementWeb Components UI 框架、three0.137.0内置一份私有的 three.js 用于注入可视化、webextension-polyfill统一 Chrome/Firefox 扩展 API。 本地调试最快上手方法Chrome以已解压扩展方式加载打开chrome://extensions开启右上角开发者模式点击加载已解压的扩展选择项目根目录出现一条关于browser_specific_settings的警告属正常现象可忽略这是 Firefox 专用的 manifest.json 字段访问任意 three.js 页面可运行自带示例 examples/objects.html打开开发者工具即可看到three面板Firefox用 web-ext 自动调试npx web-ext runweb-ext会启动一个带扩展的 Firefox 实例改完 src/app/ 的界面代码后刷新面板即可看到效果。⚡ 调试刷新规则重要修改的文件需要做什么src/app/面板 UI刷新 DevTools 面板即可src/content/注入脚本在chrome://extensions重新加载扩展 刷新页面src/extension/通信管道重新加载扩展 刷新页面 目录结构源码都藏在哪儿src/ ├── app/ # DevTools 面板前端Web Components LitElement ├── extension/ # 通信管道content script / background / devtools 三端脚本 └── content/ # 注入到用户页面上下文、直接接触 three.js 实例的脚本 web_modules/ # 预构建的依赖模块由 pika/web 生成 examples/ # 自带演示场景 scripts/ # 构建与发版脚本关键文件速查面板入口src/app/index.html 与 src/app/index.js注册所有自定义元素根状态元素src/app/elements/AppElement.js负责整个应用状态与重渲染注入侧单例src/content/ThreeDevTools.jsobserve / select / update 等核心 API通信三端src/extension/contentScript.js → src/extension/background.js → src/extension/devtools.js数据序列化src/content/toJSON.js把 three.js 对象转成面板可渲染的数据 理解数据流消息如何跨越 4 个上下文这是理解源码最关键的一张心智地图。three.js 场景数据必须穿越4 个上下文注入脚本src/content/运行在页面用户上下文能摸到 three.js 对象Content Scriptsrc/extension/contentScript.js通过postMessage中转Backgroundsrc/extension/background.js按tabId把消息转发给对应面板DevTools 面板src/app/前端应用渲染而反方向面板 → 页面走得更直接面板通过chrome.devtools.inspectedWindow.eval()直接在用户上下文执行命令例如选中某个对象、修改某个数值。之所以要设计这么绕是因为纹理等大数据base64 字符串走 eval 轮询会严重卡顿只能走 port 消息通道。页面接入也很简单three.js 应用只需注册场景与渲染器if (typeof __THREE_DEVTOOLS__ ! undefined) { __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent(observe, { detail: scene })); __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent(observe, { detail: renderer })); } 构建打包3 个 npm 脚本要分清构建命令定义在 package.json 的 scripts 中实际逻辑在 scripts/build-dist.sh命令用途npm run build:deps用 pika/web 重新生成 web_modules/升级依赖后才需要npm run build:dist打包通用 zipFirefox/非 Chrome 浏览器npm run build:dist:chrome打包 Chrome 专用 zip自动移除browser_specific_settings字段npm run build:source打包未构建的源码zip供 AMO 源码审查使用 为什么 Chrome 要单独构建因为 Chrome 不认识 manifest 里的browser_specific_settings键脚本会先删掉该字段再打包消除警告。️ 版本号管理一条命令同步所有文件npm version patch # 或 minor / major这条命令会同时更新 package.json 与 manifest.json 中的版本号由 scripts/version.js 完成并自动打 git tag、推送到远端。发布前务必先执行这一步。 发布到 Chrome 网上应用店Chrome Web Store完整发布流程双端自测npx web-ext run测 Firefoxchrome://extensions加载已解压测 Chrome提升版本号npm version minorChrome 专用构建npm run build:dist:chrome产物在dist/目录上传登录 Chrome 开发者后台Chrome Developer Dashboard找到 Three.js Developer Tools 条目点击编辑上传dist/three.js_developer_tools_*.zip等待审核由于扩展申请了http://*/*与https://*/*等宽泛权限审核时间会稍长接受审核提示即可 顺便发布到 Firefox AMOnpm run build:dist生成主构建npm run build:source生成源码包登录 AMO 开发者后台上传dist/three.js_developer_tools_*.zip因使用 pika/web 打包了依赖按 AMO 源码提交政策还需上传dist/three-devtools-source.zip 新手常见坑位清单改完 src/content 没效果这类脚本是注入到用户上下文的必须重载扩展并刷新页面注入方式为什么奇怪Content Script 拿不到页面 JS 全局变量所以 contentScript.js 会动态插入script同步注入window.__THREE_DEVTOOLS__让页面代码尽早可注册依赖变了要重新 build:deps 吗要。web_modules/ 是预构建产物package.json依赖更新后执行npm run build:deps重新生成想跑示例场景项目自带 examples/ 下的多个演示页scenes.html、materials.html、large-data.html 等npm run serve后浏览器打开即可✅ 小结三步起步克隆 →npm install→chrome://extensions加载已解压数据流记住4 上下文注入 → content script → background → 面板发布前必做双端自测 npm versionbuild:dist:chromeChrome 上传 zip 到开发者后台即可Firefox 另需提交源码包掌握这条从本地调试到 Chrome 网上应用店发布的完整链路你就能独立迭代 three-devtools 这个 three.js 3D 开发工具了。祝开发顺利【免费下载链接】three-devtoolsthree.js devtools项目地址: https://gitcode.com/gh_mirrors/th/three-devtools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考