Break out "Custom DevTools tool" from "Create DevTools extension"

microsoft-edge/extensions/samples/custom-devtools-tool.md

@@ -0,0 +1,322 @@
+---
+title: "Sample: Custom DevTools tool"
+description: Microsoft Edge extension that adds a Custom tool in DevTools.  Sends messages between the inspected webpage and DevTools.
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: article
+ms.service: microsoft-edge
+ms.subservice: extensions
+ms.date: 04/06/2026
+---
+# Sample: Custom DevTools tool
+<!-- https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool -->
+<!-- article 2 of 3 -->
+
+The sample "Custom DevTools tool" 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 tool name and its tab in DevTools can be something other than **Custom**.
+
+* 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.
+
+Download, install, use, and modify the sample, as follows.
+
+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)
+* [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/) - Readme and source code for the Custom DevTools Tool sample.
+
+
+<!-- ====================================================================== -->
+## Preview of the sample
+
+The Custom DevTools Tool 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 in DevTools 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 **Custom** tool 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 mouse-click coordinates from the message:
+
+![Coordinates in the Custom tool](./custom-devtools-tool-images/custom-tool-coordinates.png)
+
+The **Console** tool also displays the mouse-click coordinates from the message:
+
+![Coordinates in the Console tool](./custom-devtools-tool-images/console-tool-coordinates.png)
+
+
+<!-- ====================================================================== -->
+## 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).
+
+
+<!-- ====================================================================== -->
+## Troubleshooting
+
+If the **Custom** tab isn't visible in DevTools, or it's outdated and doesn't show your latest code changes:
+
+* Make DevTools wide, to show many tools in the **Activity Bar**.
+
+* Close and reopen DevTools.
+
+* Refresh or hard-refresh the inspected page.
+
+* In Microsoft Edge, in the **Extensions** page, click **Reload** for the extension.
+
+* 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.
+
+* Go to a webpage, not an empty tab.  The code in the sample "Custom DevTools tool" requires a webpage.
+
+When the **Activity Bar** is narrow, the Custom Devtools tool is added to the **More tools** menu on the **Activity Bar**.
+
+The **Custom** tab doesn't have a **Remove from Activity Bar** command on the right-click menu.
+
+
+<!-- ====================================================================== -->
+## See also
+<!-- all links in article -->
+
+* [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)
+* [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/) - Readme and source code.
+* [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos)
+* [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/)
+* [Visual Studio Code](https://code.visualstudio.com)
+* [Code for Custom DevTools tool](../samples/custom-devtools-tool-code.md)
+* [Samples for Microsoft Edge extensions](../samples.md)<!-- link not in article -->

microsoft-edge/extensions/samples/index.md

@@ -37,11 +37,7 @@ sync'd Jul. 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_. |
+| Custom DevTools tool | 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) |
 
 
 <!-- ====================================================================== -->

microsoft-edge/toc.yml

@@ -1223,14 +1223,23 @@
 
                 - 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: Develop an extension for the Microsoft Edge sidebar
               href: ./extensions/developer-guide/sidebar.md
               displayName: sidebar extensions, sidepanel, side panel
 
+            - name: Develop a custom tool in Microsoft Edge DevTools
+              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: Native messaging
               href: ./extensions/developer-guide/native-messaging.md