mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00

Files

IanStanion-google be334066a2 Devtools mv3 samples (#938 )

* 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>

2023-06-23 10:08:52 -04:00

devtools.html

Devtools mv3 samples (#938 )

2023-06-23 10:08:52 -04:00

devtools.js

Devtools mv3 samples (#938 )

2023-06-23 10:08:52 -04:00

manifest.json

Devtools mv3 samples (#938 )

2023-06-23 10:08:52 -04:00

readme.md

Devtools mv3 samples (#938 )

2023-06-23 10:08:52 -04:00

readme.md

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

Clone this repository.
Load this directory in Chrome as an unpacked extension.
Go to https://jqueryui.com/resources/demos/draggable/default.html (a site that uses jQuery).
Open DevTools and select the div id="draggable" in the elements panel.
Find the "jQuery Properties" section and open it to access the newly added sidear.