diff --git a/api-samples/devtools/panels/devtools.html b/api-samples/devtools/panels/devtools.html new file mode 100644 index 0000000000..57dae4eb1b --- /dev/null +++ b/api-samples/devtools/panels/devtools.html @@ -0,0 +1,17 @@ + + + + + + diff --git a/api-samples/devtools/panels/devtools.js b/api-samples/devtools/panels/devtools.js new file mode 100644 index 0000000000..9da31d05d7 --- /dev/null +++ b/api-samples/devtools/panels/devtools.js @@ -0,0 +1,38 @@ +// Copyright 2023 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// https://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// The function below is executed in the context of the inspected page. +/*global $0*/ +const 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; +}; + +chrome.devtools.panels.elements.createSidebarPane( + 'jQuery Properties', + function (sidebar) { + function updateElementProperties() { + sidebar.setExpression('(' + page_getProperties.toString() + ')()'); + } + updateElementProperties(); + chrome.devtools.panels.elements.onSelectionChanged.addListener( + updateElementProperties + ); + } +); diff --git a/api-samples/devtools/panels/manifest.json b/api-samples/devtools/panels/manifest.json new file mode 100644 index 0000000000..0934377547 --- /dev/null +++ b/api-samples/devtools/panels/manifest.json @@ -0,0 +1,7 @@ +{ + "name": "Chrome Query", + "version": "1.2", + "description": "Extends the Developer Tools, adding a sidebar that displays the jQuery data associated with the selected DOM element.", + "devtools_page": "devtools.html", + "manifest_version": 3 +} diff --git a/api-samples/devtools/panels/readme.md b/api-samples/devtools/panels/readme.md new file mode 100644 index 0000000000..5c1c71b457 --- /dev/null +++ b/api-samples/devtools/panels/readme.md @@ -0,0 +1,15 @@ +# devtools + +This sample demonstrates using the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element. + +## Overview + +This extension shows how DevTools can be expanded with new elements. It contains HTML and JavaScript files that are injected into the DevTools page to expand its functionality. + +## Running this extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Go to https://jqueryui.com/resources/demos/draggable/default.html (a site that uses jQuery). +4. Open DevTools and select the div id="draggable" in the elements panel. +5. Find the "jQuery Properties" section and open it to access the newly added sidear.