centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

devtools sample

Browse Source
This commit is contained in:
Ian Stanion
2023-06-02 09:38:48 -04:00
parent ee2c6fcad0
commit c27d40cd43
3 changed files with 40 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
api-samples/devtools/panels/chrome-query/devtools.html Normal file
View File

@@ -0,0 +1,5 @@
<html>
<body>
<script src="devtools.js"></script>
</body>
</html>

28
api-samples/devtools/panels/chrome-query/devtools.js Normal file
View File

@@ -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
);
}
);

7
api-samples/devtools/panels/chrome-query/manifest.json Normal file
View File

@@ -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
}