Convert "Create a DevTools extension" to sample-based#3616
Open
mikehoffms wants to merge 47 commits into
Open
Conversation
mikehoffms
changed the title
mikehoffms
changed the title
mikehoffms
changed the title
mikehoffms
changed the title
Update and reorganize documentation for the Custom DevTools tool sample and related getting-started content. Changes include: - Bumped ms.date to 2026-04-20 in multiple extension docs. - Reworked microsoft-edge/extensions/developer-guide/devtools-extension.md: clarified the relationship between the guide and samples, reorganized file overview (manifest, panel, devtools.html, devtools.js, background.js, content_script.js, icon.png), added sibling links to sample and code, refined wording and added TODO notes. - Simplified microsoft-edge/extensions/getting-started/index.md intro and updated date. - Updated microsoft-edge/extensions/samples/custom-devtools-tool-code.md: revised description, date, sibling markers, clarified devtools.html wording and file list entries. - Updated microsoft-edge/extensions/samples/custom-devtools-tool.md: updated date, sibling links, added GitHub repo links and rearranged 'See also' / Tools references. Overall this commit improves clarity, linking between guide/sample/code, and consistency of file descriptions.
captainbrosset
requested changes
Apr 24, 2026
Contributor
captainbrosset
requested changes
May 4, 2026
Contributor
PoliCheck Scan ReportThe following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans. ✅ No issues foundMore information about PoliCheckInformation: PoliCheck | Severity Guidance | Term |
Contributor
|
Learn Build status updates of commit bb1eee7: ✅ Validation status: passed
This comment lists only the first 25 files in the pull request. |
mikehoffms
commented
May 7, 2026
|
|
||
| 1. In DevTools, in the **Activity Bar**, select the **Console** () tool. | ||
|
|
||
| The message "Connected!" is displayed in the **Console** tool.<!-- todo: true? how can we view that message? --> |
Collaborator
Author
There was a problem hiding this comment.
how view message?
Contributor
There was a problem hiding this comment.
See MicrosoftEdge/Demos#106 (comment)
There's no "Connected" message, so let's remove this line.
mikehoffms
commented
May 7, 2026
|
|
||
| 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.<!-- todo: does the dialog open even if when working from the downloaded zip? doesn't this dialog only appear when working off of the cloned repo? --> |
Collaborator
Author
There was a problem hiding this comment.
does the dialog open even if when working from the downloaded zip?
doesn't this dialog only appear when working off of the cloned repo?
Collaborator
Author
There was a problem hiding this comment.
probably not wwhen .zipdl'd.
Contributor
There was a problem hiding this comment.
Correct, when downloading the zip, the git repository metadata does not exist and VS Code will not display a dialog. So let's remove this line.
mikehoffms
commented
May 7, 2026
| | `devtools.html` | A non-rendered HTML file that's run when DevTools is opened, to load the extension's JavaScript files. | | ||
| | `devtools.js` | Main logic for the custom DevTools page. | | ||
| | `service-worker.js` | A service worker that sets up event listeners for communications between the inspected page and DevTools. | | ||
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | |
Collaborator
Author
There was a problem hiding this comment.
Nothing happens WHEN the script is injected.
when page is clicked, the message appears in console: "Received response"
response => { console.log("Received response", response); }
and also in custom tool, the coordinates of click are printed.
mikehoffms
commented
May 7, 2026
|
|
||
| 1. Click the **Say Hello to The Inspected Page!** button. | ||
| This file does the following: | ||
| * Prints a message<!-- todo: what message? --> to the DevTools **Console** when the page is clicked. |
Collaborator
Author
There was a problem hiding this comment.
Prints what message?
Collaborator
Author
There was a problem hiding this comment.
seq:
- msg is sent from content_script.js, received by devtools.js.
- displays the coordinates in the custome tool in devtools, in panel.html
- reply from devtools.js is received by content_script.js.
- prints to console: console.log("Received response", response); to the console
Contributor
There was a problem hiding this comment.
Remove this step. Nothing is printed.
mikehoffms
commented
May 12, 2026
| | `devtools.html` | A non-rendered HTML file that's run when DevTools is opened, to load the extension's JavaScript files. | | ||
| | `devtools.js` | Main logic for the custom DevTools page. | | ||
| | `service-worker.js` | A service worker that sets up event listeners for communications between the inspected page and DevTools. | | ||
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | | |
| | `content_script.js` | Code which the extension injects in the inspected webpage. Adds a click event listener to the page that will send a message with the mouse-click position in the inspected page. Sends a message to ... | |
sends a message, and devtools.js is listenging for that message as foolows:
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
});
}
});
Contributor
There was a problem hiding this comment.
Suggested change
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | | |
| | `content_script.js` | Code which the extension injects in the inspected webpage. Adds a click event listener to the page that will send a message with the mouse-click position. `devtools.js` listens to this message and displays the position in the custom panel. | |
captainbrosset
requested changes
Jun 5, 2026
|
|
||
| 1. In DevTools, in the **Activity Bar**, select the **Console** () tool. | ||
|
|
||
| The message "Connected!" is displayed in the **Console** tool.<!-- todo: true? how can we view that message? --> |
Contributor
There was a problem hiding this comment.
See MicrosoftEdge/Demos#106 (comment)
There's no "Connected" message, so let's remove this line.
|
|
||
| 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.<!-- todo: does the dialog open even if when working from the downloaded zip? doesn't this dialog only appear when working off of the cloned repo? --> |
Contributor
There was a problem hiding this comment.
Correct, when downloading the zip, the git repository metadata does not exist and VS Code will not display a dialog. So let's remove this line.
| | `panel.html` | Webpage to display in the custom panel in DevTools. | | ||
| | `devtools.html` | A non-rendered HTML file that's run when DevTools is opened, to load the extension's JavaScript files. | | ||
| | `devtools.js` | Main logic for the custom DevTools page. | | ||
| | `service-worker.js` | A service worker that sets up event listeners for communications between the inspected page and DevTools. | |
Contributor
There was a problem hiding this comment.
Remove this, see MicrosoftEdge/Demos#106 (comment)
| | `devtools.html` | A non-rendered HTML file that's run when DevTools is opened, to load the extension's JavaScript files. | | ||
| | `devtools.js` | Main logic for the custom DevTools page. | | ||
| | `service-worker.js` | A service worker that sets up event listeners for communications between the inspected page and DevTools. | | ||
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | |
Contributor
There was a problem hiding this comment.
Suggested change
| | `content_script.js` | Code which the extension injects in the inspected webpage. Prints a message<!-- todo: what 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. | | |
| | `content_script.js` | Code which the extension injects in the inspected webpage. Adds a click event listener to the page that will send a message with the mouse-click position. `devtools.js` listens to this message and displays the position in the custom panel. | |
| * `content_script.js` is a _content script_, which means that it runs in the context of the inspected webpage. In the same way that other scripts are loaded by the webpage, a content script has access to the DOM and can change it. | ||
|
|
||
| 1. Click anywhere in the inspected page. | ||
| * `service-worker.js` is a _background service worker_. It runs in a separate thread and has access to extension APIs. |
Contributor
There was a problem hiding this comment.
We should remove since the service worker doesn't play any role in this extension. See MicrosoftEdge/Demos#106 (comment)
|
|
||
| **background.js:** | ||
| <!-- ====================================================================== --> | ||
| ## `service-worker.js` |
Contributor
There was a problem hiding this comment.
See MicrosoftEdge/Demos#106 (comment)
This file doesn't seem to actually be needed. So we might just want to remove this whole section.
|
|
||
| 1. Click the **Say Hello to The Inspected Page!** button. | ||
| This file does the following: | ||
| * Prints a message<!-- todo: what message? --> to the DevTools **Console** when the page is clicked. |
Contributor
There was a problem hiding this comment.
Remove this step. Nothing is printed.
Comment on lines
+407
to
+409
| * Adds a click event listener to the inspected webpage, that sends a message containing the mouse-click position, by calling `chrome.runtime.sendMessage`. | ||
| * Listens for the page click event via an event listener. | ||
| * Adds a click event listener to the inspected webpage; clicking the page sends an event, caught by the event listener, which then sends a message to the WebView2 Runtime. |
Contributor
There was a problem hiding this comment.
Suggested change
| * Adds a click event listener to the inspected webpage, that sends a message containing the mouse-click position, by calling `chrome.runtime.sendMessage`. | |
| * Listens for the page click event via an event listener. | |
| * Adds a click event listener to the inspected webpage; clicking the page sends an event, caught by the event listener, which then sends a message to the WebView2 Runtime. | |
| * Adds a click event listener to the inspected webpage, that sends a message containing the mouse-click position, by calling `chrome.runtime.sendMessage`. | |
| * Listens for the page click event via an event listener. |
That second bullet point was wrong, it's partly a duplicate of the first point, and mentions WebView2, which is wrong in this context.
Contributor
|
Learn Build status updates of commit 3b5abe4: ❌ Validation status: errorsPlease follow instructions here which may help to resolve issue.
For more details, please refer to the build report. Note: Your PR may contain errors or warnings or suggestions unrelated to the files you changed. This happens when external dependencies like GitHub alias, Microsoft alias, cross repo links are updated. Please use these instructions to resolve them. |
mikehoffms
commented
Jun 5, 2026
| The DevTools page, inspected page, and content script fit together in an extension: | ||
|
|
||
| 1. Click anywhere in the inspected page. | ||
| <!-- todo: omit SW --> |
Collaborator
Author
There was a problem hiding this comment.
omit Service Worker from diagram
direct png link:
https://review.learn.microsoft.com/en-us/microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png?branch=pr-en-us-3616
@captainbrosset how to proceed?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related PRs:
Overview of PR:
Rendered articles for review:
1a. Get started developing an extension
/extensions/getting-started/index.mdarchitecture.md.1b. Extension concepts and architecture
/extensions/getting-started/architecture.mdindex.md.2a. Samples for Microsoft Edge extensions > MicrosoftEdge/Demos repo
/extensions/samples.md3a. Develop an extension for the Microsoft Edge sidebar
/extensions/developer-guide/sidebar.md4a. Add a custom tool in Microsoft Edge DevTools
/extensions/developer-guide/devtools-extension.md4b. Sample: Custom DevTools tool
/extensions/developer-guide/devtools-extension-sample.mdIncidental:
5a. Many files
TOC
/toc.ymlOverview of Microsoft Edge extensions
/extensions/index.mdSites for extensions for various browsers
to:
Creating an extension for various browsers
AB#55086309