From c27d40cd4309e1f537e4443c2faccaf6f04b8769 Mon Sep 17 00:00:00 2001 From: Ian Stanion Date: Fri, 2 Jun 2023 09:38:48 -0400 Subject: [PATCH] devtools sample --- .../panels/chrome-query/devtools.html | 5 ++++ .../devtools/panels/chrome-query/devtools.js | 28 +++++++++++++++++++ .../panels/chrome-query/manifest.json | 7 +++++ 3 files changed, 40 insertions(+) create mode 100644 api-samples/devtools/panels/chrome-query/devtools.html create mode 100644 api-samples/devtools/panels/chrome-query/devtools.js create mode 100644 api-samples/devtools/panels/chrome-query/manifest.json diff --git a/api-samples/devtools/panels/chrome-query/devtools.html b/api-samples/devtools/panels/chrome-query/devtools.html new file mode 100644 index 00000000..cf923624 --- /dev/null +++ b/api-samples/devtools/panels/chrome-query/devtools.html @@ -0,0 +1,5 @@ + + + + + diff --git a/api-samples/devtools/panels/chrome-query/devtools.js b/api-samples/devtools/panels/chrome-query/devtools.js new file mode 100644 index 00000000..f10c65ed --- /dev/null +++ b/api-samples/devtools/panels/chrome-query/devtools.js @@ -0,0 +1,28 @@ +// Copyright (c) 2012 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +// The function below is executed in the context of the inspected page. +/*global $0*/ +let 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/chrome-query/manifest.json b/api-samples/devtools/panels/chrome-query/manifest.json new file mode 100644 index 00000000..09343775 --- /dev/null +++ b/api-samples/devtools/panels/chrome-query/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 +}