Chrome Extensions Samples 实战：使用 chrome.devtools.panels API 为 Elements 面板注入 jQuery 数据侧边栏

Chrome Extensions Samples 实战使用 chrome.devtools.panels API 为 Elements 面板注入 jQuery 数据侧边栏【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址: https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples本文基于 chrome-extensions-samples 仓库中的 api-samples/devtools/panels 示例对应文档为 readme.md系统讲解如何利用 Manifest V3 的devtools_page机制与chrome.devtools.panels.elements.createSidebarPane()API在 Chrome DevTools 的 Elements 面板中新增一个自定义侧边栏实时展示被选中 DOM 元素上绑定的 jQuery 数据。读完本文你将掌握 DevTools 扩展的入口配置、侧边栏创建、表达式注入与选区变化监听这四条核心链路并能独立复刻与扩展这一能力。一、示例要解决什么问题在 jQuery 应用中插件与业务逻辑经常通过jQuery.data()在 DOM 节点上挂载数据。这些数据在 Elements 面板的属性树中是看不到的——开发者若要排查某个元素上绑定了哪些数据只能回到控制台手动执行$0相关的jQuery.data()调用效率很低。本示例的答案非常直接把一个名为jQuery Properties的侧边栏注入到 DevTools 的 Elements 面板中每当用户选中一个 DOM 元素侧边栏就自动展示该元素上jQuery.data()返回的全部键值对。整个扩展只有三个文件manifest.json声明扩展是 DevTools 扩展并指向入口 HTMLdevtools.htmlDevTools 扩展的入口页面负责加载脚本devtools.js核心逻辑创建侧边栏并注入表达式。二、扩展 DevTools 的原理与入口配置DevTools 扩展的工作机制是浏览器将扩展的 HTML 页面注入到 DevTools 自身的页面环境中运行这个页面被称为 devtools page它可以调用chrome.devtools.*系列 API 来向 DevTools 界面添加面板、侧边栏或访问被检查页面的上下文。入口配置完全集中在 manifest.json 中全文如下{ name: Devtools - Chrome Query, version: 1.2, description: Uses the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element., devtools_page: devtools.html, manifest_version: 3 }关键字段说明devtools_pageDevTools 扩展的入口点值为入口 HTML 的相对路径。只有声明了该字段的扩展才会被加载进 DevTools 窗口声明后每次打开 DevToolsdevtools.html都会被注入执行。manifest_version: 3当前示例使用 Manifest V3 规范DevTools 扩展同样遵循 MV3 的结构约束。值得注意的是本示例不需要任何 permissions 权限声明——chrome.devtools相关 API 无需额外权限即可使用这使 DevTools 扩展的门槛非常低。入口页面 devtools.html 同样极简body中仅包含一行script srcdevtools.js/script所有初始化逻辑都在 devtools.js 中执行。三、核心实现创建 Elements 侧边栏devtools.js 是整个示例的灵魂它演示了三条关键 API 的配合使用createSidebarPane、setExpression与onSelectionChanged。3.1 创建侧边栏chrome.devtools.panels.elements.createSidebarPane( jQuery Properties, function (sidebar) { // ... } );chrome.devtools.panels.elements.createSidebarPane(title, callback)会在 DevTools 的Elements 面板中新增一个名为jQuery Properties的侧边栏并在回调中返回sidebar对象一个ExtensionSidebarPane。侧边栏会出现在 Elements 面板右侧的标签页区域中与 Styles、Computed 等内置侧边栏并列。3.2 向被检查页面注入表达式侧边栏内容不是通过 DOM 直接填充的而是通过setExpression把一段 JavaScript表达式交给 DevTools 在被检查页面的上下文中求值并将求值结果渲染为对象树sidebar.setExpression(( page_getProperties.toString() )());这里有个非常巧妙的细节page_getProperties是定义在扩展侧devtools.js的函数通过toString()序列化为源码字符串拼接成一段立即执行函数表达式后注入到页面。这样做的好处是函数体在被检查页面的全局作用域中执行因此可以直接访问页面的window.jQuery与$0扩展代码与被检查页面之间无需显式通信通道实现最简。3.3 监听选区变化updateElementProperties(); chrome.devtools.panels.elements.onSelectionChanged.addListener( updateElementProperties );chrome.devtools.panels.elements.onSelectionChanged在用户在 Elements 面板中切换选中的 DOM 节点时触发。代码在创建侧边栏后先立即调用一次updateElementProperties()渲染初始选中元素随后注册监听器保证每次选区变化侧边栏内容都能实时刷新。四、被注入函数从 jQuery 数据中提取属性page_getProperties是在被检查页面上下文中运行的函数其实现如下见 devtools.jsconst page_getProperties function () { let data window.jQuery $0 ? jQuery.data($0) : {}; // Make a shallow copy with a null prototype, so that sidebar does not // expose prototype. let props Object.getOwnPropertyNames(data); let copy { __proto__: null }; for (let i 0; i props.length; i) copy[props[i]] data[props[i]]; return copy; };逐行拆解其逻辑取值守卫window.jQuery $0确保页面确实引入了 jQuery 且当前存在被选中的元素$0是 DevTools 提供的指向当前选中元素的全局变量若条件不满足返回空对象{}侧边栏显示空内容而不是报错。读取数据jQuery.data($0)返回当前选中元素上绑定的全部数据对象。防御性拷贝用Object.getOwnPropertyNames(data)拿到自有属性名再构造一个原型为null{ __proto__: null }的浅拷贝对象。这样做的目的是侧边栏在渲染对象树时会遍历可枚举属性若直接返回jQuery.data()的原始对象可能连带暴露其原型链上的方法拷贝成 null 原型对象后界面只会呈现数据本身的键值对干净且安全。注意/*global $0*/只是代码中用于规避静态检查器对$0未定义报错的注释运行时$0由 DevTools 提供。五、运行与验证步骤按照 readme.md 中的指引完整验证流程如下克隆仓库git clone https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples进入api-samples/devtools/panels目录。以未打包扩展加载在 Chrome 地址栏打开chrome://extensions开启开发者模式点击加载已解压的扩展程序选择该目录。打开一个使用 jQuery 的站点文档中给出的验证页面是 jQuery UI 官方示例页jqueryui.com/resources/demos/draggable/default.html该页面同时满足引入了 jQuery与元素上绑定了数据两个条件。选中元素打开 DevTools在 Elements 面板中选中div iddraggable。查看侧边栏在 Elements 面板的侧边栏标签区找到 jQuery Properties 并展开即可看到该元素上绑定的 jQuery 数据键值对。需要说明的适用前提侧边栏能展示数据的前提是被检查页面引入了 jQuery 且当前选中元素确实通过jQuery.data()挂载过数据jQuery UI 的 draggable 组件正是如此。在普通页面或未选中元素时侧边栏会显示空对象这属于预期行为而非 bug。六、横向对比createSidebarPane 与 panels.create同一仓库的 api-samples/devtools/inspectedWindow 示例展示了 DevTools API 的另一类扩展形态——独立面板chrome.devtools.panels.create(demo panel, icon.png, panel.html, () { console.log(user switched to this panel); });两者的区别与适用场景可以从代码层面直接对比维度createSidebarPane本示例panels.createinspectedWindow 示例挂载位置Elements 面板内的侧边栏标签DevTools 顶部独立面板标签内容更新方式setExpression注入表达式求值面板内自行管理 DOM 与消息通信典型场景跟随选区实时展示元素相关数据资源统计、请求分析等独立工具视图配套 APIonSelectionChanged、sidebar.setExpressioninspectedWindow.getResources()等可以看出本示例选择的createSidebarPane路线天然适合跟随用户当前选中元素展示上下文信息的场景若需要更复杂、独立的交互界面则应参考 inspectedWindow 示例改用panels.create。七、拓展思路基于本示例的最小骨架可以自然延伸出多种实用扩展通用数据检视器将jQuery.data替换为其他框架的数据读取方式如 React Fiber 节点、Vue 组件的__vue__属性即可为任意框架定制元素检视侧边栏多侧边栏多次调用createSidebarPane可创建多个不同主题的侧边栏分别展示不同类型的数据更复杂的渲染setExpression之后还可以用sidebar.setObject()直接注入对象或结合消息通信将原始 DOM 节点拖入侧边栏做自定义渲染权限说明本示例无需任何 permissions而一旦需要在 devtools 页面与后台 service worker 之间通信则需按 MV3 规范补充相应声明详见仓库中其他 api-samples/devtools 目录下的示例。总结通过 api-samples/devtools/panels 这个不足百行代码的示例我们完整走通了 DevTools 扩展的四条核心链路manifest.json的devtools_page入口声明、createSidebarPane侧边栏创建、setExpression的表达式注入求值、以及onSelectionChanged的选区实时监听。这套模式是构建元素级上下文检视工具的最小范式值得作为任何 DevTools 扩展项目的起点模板。【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址: https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考