Devtools mv3 samples (GoogleChrome#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 <[email protected]> * Changed folder name * readme name change --------- Co-authored-by: Joe Medley <[email protected]>
ChiefUSA · Jun 23, 2023 · be33406 · be33406
1 parent 2527b66
commit be33406
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 0 deletions.
diff --git a/api-samples/devtools/panels/devtools.html b/api-samples/devtools/panels/devtools.html
@@ -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>
diff --git a/api-samples/devtools/panels/devtools.js 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
@@ -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
@@ -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.