diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png
similarity index 100%
rename from microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png
rename to microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png
new file mode 100644
index 0000000000..81b2a7b1d9
Binary files /dev/null and b/microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png
deleted file mode 100644
index 31faa3a563..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png
deleted file mode 100644
index af74fde60d..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png
deleted file mode 100644
index 826bc55a51..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png
deleted file mode 100644
index 9fb4391a2a..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png
deleted file mode 100644
index 9c18e9be67..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png
deleted file mode 100644
index fa4ea0a873..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png
deleted file mode 100644
index 659cfed9d2..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png
deleted file mode 100644
index 2249ad9b1c..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png b/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png
deleted file mode 100644
index a7bef75d8f..0000000000
Binary files a/microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png and /dev/null differ
diff --git a/microsoft-edge/extensions/developer-guide/devtools-extension.md b/microsoft-edge/extensions/developer-guide/devtools-extension.md
index fcabfac479..816e4f80a9 100644
--- a/microsoft-edge/extensions/developer-guide/devtools-extension.md
+++ b/microsoft-edge/extensions/developer-guide/devtools-extension.md
@@ -1,374 +1,74 @@
 ---
 title: Create a DevTools extension, adding a custom tool tab and panel
-description: In this tutorial, you learn to build a Microsoft Edge extension that extends DevTools. At the end of the tutorial, you should have a working DevTools extension that creates its own panel and interacts with the DevTools extension APIs.
+description: Build a Microsoft Edge extension that adds a custom tool in DevTools, including a tool tab and panel.  Communicate between DevTools and the inspected webpage, and call DevTools APIs.
 author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
 ms.subservice: extensions
-ms.date: 11/18/2024
+ms.date: 10/27/2025
 ---
 # Create a DevTools extension, adding a custom tool tab and panel
+<!-- live: https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension -->
+<!-- equiv: https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools#devtools_extension_examples -->
 
-This article provides a sample and code walkthrough for a Microsoft Edge extension that adds a tool tab and panel in DevTools.
+todo: strategy: first get familiar with the sample's code: purpose of the 8 files:
+1. move all info about specific files to the Code article
+2. arrange all info into a nice format in the Code article
+3. design the Background article, after understand the code
 
-This article first shows how to install and run the provided DevTools extension sample, which adds a **Sample Panel** tool tab in DevTools within Microsoft Edge.  The sample is a working DevTools extension that creates its own panel, and interacts with the DevTools APIs.
+To add a custom tool in Microsoft Edge DevTools, create a Microsoft Edge extension.
 
-This article then presents a tutorial that shows how you can optionally create that sample from scratch, and explains each step of developing the sample, and how the added code works.  These tutorial steps are a good way to experience everything that's needed for typical development.
+The DevTools Extension sample displays a custom tool in DevTools, including a **Custom** tab in the **Activity Bar** and a panel connected to the tab:
 
-See also:
-* [Overview of DevTools](../../devtools/overview.md)
-
-
-<!-- ====================================================================== -->
-## Download, install, and run the DevTools extension sample
-
-To download, install, run, and test the provided, finished DevTools extension sample:
-
-1. Download the final extension code by clicking [Demos-main.zip](https://codeload.github.com/MicrosoftEdge/Demos/zip/refs/heads/main) and then extracting its content to a folder on your computer.
-
-1. Open Microsoft Edge and go to `edge://extensions/`.
-
-1. Turn on the  **Developer mode** toggle.
-
-1. Click **Load unpacked** and navigate to the folder where you extracted the zip file.  In this folder, select **Demos-main** > **devtools-extension** > **sample 4**, and then click **Select Folder**.
-
-   ![The edge://extensions page in Microsoft Edge, showing the Developer mode and Load unpacked buttons](./devtools-extension-images/edge-extensions-page.png)
-
-   The DevTools extension is loaded.
-
-1. In Microsoft Edge, open a new tab.
-
-1. Open DevTools (**F12**).
-
-1. Select the **Sample Panel** tool (tab).
-
-   The **Sample Panel** tool opens:
-
-   ![Microsoft Edge, showing DevTools on the side, with the extension's Sample Panel selected](./devtools-extension-images/solution-sample-panel.png)
-
-1. Click the **Say Hello to the inspected page** button.
-
-   An alert is displayed in the inspected page:
-
-   ![Microsoft Edge, showing the new extension panel in DevTools on the side, and an alert dialog window](./devtools-extension-images/devtools-extension-show-greeting.png)
+![Custom tab](./devtools-extension-images/custom-tab-activity-bar.png)
 
-1. Click the **OK** button to close the alert.
+A basic extension for Microsoft Edge consists of a manifest file (`manifest.json`).
 
-1. Click anywhere in the inspected page.
+An extension that extends DevTools additionally includes a webpage file, `devtools.html`, that just loads `devtools.js`
 
-   A message is displayed in the extension panel: **You clicked on position (199, 509) in the inspected page**:
+A _panel_ is a tool page in Microsoft Edge DevTools, along with the tool's tab in the **Activity Bar**.
 
-   ![The sample panel in DevTools showing the clicked position message](./devtools-extension-images/devtools-extension-show-position.png)
+To create a basic DevTools extension with a sample panel; to create a new panel (tool tab) in DevTools, by adding `devtools.js` and `panel.html`.
 
-1. Select the **Console** tool.
-
-   A message appears in the **Console** tool: **Received response > _{xPosition: 199, yPosition: 509}_**:
-
-   ![The DevTools Console tool showing the clicked position message](./devtools-extension-images/devtools-extension-show-position-in-console.png)
-
-You downloaded, installed, ran, and tested the provided, finished DevTools extension sample.  In the next steps, you create the same sample by starting from an empty directory.  The following sections explain how the code works.
-
-
-<!-- ====================================================================== -->
-## Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage
-
-If you want to create the files for each major step below, install a code editor such as [Visual Studio Code](https://code.visualstudio.com/), to follow the tutorial steps below to manually re-create the above sample DevTools extension.  You can read the code walkthrough below, presented as four major steps or phases.
-
-A basic extension for Microsoft Edge consists of a manifest file (`manifest.json`).  Because this particular extension extends DevTools, this extension also includes a webpage file, `devtools.html`.  The two files are provided in the `Microsoft Edge / Demos` repo > [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) directory.  The directory contains the files: 
+That's in addition to the more basic files, which are:
 * `devtools.html`
 * `manifest.json`
 
-
-<!-- ------------------------------ -->
-#### manifest.json
-
-`manifest.json` is a manifest file, containing key/value pairs.  The top-level keys are called _members_:
-
-```json
-{
-    "name": "DevTools Sample Extension",
-    "description": "A Basic DevTools Extension",
-    "manifest_version": 3,
-    "version": "1.0",
-    "devtools_page": "devtools.html"
-}
-```
-
-| Member | Description |
-|----------|-------------|
-| `name` | The name of the extension that will appear under `edge://extensions/`. |
-| `description` | The description of the extension that will be displayed under the name of the extension. |
-| `version` | The version of the extension that will appear next to the name of the extension. |
-| `manifest_version` | Determines the set of features that the extension will be using, such as service workers or network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](./manifest-v3.md). |
-| `devtools_page` | The path to an HTML file that's run every time DevTools is opened, and loads the extension's JavaScript files.  This page isn't rendered in DevTools. |
-
-
-<!-- ------------------------------ -->
-#### devtools.html
-
-`devtools.html` matches the `devtools_page` member in the manifest file:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-  </head>
-  <body>
-    A Basic DevTools Extension.
-  </body>
-</html>
-```
-
-In a later step, you'll add a `<script>` element in the above file, to load a JavaScript file.  This HTML file isn't displayed in DevTools.
-
-
-<!-- ---------------------------------------------------------------------- -->
-#### Install and test the basic Microsoft Edge extension
+See also:
+* [Overview of DevTools](../../devtools/overview.md)<!-- long jump -->
+* [Sample: Custom DevTools tool](../samples/custom-devtools-tool.md)
+* [Code for Custom DevTools tool](../samples/custom-devtools-tool-code.md)
 
 Loading and testing an Edge extension locally is sometimes called _sideloading_ an extension, as opposed to distributing an extension to users.
 
-To load and test your basic extension locally in Microsoft Edge:
-
-1. In Microsoft Edge, go to `edge://extensions/`.
-
-1. Turn on the **Developer mode** toggle.
-
-1. Click **Load unpacked**, navigate to the folder where you wrote the code for your extension, and then click the **Select folder** button.
-
-   Your DevTools extension is loaded.
-
-1. Open a new tab.
-
-1. Open DevTools (**F12**).
-
-Your extension is loaded, but isn't displayed in DevTools yet, because you haven't created a panel for the extension.
-
 See also:
 * [Sideload an extension to install and test it locally](../getting-started/extension-sideloading.md)
 
 
 <!-- ====================================================================== -->
-## Step 2: Add a custom tool in DevTools
-
-In this step, you'll create a new panel (tool tab) in DevTools.  You can either:
-
-* Copy and paste the code from the `Microsoft Edge / Demos` repo > [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) directory.  That directory contains the following files:
-   * `devtools.html`
-   * `devtools.js` - Added in Step 2.
-   * `manifest.json`
-   * `panel.html` - Added in Step 2.
-
-* Copy and paste the code from the code listings below.
-
-A _panel_ is a tool tab in the main toolbar in DevTools, similar to the **Elements**, **Console**, and **Sources** tools shown below:
-
-![DevTools panels and sidebars](./devtools-extension-images/devtools-main-toolbar-tabs.png)
-
-
-To create a basic DevTools extension with a sample panel:
-
-1. Create a file named `devtools.js`.
-
-1. Copy and paste the following code into `devtools.js`:
-
-   ```javascript
-   chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
-       // code invoked on panel creation
-   });
-   ```
-
-   The `create` method has the following signature:
-
-   ```javascript
-   chrome.devtools.panels.create(
-       title: string, // Tool tab's label in Activity bar.
-       iconPath: string, // Icon to display in tool's tab.
-       pagePath: string, // Webpage to display in tool's panel.
-       callback: function // Code to run when tool is opened.
-   )
-   ```
-    
-   Reference:
-   * [chrome.devtools.panels](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels)
-      * [create()](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create)
-
-
-   **devtools.html:**
-
-1. Create a file named `devtools.html`.
-
-1. Copy and paste the following code into `devtools.html`:
-
-   ```html
-   <!DOCTYPE html>
-   <html>
-     <head>
-       <meta charset="UTF-8" />
-     </head>
-     <body>
-       <script src="devtools.js"></script>
-     </body>
-   </html>
-   ```
-
-   In the manifest file (`manifest.json`), the `devtools_page` field specifies the above file (`devtools.html`).  `devtools.html`, above, contains a `<script>` element that loads `devtools.js`.
-
-
-   **panel.html:**
-
-1. Create the `panel.html` file that you referenced in the previous `chrome.devtools.panels.create` method call.  This webpage will contain the user interface of the panel your extension is adding to DevTools.
-
-   ```html
-   <!DOCTYPE html>
-   <html>
-     <head>
-       <meta charset="UTF-8" />
-     </head>
-     <body>
-       <h1>A Basic DevTools Extension with Panel</h1>
-     </body>
-   </html>
-   ```
-
-
-<!-- ---------------------------------------------------------------------- -->
-#### Reload and test the DevTools extension
-
-To test your changes in Microsoft Edge, reload your extension from the `edge://extensions/` page:
-
-1. Go to `edge://extensions/`.
-
-1. Next to the DevTools extension sample that you installed before writing your own code, click **Reload**:
-
-   ![The Microsoft Edge extensions page showing where the Reload button is](./devtools-extension-images/edge-extensions-page-reload-button.png)
-
-   The DevTools extension is reloaded, now using the files that you created above, rather than the provided sample that you downloaded.
-
-1. Open a new tab in Microsoft Edge.
+## Display memory information by calling extension APIs
 
-1. Open DevTools (**F12**).
+Use extension APIs to display memory information in your DevTools panel.
 
-1. In the **Activity Bar**, select the **Sample Panel** tool (tab):
+`permissions` is in the manifest file, the panel interface, and the devtools script.
 
-   ![The new tool tab and panel in DevTools](./devtools-extension-images/devtools-extension-with-panel.png)
-
-
-<!-- ====================================================================== -->
-## Step 3: Display memory information by calling extension APIs
-
-In this step, you will use extension APIs to display memory information in your DevTools panel.  To do this, we will need to update the `permissions` in the manifest file, the panel interface, and the devtools script.  You can copy the source code files for this step from the `Microsoft Edge / Demos` repo > [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) directory, or create the files yourself by following the instructions below.  The directory contains the files: 
 * `devtools.html`
-* `devtools.js` - Updated in Step 3.
-* `manifest.json` - Updated in Step 3.
-* `panel.html` - Updated in Step 3.
-
-1. Use the `permissions` manifest member in your `manifest.json` file. This member defines which permissions your extension requires from the user. Some permissions are needed to use certain extension APIs.
-
-    ```json
-    "permissions": [
-      "system.memory",
-    ]
-    ```
-
-    The `system-memory` permission is required, in order to use the extension APIs that you'll use later in this tutorial.  To learn more about the available APIs and associated permissions, see [Reference](https://developer.chrome.com/docs/extensions/reference/) for extension APIs.
-
-
-    **panel.html:**
-
-1. Add the following to the body in the `panel.html` file to display the data in the panel.
-
-    ```html
-    <div>
-      Available Memory Capacity: <span id="availableMemoryCapacity"></span>
-    </div>
-    <div>
-      Total Memory Capacity: <span id="totalMemoryCapacity"></span>
-    </div>
-    ```
-
-
-    **devtools.js:**
-
-1. Update the `devtools.js` file with the following code.
-
-    ```javascript
-    let availableMemoryCapacity;
-    let totalMemoryCapacity;
-
-    chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
-        // code invoked on panel creation
-        panel.onShown.addListener((extPanelWindow) => {
-            availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
-            totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
-        });
-    });
-
-    setInterval(() => {
-        chrome.system.memory.getInfo((data) => {
-            if (availableMemoryCapacity) {
-                availableMemoryCapacity.innerHTML = data.availableCapacity;
-            }
-            if (totalMemoryCapacity) {
-                totalMemoryCapacity.innerHTML = data.capacity;
-            }
-        });
-    }, 1000);
-    ```
-
-The above code snippet does the following:
-
-1. Creates a new panel `Sample Panel` in DevTools.
-
-1. When the panel is displayed (`panel.onShown` listener), the `availableMemoryCapacity` and `totalMemoryCapacity` elements are retrieved from the DOM.
-
-1. Sets a timer to run code every second after the panel is shown.
-
-1. When the timer fires, the `chrome.system.memory.getInfo` method is used to retrieve the available and total memory capacity of the device and these values are displayed in the corresponding DOM elements.
-
-
-<!-- ---------------------------------------------------------------------- -->
-#### Reload and test the DevTools extension
-
-To test your changes in Microsoft Edge, reload your extension from the `edge://extensions/` page:
-
-1. Go to `edge://extensions/`.
-
-1. Next to your DevTools extension, click **Reload**.
-
-   Your DevTools extension is reloaded.
-
-1. Open a new tab.
-
-1. Open DevTools (**F12**).
-
-1. Select the **Sample Panel** tool.
-
-   Your DevTools extension shows the available and total memory capacities:
-
-   ![The new extension panel in DevTools, showing memory information](./devtools-extension-images/devtools-extension-with-memory-info.png)
-
-See also: 
-* [Reference](https://developer.chrome.com/docs/extensions/reference/)
+* `devtools.js` - `permissions`
+* `manifest.json` - `permissions`
+* `panel.html`
 
 
 <!-- ====================================================================== -->
-## Step 4: Interact between the webpage and DevTools
+## Interact between the webpage and DevTools
 
-In this step of the tutorial, you will add code that interacts with the inspected webpage. That code will:
+Code that interacts with the inspected webpage.  That code does the following:
 
 1. Listen to click events that happen on the webpage and log them into the DevTools **Console** tool.
+
 1. Display the mouse click position in the DevTools extension panel.
-1. When the user clicks a button in the DevTools extension panel, display a greeting alert in the inspected webpage.
 
-You can copy the files that are the end result of this step from the `Microsoft Edge / Demos` repo > [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) directory, or create the files yourself by following the instructions below.  The directory contains the files: 
-* `background.js` - added in Step 4.
-* `content_script.js` - added in Step 4.
-* `devtools.html`
-* `devtools.js` - updated in Step 4.
-* `manifest.json` - updated in Step 4.
-* `panel.html` - updated in Step 4.
+1. When the user clicks a button in the DevTools extension panel, display a greeting alert in the inspected webpage.
 
 The DevTools tool (panel) that you created so far doesn't have direct access to the inspected webpage, and doesn't run until DevTools is opened.  For this you will use a content script and a background service worker.
 
@@ -377,217 +77,59 @@ The DevTools tool (panel) that you created so far doesn't have direct access to
 
 The DevTools page, inspected page, content script, and background service worker fit together in an extension:
 
-![Diagram showing the anatomy of a DevTools extension](./devtools-extension-images/overall_screenshot_mv3.png)
-
-In this part of the tutorial, you'll detect the user clicks on a webpage by using a content script.  The content script will relay this info to the `devtools.js` file, where the data will be displayed in both the console and the DevTools extension panel.
-
-1. Append the following code in the `manifest.json` file:
-
-    ```json
-    "content_scripts": [{
-      "matches": [
-        "http://*/*",
-        "https://*/*"
-      ],
-      "run_at": "document_idle",
-      "js": [
-        "content_script.js"
-      ]
-    }],
-    "background": {
-        "service_worker": "background.js"
-    }
-    ```
-
-    | Key | Value |
-    |----------|-------|
-    | `matches` | Specifies which pages this content script will be injected into. |
-    | `run_at` | Indicates when the browser injects the script onto the page. |
-    | `js` | The javascript files to be injected. |
-
-
-    **content_script.js:**
-
-1. Create a file named `content_script.js`.
-
-1. Copy and paste the following code into `content_script.js`:
-
-    ```javascript
-    document.addEventListener("click", (event) => {
-      chrome.runtime.sendMessage({
-          click: true,
-          xPosition: event.clientX + document.body.scrollLeft,
-          yPosition: event.clientY + document.body.scrollTop
-        },
-        response => {
-          console.log("Received response", response);
-        }
-      );
-    });
-    ```
-
-    The above code snippet prints a message to the console when the script is injected in the page.  It also adds a click event listener to the page that will send a message with mouse click position in the inspected page by using the `chrome.runtime.sendMessage` API.
+![Diagram showing the anatomy of a DevTools extension](./devtools-extension-images/architecture.png)
 
+Detect the user clicks on a webpage by using a content script.  The content script relays this info to the `devtools.js` file, where the data will be displayed in both the console and the DevTools extension panel.
 
-    **panel.html:**
 
-1. In the `panel.html` file, add a `sayHello` button and a `youClickedOn` label, as follows:
-
-    ```html
-    <button id="sayHello">Say Hello to the inspected page!</button>
-    <h2><span id="youClickedOn"></span></h2>
-    ```
-
-    The above two elements are used to demo the interaction between the inspected page, the DevTools panel, and the background service worker.  When the user clicks the `sayHello` button in the DevTools extension, it will display a greeting message in the inspected window.  When the user clicks anywhere in the inspected page, it will display a message to show the mouse click position in the DevTools extension panel.
-
-
-    **devtools.js:**
-
-1. In the `devtools.js` file (as shown below), use the `chrome.runtime.connect` method to create a connection to the background service worker, and then send the inspected window `tabId` to the service worker by using the `backgroundPageConnection.postMessage` method. Finally, add event listeners to the `sayHello` button and `youClickedOn` label that's defined in the `panel.html` file, as shown below:
-
-    ```javascript
-    let youClickedOn; 
-    chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
-        // code invoked on panel creation
-        panel.onShown.addListener( (extPanelWindow) => {
-            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.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.`;
-            }
-            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
-    });
-    ```
-
-    When the user clicks the `sayHello` button, the DevTools extension will run a code snippet of `alert("Hello from the DevTools Extension");` in the inspected window by invoking the `eval()` method of the inspected window `chrome.devtools.inspectedWindow`.
-
-    When the user clicks anywhere in the inspected window, the DevTools extension will receive a message, from the background service worker, with `request.click == true` and the mouse position information.
-
-
-    **background.js:**
-
-1. Create a file named `background.js`.
-
-1. Copy and paste the following code into `background.js`:
-
-    ```javascript
-    let id = null;
-    const connections = {};
-
-    chrome.runtime.onConnect.addListener(devToolsConnection => {
-        // 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!");
-            }
-        };
-
-        // Listen to messages sent from the DevTools page
-        devToolsConnection.onMessage.addListener(devToolsListener);
-
-        devToolsConnection.onDisconnect.addListener(() => {
-            devToolsConnection.onMessage.removeListener(devToolsListener);
-        });
-    });
-    ```
-
-    The above code connects the background service worker with the DevTools page.  It listens to when the DevTools page connects, saves the connection, and sends a response back to the DevTools page.
-
-    This is useful when your background service worker is collecting data or performing tasks in the background that you want to be available in your DevTools extension.
-
-
-<!-- ---------------------------------------------------------------------- -->
-#### Reload and test the DevTools extension
-
-To test the new `sayHello` button:
-
-1. Go to `edge://extensions/`.
-
-1. Find the unpacked extension entry that you loaded in Step 1.
-
-1. Click the **Reload** button.
-
-1. Open a new browser tab, open DevTools (**F12**), and then click the **Sample Panel** tool (tab).
-
-1. Click the **Say Hello to The Inspected Page!** button.
-
-    An alert is displayed in the inspected page:
-
-    ![Microsoft Edge, showing the new extension panel in DevTools on the side, and an alert dialog window](./devtools-extension-images/devtools-extension-show-greeting.png)
-
-1. Click the **OK** button to close the alert.
+<!-- ====================================================================== -->
+## Troubleshooting
+<!-- add to [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md) ? -->
 
-1. Click anywhere in the inspected page.
+If the **Custom** tab isn't visible in DevTools, or it's outdated and doesn't show your code changes:
 
-   A message is displayed in the extension panel: **You clicked on position (199, 509) in the inspected page**:
+* Make DevTools wide, to show many tools in the **Activity Bar**.
 
-   ![The sample panel in DevTools showing the clicked position message](./devtools-extension-images/devtools-extension-show-position.png)
+* Close and reopen DevTools.
 
-1. Select the **Console** tool.
+* Refresh or hard-refresh the inspected page.
 
-   A message appears in the **Console** tool: **Received response > _{xPosition: 199, yPosition: 509}_**:
+* In Microsoft Edge, in the **Extensions** page, click **Reload** for the extension.
 
-   ![The DevTools Console tool showing the clicked position message](./devtools-extension-images/devtools-extension-show-position-in-console.png)
+* If no icon is provided in such an extension, the tab when not selected is narrow and gray, on the right side of the **Activity Bar**.  Click the narrow gray tab.
 
-This completes the tutorial and code walkthrough for creating a DevTools extension that adds a tool tab and panel in DevTools in Microsoft Edge.
+* Go to a webpage, not an empty tab.  The code in the **Custom** DevTools tool requires a webpage.
 
-See also:
-* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts)
+Custom Devtools tools are added to the **More tools** menu on the **Activity Bar** when the **Activity Bar** is narrow.  The tool's tab doesn't have a **Remove from Activity Bar** command on the right-click menu.
 
 
 <!-- ====================================================================== -->
 ## See also
-<!-- all links in article -->
+<!-- todo: all links in article -->
 
+* [Samples for Microsoft Edge extensions](../samples.md)<!-- link not in article -->
+* [Manifest V3](https://developer.chrome.com/docs/extensions/mv3)
+* [Extending DevTools](https://developer.chrome.com/docs/extensions/mv3/devtools/)
+* [CDP API Reference](https://developer.chrome.com/docs/extensions/reference/)
 * [Overview of DevTools](../../devtools/overview.md)
-* [Samples for Microsoft Edge extensions](../samples/index.md)
-* [Overview and timelines for migrating to Manifest V3](./manifest-v3.md)
+* [Sample: Picture viewer pop-up webpage](../getting-started/picture-viewer-popup-webpage.md)
+* [Overview and timelines for migrating to Manifest V3](../developer-guide/manifest-v3.md)
 * [Sideload an extension to install and test it locally](../getting-started/extension-sideloading.md)
 
-developer.chrome.com:
-* [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3)
+Chrome docs:
+* [Manifest reference](https://developer.chrome.com/docs/extensions/reference#manifest-reference)
 * [Extend DevTools](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools)
-* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts)
-* [Reference](https://developer.chrome.com/docs/extensions/reference/)
+* [Chrome Extensions Reference](https://developer.chrome.com/docs/extensions/reference/)
    * [chrome.devtools.panels](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels)
       * [create()](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create)
+   * [chrome.system.memory](https://developer.chrome.com/docs/extensions/reference/api/system/memory)
+      * [getInfo()](https://developer.chrome.com/docs/extensions/reference/api/system/memory#method-getInfo)
+
+* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts)
 
 GitHub:
-* [Demos-main.zip](https://codeload.github.com/MicrosoftEdge/Demos/zip/refs/heads/main) - Downloads the **MicrosoftEdge > Demos** repo, rather than cloning it.
-* [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/) - Source code of the sample.
-   * [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) - Phase 1 of the sample.
-   * [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) - Phase 2 of the sample.
-   * [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) - Phase 3 of the sample.
-   * [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) - Phase 4 of the sample.
-  
+* [Download Demos-main.zip](https://codeload.github.com/MicrosoftEdge/Demos/zip/refs/heads/main)
+* [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/) - source code.
+
 Tools:
 * [Visual Studio Code](https://code.visualstudio.com)
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png b/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png
new file mode 100644
index 0000000000..bb0dd0a881
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png
new file mode 100644
index 0000000000..6635536171
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-code.md b/microsoft-edge/extensions/samples/custom-devtools-tool-code.md
new file mode 100644
index 0000000000..470c8f5d37
--- /dev/null
+++ b/microsoft-edge/extensions/samples/custom-devtools-tool-code.md
@@ -0,0 +1,461 @@
+---
+title: Code for Custom DevTools tool
+description: Files and code in the Custom DevTools tool sample, which is a Microsoft Edge extension you can modify.  How the sample creates its own panel and interacts with the DevTools extension APIs.
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: conceptual
+ms.service: microsoft-edge
+ms.subservice: extensions
+ms.date: 10/27/2025
+---
+# Code for Custom DevTools tool
+
+[Sample: Custom DevTools tool](../samples/custom-devtools-tool.md) consists of the following files and code.
+
+The code that interacts with the inspected webpage does the following:
+
+1. Listens to click events that happen on the webpage and log them into the DevTools **Console** tool.
+
+1. Displays the mouse click position in the DevTools extension panel.
+
+1. When the user clicks a button in the DevTools extension panel, displays a greeting alert in the inspected webpage.
+
+See also:
+* [Overview of DevTools](../../devtools/overview.md)<!-- long jump -->
+* [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md)
+* [Sample: Custom DevTools tool](../samples/custom-devtools-tool.md)
+
+
+<!-- ====================================================================== -->
+## Architecture
+
+The DevTools page, inspected page, content script, and background service worker fit together in an extension:
+
+![Diagram showing the anatomy of a DevTools extension](./custom-devtools-tool-code-images/architecture.png)
+
+The `content_script.js` detects where the user clicks on the inspected webpage:
+
+```javascript
+document.addEventListener("click", (event) => {
+  chrome.runtime.sendMessage({
+      click: true,
+      xPosition: event.clientX + document.body.scrollLeft,
+      yPosition: event.clientY + document.body.scrollTop
+```
+
+The content script relays this info to the `devtools.js` file, where the data is displayed in DevTools in the **Custom** tool and in the **Console** tool.
+
+```javascript
+```
+
+
+<!-- ====================================================================== -->
+## Overview of files
+<!-- https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204 -->
+
+| File | Description |
+|---|---|
+| [manifest.json](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/manifest.json) | Information about the extension: name, description, version, manifest version, and HTML page to show in DevTools. |
+| [panel.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/panel.html) | Webpage to display in the custom panel in DevTools. |
+| [devtools.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.html) | A non-rendered HTML file run when DevTools is opened, to load the extension's JavaScript files. |
+| [background.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/background.js) | Service worker that sets up event listeners for communications between the inspected page and DevTools. |
+| [content_script.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/content_script.js) | Logic for the custom DevTools page.  Prints a message to the console when the script is injected in the page.  Adds a click event listener to the page that will send a message with mouse click position in the inspected page. |
+| [devtools.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.js) | Logic for the custom DevTools page. |
+| [icon.png](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/icon.png) | Icon to display on the tool's tab in the Activity bar of DevTools and in the **More tools** menu. |
+| [README.md](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/README.md) | Basic information for developers about how to use the sample. |
+
+Details about the files The sample has the following files:
+
+<!-- ====================================================================== -->
+## manifest.json
+
+The manifest file contains key/value pairs.  The top-level keys are called _members_.
+
+* [manifest.json](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/manifest.json) - Required.  Information about the extension: name, description, version, manifest version, and HTML page to show in DevTools.
+
+
+| Member | Description |
+|----------|-------------|
+| `name` | The name of the extension that will appear under `edge://extensions/`. |
+| `description` | The description of the extension that will be displayed under the name of the extension. |
+| `version` | The version of the extension that will appear next to the name of the extension. |
+| `manifest_version` | Determines the set of features that the extension will be using, such as service workers or network request modification. The current version is version `3`. To learn more about this version and the differences with version `2`, see [Overview and timelines for migrating to Manifest V3](../developer-guide/manifest-v3.md). |
+| `devtools_page` | The path to an HTML file that's run every time DevTools is opened, and loads the extension's JavaScript files.  This page isn't rendered in DevTools. |
+| `content_scripts` | foo |
+| `background` | foo |
+| `permissions` | The local device requires permissions to view its system memory capacity, since the script calls API for that. |
+
+`manifest.json`:
+
+```json
+{
+    "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": "background.js"
+    },
+    "permissions": [
+        "system.memory"
+    ]
+}
+```
+
+The `permissions` manifest member in `manifest.json` defines which permissions the extension requires from the user.  Some permissions are needed to use certain extension APIs.  The `system-memory` permission is required, in order to use the extension APIs.  Specific APIs have associated permissions.
+
+See also:
+* [Extensions API reference](https://developer.chrome.com/docs/extensions/reference/)
+
+
+Code from `manifest.json`:
+
+```json
+"content_scripts": [{
+  "matches": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "run_at": "document_idle",
+  "js": [
+    "content_script.js"
+  ]
+}],
+"background": {
+    "service_worker": "background.js"
+}
+```
+
+Keys within the "content_scripts" member:
+
+| Key | Value |
+|----------|-------|
+| `matches` | Specifies which pages this content script will be injected into. |
+| `run_at` | Indicates when the browser injects the script onto the page. |
+| `js` | The javascript files to be injected. |
+
+
+<!-- ====================================================================== -->
+## panel.html
+
+* [panel.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/panel.html) - Required.  Webpage to display in the custom panel in DevTools.
+
+`panel.html`:
+
+```html
+<!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>
+```
+
+`panel.html` is referenced in the previous `chrome.devtools.panels.create` method call.  This webpage contains the user interface of the custom tool's panel.
+
+Code from `panel.html`:
+
+a `sayHello` button and a `youClickedOn` label:
+
+```html
+<input type="button" id="sayHello" value="Say Hello">
+```
+
+The above elements are used to demo the interaction between the inspected page, the DevTools panel, and the background service worker.
+
+When the user clicks the `sayHello` button in the DevTools extension, it displays a greeting message in the inspected window.
+
+When the user clicks anywhere in the inspected page, it will display a message to show the mouse click position in the DevTools extension panel.
+
+
+<!-- ====================================================================== -->
+## devtools.html
+
+* [devtools.html](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.html) - Required.  A non-rendered HTML file that's run when DevTools is opened, to load the extension's `devtools.js` file.
+
+`devtools.html` matches the `devtools_page` member in the manifest file:
+
+A `<script>` element loads the main JavaScript file that's used directly by `panel.html`.  This `devtools.html` file isn't displayed in DevTools; only the `panel.html` file is displayed in DevTools.
+
+`devtools.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+```
+
+In the manifest file (`manifest.json`), the `devtools_page` field specifies the above file (`devtools.html`).  `devtools.html`, above, contains a `<script>` element that loads `devtools.js`.
+
+
+<!-- ====================================================================== -->
+## background.js
+
+[background.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/background.js) - Background service worker that sets up event listeners for communications between the inspected page and DevTools.
+
+A _background service worker_ is a script that the browser runs in a separate thread.  This script has access to the Microsoft Edge extension APIs.
+
+`background.js`:
+
+```javascript
+let id = null;
+const connections = {};
+
+chrome.runtime.onConnect.addListener(devToolsConnection => {
+    // 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!");
+        }
+    };
+
+    // Listen to messages sent from the DevTools page
+    devToolsConnection.onMessage.addListener(devToolsListener);
+
+    devToolsConnection.onDisconnect.addListener(() => {
+        devToolsConnection.onMessage.removeListener(devToolsListener);
+    });
+});
+```
+
+The above code connects the background service worker with the DevTools page.  It listens to when the DevTools page connects, saves the connection, and sends a response back to the DevTools page.
+
+This is useful when your background service worker is collecting data or performing tasks in the background that you want to be available in your DevTools extension.
+
+See also:
+* [Content scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) in the Chrome Extensions docs.
+
+
+<!-- ====================================================================== -->
+## content_script.js
+
+[content_script.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/content_script.js) - JavaScript that's injected into the inspected webpage (any webpage).  Prints a message to the DevTools **Console** when the page is clicked.  Listens for the page click event via an event listener.  Adds a click event listener to the webpage; clicking the page sends an event, caught by the event listener, which then sends a message to the runtime.
+
+A _content script_ runs in the context of the inspected webpage.  In the same way that other scripts are loaded by the webpage, a content script has have access to the DOM and can change it.
+
+This code prints a message to the console when the script is injected in the page.  It also adds a click event listener to the page that will send a message with mouse click position in the inspected page by using the `chrome.runtime.sendMessage` API.
+
+`content_script.js`:
+
+```javascript
+document.addEventListener("click", (event) => {
+  chrome.runtime.sendMessage({
+      click: true,
+      xPosition: event.clientX + document.body.scrollLeft,
+      yPosition: event.clientY + document.body.scrollTop
+    },
+    response => {
+      console.log("Received response", response);
+    }
+  );
+});
+```
+
+See also:
+* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts)
+
+
+<!-- ====================================================================== -->
+## devtools.js
+
+[devtools.js](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/devtools.js) - Logic for the custom DevTools page.
+
+`devtools.js` does the following:
+
+1. Creates a new **Custom** tool tab and panel in DevTools.
+
+1. When the tool is displayed (`panel.onShown` listener), the `availableMemoryCapacity` and `totalMemoryCapacity` elements are retrieved from the DOM.
+
+1. Sets a timer to run code every second after the panel is shown.
+
+1. When the timer fires, the `chrome.system.memory.getInfo` method is used to retrieve the available and total memory capacity of the device and these values are displayed in the corresponding DOM elements.
+
+`devtools.js`:
+
+```javascript
+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!");');
+        });
+    });
+});
+
+// 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 = `(${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
+});
+```
+
+Code from `devtools.js`:
+
+```javascript
+chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
+    // code invoked on panel creation
+});
+```
+
+The `create` method has the following signature:
+
+```javascript
+chrome.devtools.panels.create(
+    title: string, // Tool tab's label in Activity bar.
+    iconPath: string, // Icon to display in tool's tab.
+    pagePath: string, // Webpage to display in tool's panel.
+    callback: function // Code to run when tool is opened.
+)
+```
+    
+Code from `devtools.js`:
+
+```javascript
+let availableMemoryCapacity;
+let totalMemoryCapacity;
+
+chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
+    // code invoked on panel creation
+    panel.onShown.addListener((extPanelWindow) => {
+        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
+        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
+    });
+});
+
+setInterval(() => {
+    chrome.system.memory.getInfo((data) => {
+        if (availableMemoryCapacity) {
+            availableMemoryCapacity.innerHTML = data.availableCapacity;
+        }
+        if (totalMemoryCapacity) {
+            totalMemoryCapacity.innerHTML = data.capacity;
+        }
+    });
+}, 1000);
+```
+
+See also: 
+* [Extensions API Reference](https://developer.chrome.com/docs/extensions/reference/)
+   * [chrome.devtools.panels](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels)
+      * [create()](https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create)
+
+
+
+
+
+
+
+`devtools.js` uses the `chrome.runtime.connect` method to create a connection to the background service worker.
+
+It then sends the inspected window `tabId` to the service worker by using the `backgroundPageConnection.postMessage` method.
+
+Then it adds event listeners to the `sayHello` button and `youClickedOn` label that's defined in the `panel.html` file.
+
+When the user clicks the `sayHello` button, the DevTools extension will run a code snippet of `alert("Hello from the DevTools Extension");` in the inspected window by invoking the `eval()` method of the inspected window `chrome.devtools.inspectedWindow`.
+
+When the user clicks anywhere in the inspected window, the DevTools extension will receive a message, from the background service worker, with `request.click == true` and the mouse position information.
+
+
+<!-- ====================================================================== -->
+## icon.png
+
+* [icon.png](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/icon.png) - Icon to display on the tool's tab in the Activity bar of DevTools and in the **More tools** menu.
+
+Icon to display on the tool's tab in the Activity bar of DevTools and in the **More tools** menu:
+
+![Icon file](./custom-devtools-tool-code-images/icon.png)
+
+
+<!-- ====================================================================== -->
+## README.md
+
+[README.md](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-extension/README.md) - Basic information for developers about how to use the sample.
+
+
+<!-- ====================================================================== -->
+## See also
+<!-- todo: all links in article -->
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png
new file mode 100644
index 0000000000..be823e49e9
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-icon.png
new file mode 100644
index 0000000000..985f23d234
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png
new file mode 100644
index 0000000000..cc181893b0
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png
new file mode 100644
index 0000000000..467fcbf8a7
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png
new file mode 100644
index 0000000000..81b2a7b1d9
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png
new file mode 100644
index 0000000000..b47d949307
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png
new file mode 100644
index 0000000000..e47c01cc27
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png
new file mode 100644
index 0000000000..00fb8388f6
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/load-unpacked-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/load-unpacked-icon.png
new file mode 100644
index 0000000000..f1e0abd661
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/load-unpacked-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/memory-updating.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/memory-updating.png
new file mode 100644
index 0000000000..4da1b21016
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/memory-updating.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/modified-custom-tool.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/modified-custom-tool.png
new file mode 100644
index 0000000000..06c14f83b0
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/modified-custom-tool.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/more-tools-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/more-tools-icon.png
new file mode 100644
index 0000000000..dd58c0da2a
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/more-tools-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/panel-html.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/panel-html.png
new file mode 100644
index 0000000000..35afc4886f
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/panel-html.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/reload-modified-sample.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/reload-modified-sample.png
new file mode 100644
index 0000000000..bef45430cd
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/reload-modified-sample.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/settings-and-more-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/settings-and-more-icon.png
new file mode 100644
index 0000000000..69fd7b1251
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/settings-and-more-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool-images/show-in-folder-icon.png b/microsoft-edge/extensions/samples/custom-devtools-tool-images/show-in-folder-icon.png
new file mode 100644
index 0000000000..6e80bf7214
Binary files /dev/null and b/microsoft-edge/extensions/samples/custom-devtools-tool-images/show-in-folder-icon.png differ
diff --git a/microsoft-edge/extensions/samples/custom-devtools-tool.md b/microsoft-edge/extensions/samples/custom-devtools-tool.md
new file mode 100644
index 0000000000..03d4ffaac5
--- /dev/null
+++ b/microsoft-edge/extensions/samples/custom-devtools-tool.md
@@ -0,0 +1,298 @@
+---
+title: "Sample: Custom DevTools tool"
+description: Microsoft Edge extension adding a Custom tool in DevTools, including Activity Bar tab and panel.  Call DevTools API; send message to any inspected page; send message from inspected page to DevTools.
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: conceptual
+ms.service: microsoft-edge
+ms.subservice: extensions
+ms.date: 10/27/2025
+---
+# Sample: Custom DevTools tool
+
+The 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.
+
+See also:
+* [Overview of DevTools](../../devtools/overview.md)<!-- long jump -->
+* [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md)
+* [Code for Custom DevTools tool](../samples/custom-devtools-tool-code.md)
+
+
+<!-- ====================================================================== -->
+## Preview of the sample
+
+The "DevTools Extension" sample adds a **Custom** tool tab and panel in DevTools within Microsoft Edge:
+
+![Custom tool](./custom-devtools-tool-images/custom-tool.png)
+
+
+<!-- ------------------------------ -->
+#### Display memory information
+
+The **Custom** tool calls the DevTools API (`chrome.system.memory.getInfo((data)`) to retrieve and display memory information.
+
+
+<!-- ------------------------------ -->
+#### Send message from DevTools to inspected page
+
+The **Custom** tool in DevTools has a button that sends a message to the inspected webpage.  The inspected webpage then displays a JavaScript alert dialog:
+
+![Alert dialog](./custom-devtools-tool-images/alert.png)
+
+
+<!-- ------------------------------ -->
+#### Send message from inspected page to DevTools
+
+Clicking around within the inspected webpage sends a message to DevTools.  The sample uses a content script to send a message (the clicked coordinates) from the inspected webpage (any webpage) to the **Custom** DevTools tool and the **Console** tool in DevTools.
+
+The **Custom** tool displays the coordinates information from the message:
+
+![Coordinates in the Custom tool](./custom-devtools-tool-images/custom-tool-coordinates.png)
+
+The **Console** tool displays the coordinates information from the message:
+
+![Coordinates in the Console tool](./custom-devtools-tool-images/console-tool-coordinates.png)
+
+Download, install, use, and modify the sample, per the below sections.
+
+
+<!-- ====================================================================== -->
+## Step 1: Download the sample
+
+If not done yet, download the "main" branch of the Demos repo, or clone (or fork and clone) the repo.  Downloading the repo is simplest, and is described below.
+
+Download the "main" branch of the Demos repo, as follows:
+
+1. In Microsoft Edge, go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
+
+1. Click the down arrow in the **Code** button, and then select **Download ZIP**.
+
+1. In Microsoft Edge, the **Downloads** dialog shows `Demos-main.zip`.  "-main" is added, meaning a static snapshot of the "main" branch of the repo.
+
+1. Hover to the right of `Demos-main.zip`, and then click the **Show in folder** ![The Show in folder icon](./custom-devtools-tool-images/show-in-folder-icon.png) button.
+
+   File Explorer opens, displaying the **Downloads** folder.
+
+1. Right-click `Demos-main.zip`, and then select **Extract all**.
+
+   The **Extract Compressed (Zipped) Folders** dialog opens.
+
+1. Click the **Extract** button.
+
+   The **% complete** dialog opens, and then finishes.
+
+1. Move the `Demos-main` folder to a GitHub repos location, such as `C:\Users\localAccount\GitHub`.
+
+
+<!-- ====================================================================== -->
+## Step 2: Install the extension to add the tool in DevTools
+
+1. In Microsoft Edge, select **Settings and more** (![The Settings and more icon](./custom-devtools-tool-images/settings-and-more-icon.png)), hover over **Extensions**, and then select **Manage extensions**.
+
+   The **Extensions** tab and page opens (`edge://extensions`).
+
+1. Click ![The Load unpacked icon](./custom-devtools-tool-images/load-unpacked-icon.png) **Load unpacked**.
+
+   The **Select the extension directory** dialog opens.
+
+1. Navigate to the `/Demos-main/devtools-extension` folder, such as `C:\Users\localAccount\GitHub\Demos-main\devtools-extension\`, and then click the **Select Folder** button.<!-- actually used forked cloned /Demos/ dir, a working branch, which has latest version of sample -->
+
+   The **Custom DevTools Tool** card is displayed:
+
+   ![Extensions page](./custom-devtools-tool-images/edge-extensions-page.png)
+
+
+<!-- ====================================================================== -->
+## Step 3: Select the Custom tool in DevTools
+
+1. In Microsoft Edge, go to a webpage, such as the [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+   The **Custom** DevTools tool requires a webpage, not an empty tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In the **Activity Bar** of DevTools, click the **Custom** (![The Custom tool icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab.
+
+   The **Custom** tool tab and panel are displayed:
+
+   ![Custom tab](./custom-devtools-tool-images/custom-tab-activity-bar.png)
+
+   If the **Custom** (![The Custom tool icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab isn't visible, do any of the following:
+
+   * Click the **More tools** (![More tools icon](./custom-devtools-tool-images/more-tools-icon.png)) button, and then select ![Custom icon](./custom-devtools-tool-images/custom-icon.png) **Custom**.
+
+   * Make DevTools wider, and then click the **Custom** (![Custom icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab.
+
+   The custom DevTools page has several sections:
+
+   * Memory display information.
+
+   * A button to send a message from DevTools to the inspected webpage, to make the page display a JavaScript `alert` dialog.
+
+   * A **Coordinates** display area, to send a message from the inspected webpage to the DevTools **Console** and **Custom** tools.
+
+
+<!-- ====================================================================== -->
+## Step 4: View memory information from a DevTools API call
+
+* In the **Custom** tool, next to **Available Memory Capacity**, observe the once-per-second updating of the value:
+
+   ![Updating Available Memory Capacity](./custom-devtools-tool-images/memory-updating.png)
+
+
+<!-- ====================================================================== -->
+## Step 5: Send message from DevTools to inspected page
+
+1. In the **Custom** tool, click the **Say Hello** button.
+
+   A JavaScript `alert` dialog opens, displaying the message: "Hello from the DevTools extension!"
+
+   ![The Alert](./custom-devtools-tool-images/alert.png)
+
+   DevTools sends a message to the inspected webpage, causing JavaScript to display an alert.
+
+1. Click the **OK** button.
+
+   The dialog closes.
+
+
+<!-- ====================================================================== -->
+## Step 6: Send message from inspected page to DevTools
+
+1. In the inspected webpage, click various spots.
+
+   In the **Custom** tool, next to **Coordinates**, the coordinates are displayed and updated while you click around:
+
+   ![Coordinates in Custom tool](./custom-devtools-tool-images/custom-tool-coordinates.png)
+
+1. In DevTools, in the **Activity Bar**, select the **Console** (![Console icon](./custom-devtools-tool-images/console-icon.png)) tool.
+
+1. In the inspected webpage, click various spots.
+
+   The clicked coordinates are displayed in the **Console**:
+
+   ![Coordinates in Console tool](./custom-devtools-tool-images/console-tool-coordinates.png)
+
+
+<!-- ====================================================================== -->
+## Step 7: Modify the Custom tool
+
+1. If not done already, install [Visual Studio Code](https://code.visualstudio.com).
+
+1. Open Visual Studio Code.
+
+1. Click the **File** menu, and then click **Open Folder**.
+
+   The **Open Folder** dialog opens.
+
+1. Navigate to the `/Demos-main/devtools-extension/` folder, such as `C:\Users\localAccount\GitHub\Demos-main\devtools-extension\`, and then click the **Select Folder** button.<!-- actually used forked cloned /Demos/ dir, a working branch, which has latest version of sample -->
+
+   A dialog opens, asking whether to open the repo in the parent folder.
+
+1. Click the **Yes** button.
+
+   In the **Explorer** pane, the `/devtools-extension/` folder is displayed.
+
+1. Click `panel.html`.
+
+   `panel.html` is opened for editing:
+
+   ![/devtools-extension/ folder in Visual Studio Code](./custom-devtools-tool-images/panel-html.png)
+
+1. Add "My" to the `<h2>` heading; change from:
+
+   ```html
+   <h2>Custom DevTools Tool</h2>
+   ```
+
+   to:  
+
+   ```html
+   <h2>My Custom DevTools Tool</h2>
+   ```
+
+1. Save `panel.html`.
+
+1. In the **Explorer** pane, click `manifest.json`.
+
+   `manifest.json` is opened for editing.
+
+1. Add "My" to the `name`; change from:
+
+   ```json
+   "name": "Custom DevTools Tool",
+   ```
+
+   to:  
+
+   ```json
+   "name": "My Custom DevTools Tool",
+   ```
+
+1. Save `manifest.json`.
+
+
+<!-- ====================================================================== -->
+## Step 8: Reload the modified Custom tool
+
+1. In Microsoft Edge, select **Settings and more** (![The Settings and more icon](./custom-devtools-tool-images/settings-and-more-icon.png)), hover over **Extensions**, and then select **Manage extensions**.
+
+   The **Extensions** tab and page opens (`edge://extensions`).
+
+1. In the **Custom DevTools Tool** card, click the **Reload** link.
+
+   The card now shows **My Custom DevTools Tool** as the name of the extension:
+
+   ![Reload](./custom-devtools-tool-images/reload-modified-sample.png)
+
+   An **Errors** link might appear in the card, displaying "Uncaught Error: Extension context invalidated", because the sample was modified while still in use.  If you want to avoid this error, you can click **Remove** in the **Custom DevTools Tool** card, and then click **Load unpacked**.
+
+
+<!-- ====================================================================== -->
+## Step 9: Use the modified Custom tool
+
+1. Go to a webpage, such as the [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.
+
+   The **Custom** DevTools tool requires a webpage, not an empty tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In the **Activity Bar** of DevTools, click the **Custom** (![The Custom tool icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab.
+
+   The **Custom** tool is displayed, with the word **My** added to the heading in the panel:
+
+   ![Modified Custom tool](./custom-devtools-tool-images/modified-custom-tool.png)
+
+   If the title still says **Custom DevTools Tool** instead of **My Custom DevTools Tool**, close and reopen DevTools.
+
+   If the **Custom** (![The Custom tool icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab isn't visible, do any of the following:
+
+   * Click the **More tools** (![More tools icon](./custom-devtools-tool-images/more-tools-icon.png)) button, and then select ![Custom icon](./custom-devtools-tool-images/custom-icon.png) **Custom**.
+
+   * Make DevTools wider, and then click the **Custom** (![Custom icon](./custom-devtools-tool-images/custom-icon.png)) tool's tab.
+
+This is the end of the steps to use and modify the DevTools Extension sample.  Next, you can study [Code for Custom DevTools tool](../samples/custom-devtools-tool-code.md).
+
+
+<!-- ====================================================================== -->
+## See also
+<!-- all links in article -->
+
+* [Overview of DevTools](../../devtools/overview.md)
+* [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md)
+* [Code for Custom DevTools tool](../samples/custom-devtools-tool-code.md)
+
+GitHub:
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo.
+* [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/)
+
+Tools:
+* [Visual Studio Code](https://code.visualstudio.com)
diff --git a/microsoft-edge/extensions/samples/index.md b/microsoft-edge/extensions/samples/index.md
index c94bc83e80..ba51678454 100644
--- a/microsoft-edge/extensions/samples/index.md
+++ b/microsoft-edge/extensions/samples/index.md
@@ -37,11 +37,7 @@ sync'd July 30, 2025
 
 | Demo name | Description | Source code & Readme | Docs |
 |---|---|---|---|
-| DevTools extension | Includes the following demos. | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | [Create a DevTools extension, adding a custom tool tab and panel](../developer-guide/devtools-extension.md) |
-| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) in **MicrosoftEdge / Demos** repo | [Step 1: Create a basic Microsoft Edge extension that has a DevTools webpage](../developer-guide/devtools-extension.md#step-1-create-a-basic-microsoft-edge-extension-that-has-a-devtools-webpage) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) in **MicrosoftEdge / Demos** repo | [Step 2: Add a custom tool in DevTools](../developer-guide/devtools-extension.md#step-2-add-a-custom-tool-in-devtools) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| 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) in **MicrosoftEdge / Demos** repo | [Step 3: Display memory information by calling extension APIs](../developer-guide/devtools-extension.md#step-3-display-memory-information-by-calling-extension-apis) in _Create a DevTools extension, adding a custom tool tab and panel_. |
-| 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) in **MicrosoftEdge / Demos** repo | [Step 4: Interact between the webpage and DevTools](../developer-guide/devtools-extension.md#step-4-interact-between-the-webpage-and-devtools) in _Create a DevTools extension, adding a custom tool tab and panel_. |
+| DevTools extension | A Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools. | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | [Create a DevTools extension, adding a custom tool tab and panel](./developer-guide/devtools-extension.md) |
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml
index 4e0f0d3f7a..a6f8562401 100644
--- a/microsoft-edge/toc.yml
+++ b/microsoft-edge/toc.yml
@@ -1175,9 +1175,18 @@
 
                 - name: Declare API permissions in the manifest
                   href: ./extensions/developer-guide/declare-permissions.md
-# -------------------------------------
-            - name: Create a DevTools extension, adding a custom tool tab and panel
-              href: ./extensions/developer-guide/devtools-extension.md
+
+            - name: Custom DevTools tool
+              items:
+
+                - name: Create a DevTools extension, adding a custom tool tab and panel
+                  href: ./extensions/developer-guide/devtools-extension.md
+
+                - name: "Sample: Custom DevTools tool"
+                  href: ./extensions/samples/custom-devtools-tool.md
+
+                - name: Code for Custom DevTools tool
+                  href: ./extensions/samples/custom-devtools-tool-code.md
 
             - name: Develop an extension for the Microsoft Edge sidebar
               href: ./extensions/developer-guide/sidebar.md