Redesign Extensions samples

[mikehoffms]

Related PR: microsoft/MicrosoftEdge-Extensions#254

• Sample: Picture viewer pop-up webpage
  • Internal preview: https://review.learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage?branch=pr-en-us-3342
  • External preview: https://github.com/MicrosoftDocs/edge-developer/blob/user/mikehoffms/redesign-samples/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage.md
  • Before/Live: https://learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension
  • Planned/Live: https://learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage
  • Changed title from Sample: Display an image in a pop-up. From task verb to noun.
  • Changed file name from part1-simple-extension.md.
  • Defined redirect.
  • Updated the screenshots.
  • Updated text to match the revised sample.
• Sample: Picture inserter using content script
  • Internal preview: https://review.learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script?branch=pr-en-us-3342
  • External preview: https://github.com/MicrosoftDocs/edge-developer/blob/user/mikehoffms/redesign-samples/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script.md
  • Before/Live: https://learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts
  • Planned/Live: https://learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script
  • Changed title from Sample: Insert an image in the webpage. From task verb to noun.
  • Changed file name from part2-content-scripts.md.
  • Defined redirect.
  • Updated the screenshots.
  • Updated text to match the revised sample.
• Sideload an extension to install and test it locally
  • Internal preview: https://review.learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/extension-sideloading?branch=pr-en-us-3342
  • External preview: https://github.com/MicrosoftDocs/edge-developer/blob/user/mikehoffms/redesign-samples/microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md
  • Before/Live: https://learn.microsoft.com/microsoft-edge/extensions-chromium/getting-started/extension-sideloading
  • Updated the screenshots.

Testing redirects before Merge

Part 1

Implementation of "part1" redirect:

"source_path": "microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md",
"redirect_url": "/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage",

https://review.learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?branch=pr-en-us-3342
Result: ok.
End up at:
https://review.learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage?branch=pr-en-us-3342

Part 2

Implementation of "part2" redirect:

"source_path": "microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md",
"redirect_url": "/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script",

https://review.learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?branch=pr-en-us-3342
Result: ok.
End up at:
https://review.learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script?branch=pr-en-us-3342

Testing redirects after Merge

https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension
Result: __
End up at: __

https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts
Result: __
End up at: __

AB#55806358

[captainbrosset]

Approved with a couple of comments.

[mikehoffms]

LGTM - Content Developer

[learn-build-service-prod]

Learn Build status updates of commit ed74825:

✅ Validation status: passed

File	Status	Preview URL	Details
.openpublishing.redirection.json	✅Succeeded	View
microsoft-edge/developer/index.yml	✅Succeeded	View
microsoft-edge/devtools-guide-chromium/sources/index.md	✅Succeeded	View
microsoft-edge/extensions-chromium/developer-guide/sidebar.md	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/developermode-toggle.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extension-running.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup-no-extensions.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/installed-extension.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-developermode-toggle.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-installed-extension.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/settings-and-more-icon.png	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/index.md	✅Succeeded	View
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/clone-a-repo-dbox-ghd.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/developermode-toggle.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extension-running.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extensions-icon.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extensions-popup-no-extensions.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extensions-popup-with-launch-icon.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extensions-popup.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/icon-png-toolbar.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/load-unpacked-icon.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/part1-installed-extension.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md	✅Succeeded	n/a (file deleted or renamed)

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

For any questions, please:

• Try searching the learn.microsoft.com contributor guides
• Post your question in the Learn support channel