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

Devtools mv3 samples (#938)

Browse Source 
* devtools sample

* Added readme

* Updated readme

* Changed folder structure

* Update devtools.html

* Update devtools.js

* Update devtools.js

* Update api-samples/devtools/chrome-query/chrome-query.md

Co-authored-by: Joe Medley <jmedley@google.com>

* Changed folder name

* readme name change

---------

Co-authored-by: Joe Medley <jmedley@google.com>
This commit is contained in:
IanStanion-google
2023-06-23 10:08:52 -04:00
committed by GitHub
parent 2527b666a6
commit be334066a2
4 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
api-samples/devtools/panels/devtools.html Normal file
View File

@@ -0,0 +1,17 @@
<!--
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.
-->
<html>
<body>
<script src="devtools.js"></script>
</body>
</html>

38
api-samples/devtools/panels/devtools.js Normal file
View File

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

7
api-samples/devtools/panels/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
}

15
api-samples/devtools/panels/readme.md Normal file
View File

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