Merge pull request #3342 from MicrosoftDocs/user/mikehoffms/redesign-…

…samples

Redesign Extensions samples

.openpublishing.redirection.json

@@ -147,6 +147,16 @@ Old redirects (to /archive/)
         "redirect_url": "/microsoft-edge/extensions-chromium/developer-guide/csp",
         "redirect_document_id": false
       },
+      {
+        "source_path": "microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md",
+        "redirect_url": "/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage",
+        "redirect_document_id": false
+      },
+      {
+        "source_path": "microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md",
+        "redirect_url": "/microsoft-edge/extensions-chromium/getting-started/picture-inserter-content-script",
+        "redirect_document_id": false
+      },
 
 /* Progressive Web Apps: */
       {

microsoft-edge/developer/index.yml

@@ -101,8 +101,8 @@ landingContent:
           - text: Register as a Microsoft Edge extension developer
             url: ../extensions-chromium/publish/create-dev-account.md
 
-          - text: "Sample: Display an image in a pop-up"
-            url: ../extensions-chromium/getting-started/part1-simple-extension.md
+          - text: "Sample: Picture viewer pop-up webpage"
+            url: ../extensions-chromium/getting-started/picture-viewer-popup-webpage.md
 
 # -----------------------------------------------------------------------------
 # Card r1c3

microsoft-edge/devtools-guide-chromium/sources/index.md

@@ -187,7 +187,7 @@ When the debugger steps into code that you don't recognize, you might want to ad
 
 See also:
 * [Content scripts](https://developer.mozilla.org/Add-ons/WebExtensions/Content_scripts)
-* [Sample: Insert an image in the webpage](../../extensions-chromium/getting-started/part2-content-scripts.md)
+* [Sample: Picture inserter using content script](../../extensions-chromium/getting-started/picture-inserter-content-script.md)
 
 
 <!-- ------------------------------ -->

microsoft-edge/extensions-chromium/developer-guide/sidebar.md

@@ -316,8 +316,8 @@ See [Types](https://developer.chrome.com/docs/extensions/reference/sidePanel/#ty
 * [Supported APIs for Microsoft Edge extensions](../developer-guide/api-support.md)
 * [Declare API permissions in the manifest](../developer-guide/declare-permissions.md)
 * [Manifest file format for extensions](../getting-started/manifest-format.md)
-* [Sample: Display an image in a pop-up](../getting-started/part1-simple-extension.md)
-* [Sample: Insert an image in the webpage](../getting-started/part2-content-scripts.md)
+* [Sample: Picture viewer pop-up webpage](../getting-started/picture-viewer-popup-webpage.md)
+* [Sample: Picture inserter using content script](../getting-started/picture-inserter-content-script.md)
 
 
 <!-- ====================================================================== -->

microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md

@@ -6,82 +6,133 @@ ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
 ms.subservice: extensions
-ms.date: 10/04/2024
+ms.date: 01/16/2025
 ---
 # Sideload an extension to install and test it locally
 
 To test an extension quickly and safely, sideload the extension in your own copy of Microsoft Edge, which means locally installing the extension.  You can then run and test your extension without having to upload the extension to the Microsoft Edge Add-ins website (the _store_) and then install the extension from there.
 
 
+<!-- ====================================================================== -->
+## Prerequisite: Have an extension to install
+
+This article assumes that your local drive contains an extension that you want to load, such as a sample from the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo.
+
+To obtain the samples, see [Clone the MicrosoftEdge-Extensions repo](./picture-viewer-popup-webpage.md#clone-the-microsoftedge-extensions-repo) in _Sample: Picture viewer pop-up webpage_.
+
+
 <!-- ====================================================================== -->
 ## Locally installing and running an extension
 
 To sideload an extension into Microsoft Edge, so that it's locally installed in your browser for testing:
 
-1. In Microsoft Edge, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button, next to the Address bar, if this icon is displayed.  Or, select **Settings and more** (...) > **Extensions**.  The **Extensions** pop-up opens:
+1. Go to a webpage, such as [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab.  For some samples, this step is optional and is just to match the screenshots below; some samples don't require a webpage to be open.
+
+1. In Microsoft Edge to the right of the Address bar, if this icon is displayed, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  Or, select **Settings and more** (![The "Settings and more" icon](./extension-sideloading-images/settings-and-more-icon.png)) > **Extensions**.
+
+   The **Extensions** pop-up opens:
 
    ![The Extensions popup when no extensions are installed](./extension-sideloading-images/extensions-popup-no-extensions.png)
 
 1. Click **Manage extensions**.  The **Extensions** management page opens in a new tab:
 
-   ![Turning on Developer Mode](./extension-sideloading-images/part1-developermode-toggle.png)
+   ![Turning on Developer Mode](./extension-sideloading-images/developermode-toggle.png)
 
 1. Turn on the **Developer mode** toggle.
 
 1. When installing your extension for the first time, click the **Load unpacked** (![The "Load unpacked" icon](./extension-sideloading-images/load-unpacked-icon.png)) button.  The **Select the extension directory** dialog opens.
 
-1. Select the directory that contains the extension's source files, such as `manifest.json`, and then click the **Select Folder** button.
+1. Select the directory that contains the extension's source files, such as `manifest.json`.
 
-   Example path for [Sample: Display an image in a pop-up](./part1-simple-extension.md):
+   Example paths resulting from cloning the **MicrosoftEdge-Extensions** repo:
 
-   `C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\`
+   `C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage`
+   `C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script`
 
-   Example path for [Sample: Insert an image in the webpage](./part2-content-scripts.md):
+1. Click the **Select Folder** button.
 
-   `C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part2\extension-getting-started-part2\`
+   The **Select the extension directory** dialog closes.
 
    The extension is installed in your browser, similar to extensions that are installed from the store:
 
-   ![Installed extensions page, showing a sideloaded extension](./extension-sideloading-images/part1-installed-extension.png)
+   ![Installed extensions page, showing a sideloaded extension](./extension-sideloading-images/installed-extension.png)
+
+1. If the extension requires that a webpage is open, make sure a webpage is open, such as [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/).
 
-1. To run the extension, first open a webpage, if the extension requires that a webpage is open.  For example, go to a webpage, such as [Microsoft.com](https://www.microsoft.com), in a new window or tab.
+1. Refresh the webpage.  This is sometimes required after reloading an extension.
 
-1. In the upper right of Microsoft Edge, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  Or, select **Settings and more** (...) > **Extensions**.
+1. In Microsoft Edge to the right of the Address bar, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  Or, select **Settings and more** (![The "Settings and more" icon](./extension-sideloading-images/settings-and-more-icon.png)) > **Extensions**.
 
    The **Extensions** pop-up opens:
 
    ![The Extensions pop-up](./extension-sideloading-images/extensions-popup.png)
 
-1. Click the extension's icon or name.  The extension opens, and the extension's icon is added next to the Address bar and Extensions (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) icon:
+1. Click the extension's icon or name.  The extension opens, and the extension's icon is added next to the Address bar and **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button:
 
    ![An extension running](./extension-sideloading-images/extension-running.png)
 
 
 <!-- ====================================================================== -->
-## Locally updating an extension
+## Locally updating an extension (Reload)
 
 To update an extension that's been installed locally (sideloaded) in your browser:
 
-1. Make any required changes to the extension.
+1. Make changes to the extension's source code, and save those changes.
+
+1. In Microsoft Edge, if the **Extensions** management tab is open, click it.
+
+   Or, to the right of the Address bar, if this icon is displayed, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  The **Extensions** pop-up opens.  Click **Manage extensions**.
 
-1. Go to `edge://extensions`.
+   Or, select **Settings and more** (![The "Settings and more" icon](./extension-sideloading-images/settings-and-more-icon.png)) > **Extensions** > **Manage extensions**.
 
-1. Click the **Reload** button for the sideloaded extension.  The updated extension is reloaded.
+   The **Extensions** management tab is displayed.
+
+1. Click the **Reload** link in the extension's card.
+
+1. Refresh the webpage.  This is sometimes required after reloading an extension.
 
 
 <!-- ====================================================================== -->
 ## Locally removing an extension
 
 To remove an extension that's been installed locally (sideloaded) in your browser:
 
-1. Go to `edge://extensions`.
+1. In Microsoft Edge, if the **Extensions** management tab is open, click it.
+
+   Or, to the right of the Address bar, if this icon is displayed, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  The **Extensions** pop-up opens.  Click **Manage extensions**.
+
+   Or, select **Settings and more** (![The "Settings and more" icon](./extension-sideloading-images/settings-and-more-icon.png)) > **Extensions** > **Manage extensions**.
+
+   The **Extensions** management tab is displayed.
+
+1. Click the **Remove** link in the extension's card.
+
+
+<!-- ====================================================================== -->
+## Error reporting in the Extensions management page
+
+If running an extension causes an error, in some cases, an **Error** link is added in the extension's card in the **Extensions** management page between the **Remove** and **Reload** links.
+
+1. In Microsoft Edge, if the **Extensions** management tab is open, click it.
+
+   Or, to the right of the Address bar, if this icon is displayed, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button.  The **Extensions** pop-up opens.  Click **Manage extensions**.
+
+   Or, select **Settings and more** (![The "Settings and more" icon](./extension-sideloading-images/settings-and-more-icon.png)) > **Extensions** > **Manage extensions**.
+
+   The **Extensions** management tab is displayed.
+
+1. Click the **Error** link in the extension's card.
+
+1. Fix the error in the extension's code.
+
+1. In the **Extensions** management page, click the **Reload** link.
 
-1. On the extension, click **Remove**.
+1. To make the **Error** link in the extension's card go away, in the **Extensions** management page, click the **Clear errors** button.
 
 
 <!-- ====================================================================== -->
 ## See also
 <!-- all links in article -->
 
-* [Sample: Display an image in a pop-up](./part1-simple-extension.md)
-* [Sample: Insert an image in the webpage](./part2-content-scripts.md)
+* [Sample: Picture viewer pop-up webpage](./picture-viewer-popup-webpage.md)
+* [Sample: Picture inserter using content script](./picture-inserter-content-script.md)

microsoft-edge/extensions-chromium/getting-started/index.md

@@ -73,4 +73,4 @@ An extension provides opt-in permissions at install time.  You specify the exten
 <!-- ====================================================================== -->
 ## Next steps
 
-For information on getting started with your extension, see [Sample: Display an image in a pop-up](part1-simple-extension.md).
+Next, install, run, and study [Sample: Picture viewer pop-up webpage](./picture-viewer-popup-webpage.md).