Convert "Create a DevTools extension" to sample-based#3616
Open
mikehoffms wants to merge 46 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?
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.
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
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
});
}
});
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