Skip to content

Conversation

@mikehoffms
Copy link
Collaborator

@mikehoffms mikehoffms commented Oct 24, 2025

Related PRs:

This PR replaces the long tutorial article "Create a DevTools extension, adding a custom tool tab and panel" by a set of 3 articles:

  • Background info.
  • Steps to use the sample.
  • How the sample's code works.

Removes wording about creating the sample (phase 3 & phase 4, two different versions of the sample).

image

Rendered articles for review:

AB#55086309

@mikehoffms mikehoffms changed the title Standardize "Sample: Custom DevTools tool tab and panel" Break into 3 "Create a DevTools extension, adding a custom tool tab and panel" Oct 28, 2025
@mikehoffms mikehoffms changed the title Break into 3 "Create a DevTools extension, adding a custom tool tab and panel" Break into 3 "Create a DevTools extension, adding custom tool" Oct 28, 2025
@learn-build-service-prod
Copy link

Learn Build status updates of commit 03c5c44:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension.md ✅Succeeded View
microsoft-edge/extensions/samples.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/load-unpacked-icon.png ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

@learn-build-service-prod
Copy link

PoliCheck Scan Report

The 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 found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

@mikehoffms mikehoffms changed the title Break into 3 "Create a DevTools extension, adding custom tool" Break out "Sample: Custom DevTools tool" from "Create a DevTools extension" Oct 29, 2025
@mikehoffms mikehoffms changed the title Break out "Sample: Custom DevTools tool" from "Create a DevTools extension" Break out "Custom DevTools sample" from "Create DevTools extension" Oct 29, 2025
@learn-build-service-prod
Copy link

PoliCheck Scan Report

The 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 found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

@learn-build-service-prod
Copy link

Learn Build status updates of commit 59a4713:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension.md ✅Succeeded View
microsoft-edge/extensions/samples.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/load-unpacked-icon.png ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

@learn-build-service-prod
Copy link

Learn Build status updates of commit 4432ef5:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension.md ✅Succeeded View
microsoft-edge/extensions/samples.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

@learn-build-service-prod
Copy link

PoliCheck Scan Report

The 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 found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

@learn-build-service-prod
Copy link

PoliCheck Scan Report

The 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 found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

@learn-build-service-prod
Copy link

Learn Build status updates of commit e22cfa8:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/extensions/developer-guide/devtools-extension-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-greeting.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position-in-console.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-show-position.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-memory-info.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-extension-with-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/devtools-main-toolbar-tabs.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page-reload-button.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/edge-extensions-page.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/overall_screenshot_mv3.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension-images/solution-sample-panel.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/extensions/developer-guide/devtools-extension.md ✅Succeeded View
microsoft-edge/extensions/samples.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/architecture.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code-images/icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-code.md ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/alert.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/console-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-icon.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tab-activity-bar.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool-coordinates.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/custom-tool.png ✅Succeeded View
microsoft-edge/extensions/samples/custom-devtools-tool-images/edge-extensions-page.png ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cat: extensions Extensions-related content. in-progress

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants