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 |
+|---|---|---|---|---|
+| Custom DevTools tool | 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 tool
 
-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 Microsoft Edge extension sample 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 to each other.
+
+For instructions, see [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool).

devtools-extension/devtools.js

@@ -0,0 +1,57 @@
+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 API.
+        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!");');
+        });
+    });
+});
+
+// Update the Memory display.
+setInterval(() => {
+    chrome.system.memory.getInfo((data) => {
+        if (availableMemoryCapacity) {
+            availableMemoryCapacity.innerHTML = data.availableCapacity;
+        }
+        if (totalMemoryCapacity) {
+            totalMemoryCapacity.innerHTML = data.capacity;
+        }
+    });
+}, 1000);
+
+// Send a message from the 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 = `(${request.xPosition}, ${request.yPosition})`;
+        }
+        sendResponse({
+            xPosition: request.xPosition,
+            yPosition: request.yPosition
+        });
+    }
+});
+
+// Create a connection to the background service worker.
+const backgroundPageConnection = chrome.runtime.connect({
+    name: "devtools-page"
+});
+
+// Relay the tab ID to the background service worker.
+backgroundPageConnection.postMessage({
+    name: 'init',
+    tabId: chrome.devtools.inspectedWindow.tabId
+});

devtools-extension/manifest.json

@@ -0,0 +1,23 @@
+{
+    "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://*/*"
+        ],
+        "run_at": "document_idle",
+        "js": [
+            "content_script.js"
+        ]
+    }],
+    "background": {
+        "service_worker": "service-worker.js"
+    },
+    "permissions": [
+        "system.memory"
+    ]
+}

devtools-extension/panel.html

@@ -0,0 +1,26 @@
+<!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 to the inspected page"><!-- todo: alert is sometimes displayed twice (in "main" as well) -->
+    <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>

devtools-extension/sample 4/background.js → devtools-extension/service-worker.js

@@ -2,17 +2,17 @@ let id = null;
 const connections = {};
 
 chrome.runtime.onConnect.addListener(devToolsConnection => {
-    // Assign the listener function to a variable so we can remove it later
+    // Assign the listener function to a variable, so we can remove it later.
     let devToolsListener = (message, sender, sendResponse) => {
         if (message.name == "init") {
             id = message.tabId;
             connections[id] = devToolsConnection;
-            // Send a message back to DevTools
-            connections[id].postMessage("Connected!");
+            // Send a message back to DevTools.
+            connections[id].postMessage("Connected!"); // todo: where can we see the message "Connected!" in DevTools?
         }
     };
 
-    // Listen to messages sent from the DevTools page
+    // Listen to messages sent from the DevTools page.
     devToolsConnection.onMessage.addListener(devToolsListener);
 
     devToolsConnection.onDisconnect.addListener(() => {