Delete per-phase dirs from /devtools-extension/

README.md

@@ -80,13 +80,9 @@ https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-extens
 sync'd July 30, 2025
 -->
 
-| Demo name | Description and docs | Source code & Readme | Live demo page |
-|---|---|---|---|
-| DevTools extension | Used for [Create a DevTools extension, adding a custom tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a |
-| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) | n/a |
-| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) | n/a |
-| CDP | A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs. | [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) | n/a |
-| Inspect | A basic DevTools extension that interacts with the Inspected page. | [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) | n/a |
+| Demo name | Description | Docs | Source code & Readme | Live demo page |
+|---|---|---|---|---|
+| DevTools extension | A Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools. | [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool) | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a |
 
 See also:
 * [Samples for Microsoft Edge extensions](https://learn.microsoft.com/microsoft-edge/extensions/samples).  Includes samples that are in the **microsoft / MicrosoftEdge-Extensions** repo:

devtools-extension/README.md

@@ -1,3 +1,9 @@
-# Create your own DevTools extension
+# Custom DevTools extension
 
-This is the source code for the tutorial to create a Microsoft Edge extension that extends DevTools.  See [Create a DevTools extension, adding a custom tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension).
+This DevTools Extension sample is a Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools, including a tab in the **Activity Bar**, and a panel below the tab.
+
+* The **Custom** DevTools tool calls the DevTools API to display memory information.
+
+* The webpage under inspection, and the **Custom** DevTools tool, send messages back and forth, in two-way communication.
+
+For instructions, see [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool).

devtools-extension/sample 4/devtools.js → devtools-extension/devtools.js

@@ -1,22 +1,42 @@
-let youClickedOn; 
-chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
+let availableMemoryCapacity;
+let totalMemoryCapacity;
+let youClickedOn;
+
+chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
     // code invoked on panel creation
     panel.onShown.addListener( (extPanelWindow) => {
+        // memory
+        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
+        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
+        // 2-way message sending
         let sayHello = extPanelWindow.document.querySelector('#sayHello');
         youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
         sayHello.addEventListener("click", () => {
             // show a greeting alert in the inspected page
-            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools Extension");');
-        });             
+            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");');
+        });
     });
 });
 
+// Update Memory display
+setInterval(() => {
+    chrome.system.memory.getInfo((data) => {
+        if (availableMemoryCapacity) {
+            availableMemoryCapacity.innerHTML = data.availableCapacity;
+        }
+        if (totalMemoryCapacity) {
+            totalMemoryCapacity.innerHTML = data.capacity;
+        }
+    });
+}, 1000);
+
+// Send message from inspected page to DevTools
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     // Messages from content scripts should have sender.tab set
     if (sender.tab && request.click == true) {
         console.log('I am here!');
         if (youClickedOn) {
-            youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
+            youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`;
         }
         sendResponse({
             xPosition: request.xPosition,

devtools-extension/sample 4/manifest.json → devtools-extension/manifest.json

@@ -1,20 +1,23 @@
 {
-    "name": "DevTools Sample Extension",
-    "description": "A Basic DevTools Extension Interacting with the Inspected Page",
+    "name": "Custom DevTools Tool",
+    "description": "A DevTools extension interacting with the inspected page",
     "manifest_version": 3,
     "version": "1.0",
     "devtools_page": "devtools.html",
     "content_scripts": [{
         "matches": [
-          "http://*/*",
-          "https://*/*"
+            "http://*/*",
+            "https://*/*"
         ],
         "run_at": "document_idle",
         "js": [
-          "content_script.js"
+            "content_script.js"
         ]
     }],
     "background": {
         "service_worker": "background.js"
-    }
+    },
+    "permissions": [
+        "system.memory"
+    ]
 }

devtools-extension/panel.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <h2>Custom DevTools Tool</h2>
+
+    <h3>Memory</h3>
+    <div>
+      <b>Available Memory Capacity:</b> <span id="availableMemoryCapacity"></span>
+    </div>
+    <div>
+      <b>Total Memory Capacity:</b> <span id="totalMemoryCapacity"></span>
+    </div>
+
+    <h3>Send message from DevTools to inspected page</h3>
+    <input type="button" id="sayHello" value="Say Hello">
+
+    <h3>Send message from inspected page to DevTools</h3>
+    <p>Click somewhere in the inspected webpage.</p>
+    <div>
+      <b>Coordinates:</b> <span id="youClickedOn"></span>
+    </div>
+
+  </body>
+</html>