diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml
index f64667f5c2..92dd0e6cc3 100644
--- a/microsoft-edge/developer/index.yml
+++ b/microsoft-edge/developer/index.yml
@@ -95,7 +95,7 @@ landingContent:
- text: Getting started tutorial
url: ../extensions-chromium/getting-started/index.md
- - text: Port a Chromium extension to Microsoft Edge
+ - text: Port a Chrome extension to Microsoft Edge
url: ../extensions-chromium/developer-guide/port-chrome-extension.md
- linkListType: how-to-guide
links:
@@ -108,7 +108,7 @@ landingContent:
- text: Register as a Microsoft Edge extension developer
url: ../extensions-chromium/publish/create-dev-account.md
- - text: Create a simple extension
+ - text: "Tutorial part 1: Display an image in a pop-up"
url: ../extensions-chromium/getting-started/part1-simple-extension.md
# =============================================================================
# Row 2 with 3 cards
diff --git a/microsoft-edge/devtools-guide-chromium/sources/index.md b/microsoft-edge/devtools-guide-chromium/sources/index.md
index 8bf5abde91..1f112a5233 100644
--- a/microsoft-edge/devtools-guide-chromium/sources/index.md
+++ b/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)
-* [Create an extension tutorial, part 2](../../extensions-chromium/getting-started/part2-content-scripts.md)
+* [Tutorial part 2: Use JavaScript to insert an image in the webpage](../../extensions-chromium/getting-started/part2-content-scripts.md)
diff --git a/microsoft-edge/extensions-chromium/developer-guide/sidebar.md b/microsoft-edge/extensions-chromium/developer-guide/sidebar.md
index aa327d0356..970c138d24 100644
--- a/microsoft-edge/extensions-chromium/developer-guide/sidebar.md
+++ b/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)
-* [Create an extension tutorial, part 1](../getting-started/part1-simple-extension.md)
-* [Create an extension tutorial, part 2](../getting-started/part2-content-scripts.md)
+* [Tutorial part 1: Display an image in a pop-up](../getting-started/part1-simple-extension.md)
+* [Tutorial part 2: Use JavaScript to insert an image in the webpage](../getting-started/part2-content-scripts.md)
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extension-running.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extension-running.png
new file mode 100644
index 0000000000..40e5e410be
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extension-running.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-icon.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-icon.png
new file mode 100644
index 0000000000..55436f3956
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-icon.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup-no-extensions.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup-no-extensions.png
new file mode 100644
index 0000000000..86814eaedc
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup-no-extensions.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup.png
new file mode 100644
index 0000000000..3b0516219d
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/extensions-popup.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/load-unpacked-icon.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/load-unpacked-icon.png
new file mode 100644
index 0000000000..ccc526dbba
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/load-unpacked-icon.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-developermode-toggle.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-developermode-toggle.png
index ec9fd748cf..fac5effd24 100644
Binary files a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-developermode-toggle.png and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-developermode-toggle.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-installed-extension.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-installed-extension.png
index f2cdb88667..080967f872 100644
Binary files a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-installed-extension.png and b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-installed-extension.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-threedots.png b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-threedots.png
deleted file mode 100644
index ef7e30d370..0000000000
Binary files a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading-images/part1-threedots.png and /dev/null differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md
index 9371b38c49..200ccd56e4 100644
--- a/microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md
+++ b/microsoft-edge/extensions-chromium/getting-started/extension-sideloading.md
@@ -1,42 +1,66 @@
---
-title: Sideload an extension
-description: How to test an extension by sideloading it in the browser.
+title: Sideload an extension to install and test it locally
+description: Test an extension locally by sideloading it, so that it's locally installed in your instance of Microsoft Edge.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
-ms.date: 11/07/2022
+ms.date: 10/04/2024
---
-# Sideload an extension
+# Sideload an extension to install and test it locally
-During development, you can use Microsoft Edge browser to run and debug your extension safely. By sideloading your extension locally in your browser, you can run and test your extension without changing any settings. This helps you test new extensions safely.
+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.
-To sideload an extension into Microsoft Edge:
-1. In Microsoft Edge, select **Settings and more** (...) > **Extensions**.
+
+## Locally installing and running an extension
- 
+To sideload an extension into Microsoft Edge, so that it's locally installed in your browser for testing:
- The **Extensions** pop-up box opens.
+1. In Microsoft Edge, click the **Extensions** () button, next to the Address bar, if this icon is displayed. Or, select **Settings and more** (...) > **Extensions**. The **Extensions** pop-up opens:
-1. Click **Manage extensions**. The **Extensions** page (`edge://extensions`) opens in a new tab.
+ 
-1. Turn on the **Developer mode** toggle:
+1. Click **Manage extensions**. The **Extensions** management page opens in a new tab:
-1. When installing your extension for the first time, click the **Load unpacked** button. The **Select the extension directory** dialog opens.
+1. Turn on the **Developer mode** toggle.
+
+1. When installing your extension for the first time, click the **Load unpacked** () 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.
+
+ Example path for [Tutorial part 1: Display an image in a pop-up](./part1-simple-extension.md):
+
+ `C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\`
-1. Select the directory that contains your extension source files, and then click the **Select Folder** button. Your extension is installed in your browser, similar to extensions that are installed from the store:
+ Example path for [Tutorial part 2: Use JavaScript to insert an image in the webpage](./part2-content-scripts.md):
+
+ `C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part2\extension-getting-started-part2\`
+
+ The extension is installed in your browser, similar to extensions that are installed from the store:
+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. In the upper right of Microsoft Edge, click the **Extensions** () button. Or, select **Settings and more** (...) > **Extensions**.
+
+ The **Extensions** pop-up opens:
+
+ 
+
+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 () icon:
+
+ 
+
-## Updating an extension
+## Locally updating an extension
-To update a sideloaded extension:
+To update an extension that's been installed locally (sideloaded) in your browser:
1. Make any required changes to the extension.
@@ -46,10 +70,18 @@ To update a sideloaded extension:
-## Removing an extension
+## Locally removing an extension
-To remove the extension from your browser:
+To remove an extension that's been installed locally (sideloaded) in your browser:
1. Go to `edge://extensions`.
1. On the extension, click **Remove**.
+
+
+
+## See also
+
+
+* [Tutorial part 1: Display an image in a pop-up](./part1-simple-extension.md)
+* [Tutorial part 2: Use JavaScript to insert an image in the webpage](./part2-content-scripts.md)
diff --git a/microsoft-edge/extensions-chromium/getting-started/index.md b/microsoft-edge/extensions-chromium/getting-started/index.md
index fedb68b885..b2856d098a 100644
--- a/microsoft-edge/extensions-chromium/getting-started/index.md
+++ b/microsoft-edge/extensions-chromium/getting-started/index.md
@@ -9,6 +9,7 @@ ms.subservice: extensions
ms.date: 02/06/2022
---
# Extension concepts and architecture
+
This article introduces concepts about building a Microsoft Edge extension. Follow along to understand how multi-tab browsers work.
@@ -72,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 [Create an extension tutorial, part 1](part1-simple-extension.md).
+For information on getting started with your extension, see [Tutorial part 1: Display an image in a pop-up](part1-simple-extension.md).
diff --git a/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extension-running.png b/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extension-running.png
new file mode 100644
index 0000000000..948540c0ff
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension-images/extension-running.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md b/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
index 1ab52068a5..aa439664cf 100644
--- a/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
+++ b/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
@@ -1,22 +1,31 @@
---
-title: Create an extension tutorial, part 1
-description: Build an extension that pops up the NASA picture of the day.
+title: "Tutorial part 1: Display an image in a pop-up"
+description: Build an extension that displays an image file in a webpage in a pop-up, without JavaScript.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
-ms.date: 06/28/2022
+ms.date: 10/04/2024
---
-# Create an extension tutorial, part 1
+# Tutorial part 1: Display an image in a pop-up
-The goal for this tutorial is to build a Microsoft Edge extension, starting with an empty directory. You are building an extension that pops up the NASA picture of the day. In this tutorial, you'll learn how to create an extension by:
+The [Part 1 sample: Display an image in a pop-up](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1) is a simple static extension, without JavaScript, that displays the `stars.jpeg` image in a small webpage in a pop-up in any Microsoft Edge tab:
-* Creating a `manifest.json` file.
-* Adding icons.
-* Opening a default pop-up dialog.
+
-If you want to test out the completed extension that you are building in this tutorial, download the source code from [MicrosoftEdge-Extensions repo > extension-getting-started-part1](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1). The source code has been updated from Manifest V2 to Manifest V3.
+You create this type of extension by doing the following:
+1. Create a manifest.json file.
+1. Add icons for launching the extension.
+1. Open a default pop-up dialog.
+
+Along the way, you install (or update) and test the extension.
+
+If you want to immediately install and run the completed extension, or view its finished code, either:
+* Clone the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo to your local drive. Use the directory `/extension-getting-started-part1/`.
+* Download the source code from the [/part1/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1) folder of the MicrosoftEdge-Extensions repo.
+
+Then you can install and run the finished extension that's in the repo, per [Sideload an extension to install and test it locally](extension-sideloading.md).
@@ -24,178 +33,158 @@ If you want to test out the completed extension that you are building in this tu
Every extension package must have a `manifest.json` file at the root. The manifest provides details of your extension, the extension package version, the extension name and description, and so on.
-The following code outlines the basic information needed in your `manifest.json` file:
+All the coding steps in this article have already been done in the Part 1 demo in the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo. We recommend first cloning the repo and installing and running the Part 1 demo, before (or instead of) starting with an empty directory and then manually creating directories, creating files, and pasting code into the files.
-#### [Manifest V3](#tab/v3)
+This step has already been done in [manifest.json](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part1/part1/manifest.json) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 1 extension by starting with an empty directory:
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 3,
- "description": "An extension to display the NASA picture of the day."
-}
-```
+* In a directory on your machine, using an editor, such as Visual Studio Code, create a `manifest.json` file that contains the following lines:
-#### [Manifest V2](#tab/v2)
+ ```json
+ {
+ "name": "NASA picture of the day pop-up",
+ "version": "0.0.0.1",
+ "manifest_version": 3,
+ "description": "A basic extension that displays an image in a pop-up.",
+ }
+ ```
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 2,
- "description": "An extension to display the NASA picture of the day."
-}
-```
----
+
+## Step 2: Add icons for launching the extension
+
+This step has already been done in the Part 1 demo in the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo. If you want to manually create the Part 1 extension, continue with the following steps.
+
+1. Create an `icons` directory in your project, in the same directory as the manifest file, to store the icon image files. The icons are used as the background image for the button that the user clicks to launch the extension:
+
+ 
+
+ For icons:
+ * We recommend using `PNG` format, but you can also use `BMP`, `GIF`, `ICO` or `JPEG` formats.
+ * We recommend using images that are 128 x 128 px, which are resized by the browser if necessary.
+
+1. Make sure the directories of your project are similar to the following structure:
+
+ ```shell
+ └── part1
+ ├── manifest.json
+ └── icons
+ ├── nasapod16x16.png
+ ├── nasapod32x32.png
+ ├── nasapod48x48.png
+ └── nasapod128x128.png
+ ```
+
+1. Obtain the `.png` files from the repo:
+ * `nasapod16x16.png`
+ * `nasapod32x32.png`
+ * `nasapod48x48.png`
+ * `nasapod128x128.png`
+
+ For example, individually download the files from the [/icons/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1/icons) folder of the MicrosoftEdge-Extensions repo and place them in your `/icons/` directory.
+
+1. List the icons in the `manifest.json` file, as follows:
+
+ ```json
+ {
+ "name": "NASA picture of the day pop-up",
+ "version": "0.0.0.1",
+ "manifest_version": 3,
+ "description": "A basic extension that displays an image in a pop-up.",
+ "icons": {
+ "16": "icons/nasapod16x16.png",
+ "32": "icons/nasapod32x32.png",
+ "48": "icons/nasapod48x48.png",
+ "128": "icons/nasapod128x128.png"
+ }
+ }
+ ```
-## Step 2: Add icons
-
-Start by creating the `icons` directory in your project to store the icon image files. The icons are used for the background image of the button that users select to launch the extension.
-
-
-
-For icons:
-* We recommend using `PNG` format, but you can also use `BMP`, `GIF`, `ICO` or `JPEG` formats.
-* We recommend using images that are 128 x 128 px, which are resized by the browser if necessary.
-
-The directories of your project should be similar to the following structure:
-
-```shell
-└── part1
- ├── manifest.json
- └── icons
- ├── nasapod16x16.png
- ├── nasapod32x32.png
- ├── nasapod48x48.png
- └── nasapod128x128.png
-```
-
-Next, add the icons to the `manifest.json` file. Update your `manifest.json` file with the icons information so that it matches the following code. The `png` files listed in the following code are available in the download file mentioned earlier in this article.
-
-#### [Manifest V3](#tab/v3)
-
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 3,
- "description": "An extension to display the NASA picture of the day.",
- "icons": {
- "16": "icons/nasapod16x16.png",
- "32": "icons/nasapod32x32.png",
- "48": "icons/nasapod48x48.png",
- "128": "icons/nasapod128x128.png"
- }
-}
-```
-
-#### [Manifest V2](#tab/v2)
-
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 2,
- "description": "An extension to display the NASA picture of the day.",
- "icons": {
- "16": "icons/nasapod16x16.png",
- "32": "icons/nasapod32x32.png",
- "48": "icons/nasapod48x48.png",
- "128": "icons/nasapod128x128.png"
+## Step 3: Open a default pop-up dialog
+
+This step has already been done in [popup.html](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part1/part1/popup/popup.html) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 1 extension, continue with the following steps.
+
+Create a `HTML` file to run when the user launches your extension. When the user clicks the icon to launch the extension, this file will be displayed as a modal dialog.
+
+1. Create the HTML file named `popup.html` in a directory named `popup`.
+
+1. Add the following code to `popup.html`, to display the stars image:
+
+ ```html
+
+
+
+ NASA picture of the day
+
+
+
+
+
+
+
+ ```
+
+1. Add the file `stars.jpeg` in the `images` folder. For example, download [stars.jpeg](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part1/part1/images/stars.jpeg) from the MicrosoftEdge-Extensions repo.
+
+1. Make sure the directories of your project are similar to the following structure:
+
+ ```shell
+ └── part1
+ ├── manifest.json
+ ├── icons
+ │ ├── nasapod16x16.png
+ │ ├── nasapod32x32.png
+ │ ├── nasapod48x48.png
+ │ └── nasapod128x128.png
+ ├── images
+ │ └── stars.jpeg
+ └── popup
+ └── popup.html
+ ```
+
+1. Register the pop-up in `manifest.json` under `action`, as follows:
+
+ ```json
+ {
+ "name": "NASA picture of the day pop-up",
+ "version": "0.0.0.1",
+ "manifest_version": 3,
+ "description": "A basic extension that displays an image in a pop-up.",
+ "icons": {
+ "16": "icons/nasapod16x16.png",
+ "32": "icons/nasapod32x32.png",
+ "48": "icons/nasapod48x48.png",
+ "128": "icons/nasapod128x128.png"
+ },
+ "action": {
+ "default_popup": "popup/popup.html"
+ }
}
-}
-```
+ ```
----
+That's everything you need to develop a simple extension.
-## Step 3: Open a default pop-up dialog
+## Step 4: Install and test the extension
-Now, create a `HTML` file to run when the user launches your extension. Create the HTML file named `popup.html` in a directory named `popup`. When users select the icon to launch the extension, `popup/popup.html` is displayed as a modal dialog.
-
-Add the code from the following listing to `popup.html` to display the stars image:
-
-```html
-
-
-
- NASA picture of the day
-
-
-
-
-
-
-
-```
-
-Ensure that you add the image file `images/stars.jpeg` to the images folder. The directories of your project should be similar to the following structure:
-
-```shell
-└── part1
- ├── manifest.json
- ├── icons
- │ ├── nasapod16x16.png
- │ ├── nasapod32x32.png
- │ ├── nasapod48x48.png
- │ └── nasapod128x128.png
- ├── images
- │ └── stars.jpeg
- └── popup
- └── popup.html
-```
-
-Finally, register the pop-up in `manifest.json` under `browser_action` (in Manifest V2) or under `action` (in Manifest V3), as shown in the following code:
-
-#### [Manifest V3](#tab/v3)
-
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 3,
- "description": "An extension to display the NASA picture of the day.",
- "icons": {
- "16": "icons/nasapod16x16.png",
- "32": "icons/nasapod32x32.png",
- "48": "icons/nasapod48x48.png",
- "128": "icons/nasapod128x128.png"
- },
- "action": {
- "default_popup": "popup/popup.html"
- }
-}
-```
-
-#### [Manifest V2](#tab/v2)
-
-```json
-{
- "name": "NASA picture of the day viewer",
- "version": "0.0.0.1",
- "manifest_version": 2,
- "description": "An extension to display the NASA picture of the day.",
- "icons": {
- "16": "icons/nasapod16x16.png",
- "32": "icons/nasapod32x32.png",
- "48": "icons/nasapod48x48.png",
- "128": "icons/nasapod128x128.png"
- },
- "browser_action": {
- "default_popup": "popup/popup.html"
- }
-}
-```
+Install and run the extension; see [Sideload an extension to install and test it locally](extension-sideloading.md). The extension displays `popup.html`, containing `stars.jpeg`, in a pop-up:
----
+
+
+You can open this Part 1 demo extension in any tab, including an empty tab or the Manage Extensions tab.
+
+After running and testing the extension, you can continue on to [Tutorial part 2: Use JavaScript to insert an image in the webpage](./part2-content-scripts.md).
-## Next steps
+## See also
+
+
+* [Sideload an extension to install and test it locally](extension-sideloading.md)
+* [Tutorial part 2: Use JavaScript to insert an image in the webpage](./part2-content-scripts.md)
-That's everything you need to develop a working extension. Now, continue on to sideload and test your extension. For more information, see [Sideload an extension](extension-sideloading.md).
+GitHub:
+* [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo.
+ * [/part1/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1) - source code of the Part 1 sample.
diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/extensions-icon.png b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/extensions-icon.png
new file mode 100644
index 0000000000..55436f3956
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/extensions-icon.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/open-the-extension.png b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/open-the-extension.png
new file mode 100644
index 0000000000..1b3318847a
Binary files /dev/null and b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/open-the-extension.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-popupdialog.png b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-popupdialog.png
index 280d8ceace..64bab42daf 100644
Binary files a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-popupdialog.png and b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-popupdialog.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-showingimage.png b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-showingimage.png
index 0a44c1be80..a4589639ae 100644
Binary files a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-showingimage.png and b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts-images/part2-showingimage.png differ
diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md
index b3a2d57455..4abd5cd830 100644
--- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md
+++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md
@@ -1,39 +1,64 @@
---
-title: Create an extension tutorial, part 2
+title: "Tutorial part 2: Use JavaScript to insert an image in the webpage"
description: Dynamically inserting a NASA picture below the page body tag by using content scripts.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
-ms.date: 09/24/2024
+ms.date: 10/04/2024
---
-# Create an extension tutorial, part 2
+# Tutorial part 2: Use JavaScript to insert an image in the webpage
-To see the completed extension package source for this part of the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part2](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2).
+The [Part 2 sample: Use JavaScript to insert an image in the webpage](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2) uses JavaScript code to insert the `stars.jpeg` image into the top of the currently opened webpage. The extension's pop-up contains a title and an HTML button that's labelled **Display**. When you click the **Display** button, JavaScript sends a message from the extension icon's pop-up, and dynamically inserts JavaScript running as content in the browser tab.
-This tutorial covers the following extension technologies:
-* Injecting JavaScript libraries into an extension.
-* Exposing extension assets to browser tabs.
-* Including content pages in existing browser tabs.
-* Having content pages listen for messages from pop-ups and respond.
+The Part 2 sample uses the following extension technologies:
+* Injecting JavaScript libraries into an extension.
+* Exposing extension assets to browser tabs.
+* Including content webpages in existing browser tabs.
+* Having content webpages listen for messages from pop-ups and respond.
-You'll learn to update your pop-up menu to replace your static stars image with a title and a standard HTML button. That button, when selected, passes that image of stars to the content page. This image is now embedded in the extension and inserted into the active browser tab. Here are the steps.
+You'll open the Part 2 extension from the **Extensions** () button after installing the extension via the **Manage Extensions** tab:
-These steps require that you complete the initial extension package steps, in [Create an extension tutorial, part 1](./part1-simple-extension.md).
+
+
+The extension displays a small HTML page in a pop-up, containing a title, instructions, and a **Display** button:
+
+
+
+When you click the **Display** button, JavaScript code temporarily inserts `stars.jpeg` at the top of the current webpage, pushing down the content of the webpage to below the image. The injected content sets the image element to display `stars.jpeg` in the top of the current webpage, and then removes the image when you click the image:
+
+
+
+If you want to immediately install and run the completed extension, or view its finished code, either:
+* Clone the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo to your local drive. Use repo directory `/extension-getting-started-part2/`.
+* Download the source code from the [/extension-getting-started-part2/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2) folder of the MicrosoftEdge-Extensions repo.
+
+Then you can install and run the finished extension that's in the repo, per [Sideload an extension to install and test it locally](extension-sideloading.md). The tab must contain a webpage before opening the extension.
-## Step 1: Update pop-up.html to include a button
+## Step 1: Update popup.html to include a button
+
+To use this article, first do the steps in [Tutorial part 1: Display an image in a pop-up](./part1-simple-extension.md); that is, clone the MicrosoftEdge-Extensions repo, install the Part 1 demo, and run that demo.
+
+This step has already been done in [popup.html](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/popup/popup.html) in the MicrosoftEdge-Extensions repo.
-In the popup folder where you created the `popup.html` file, you'll do the following:
-1. Add tagging that displays a title with a button.
-1. Include a reference to an empty JavaScript file `popup.js`.
+The hypothetical starting state for this Part 2 article, if you were to manually build-up the sample to add JavaScript, is that a directory exists for the part 2 code, containing the same directories and files that are created in the Part 1 article. These can be sibling directories for Part 1 and Part 2, as done in the MicrosoftEdge-Extensions repo.
+
+It's possible to install the completed Part 1 and Part 2 demos from the MicrosoftEdge-Extensions repo, side-by-side. We recommend first cloning the repo and installing and running the demos, before (or instead of) starting with an empty directory and then manually creating directories, creating files, and pasting code into the files.
+
+To manually expand the completed Part 1 demo to create the Part 2 demo, you would need to do the following:
+1. In the folder that contains the `popup.html` file for Part 2 (initially a copy of the Part 1 file), add tagging that displays a title with a button.
+1. Include a reference to a JavaScript file, `popup.js`.
1. Program that button.
-Below is a sample updated HTML file:
+Below is the sample HTML file:
+
+`/popup/popup.html` (complete):
```html
+
@@ -53,32 +78,38 @@ Below is a sample updated HTML file:
Display the NASA picture of the day
-
(select the image to remove)
+
(click the image to remove it from the webpage)
```
-After updating and opening the extension, a pop-up opens with a display button:
+Do the steps in [Sideload an extension to install and test it locally](extension-sideloading.md) to locally update the extension and then run the extension. The tab must contain a webpage before opening the extension.
-
+After updating and opening the extension, a pop-up opens, containing a small HTML page with a title, instructions, and a **Display** button:
-
+
-## Step 2: Update popup.html to display image at the top of the browser tab
+## Step 2: Update the webpage to insert the image at the top
-After adding the button, the next task is to make it bring up the `images/stars.jpeg` image file at the top of the active tab page.
+After adding the **Display** button, the next task will be to make the button display the `images/stars.jpeg` image file at the top of the webpage that's in the active tab.
-Each tab page (and extension) runs in its own thread. Create a content script that is injected into the tab page. Then, send a message from your pop-up to that content script running on the tab page. The content script will receive the message, which describes which image should be displayed.
+Each tab page (and extension) runs in its own thread. In a step below, you'll create a content script that is injected into the tab page. The injected script will send a message from your pop-up to that content script that's running on the tab page. The content script will receive the message, which describes which image should be displayed.
## Step 3: Create the pop-up JavaScript to send a message
-Create the `popup/popup.js` file and add code to send a message to your not-yet-created content script that you must momentarily create and inject into your browser tab. To do that, the following code adds an `onclick` event to your pop-up **Display** button:
+This step has already been done in [popup.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/popup/popup.js) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 2 extension, continue with the following steps.
+
+Create the `popup/popup.js` file, and then add the following code in that file.
+
+This code sends a message to your not-yet-created content script that you must momentarily create and inject into your browser tab. To do that, the following code adds an `onclick` event to your pop-up **Display** button:
+
+`/popup/popup.js` (initial):
```javascript
const sendMessageId = document.getElementById("sendmessageid");
@@ -94,10 +125,12 @@ In the `onclick` event, find the current browser tab. Then, use the `chrome.tab
In that message, you must include the URL to the image you want to display. Make sure that you send a unique ID to assign to the inserted image.
To send a unique ID to assign to the inserted image, a couple different approaches are possible:
-* Approach 1: Let the content insertion JavaScript generate that image ID. We won't use that approach here, for reasons that become apparent later.
+* Approach 1: Let the content insertion JavaScript generate that image ID. We won't use that approach here, for reasons that become apparent later.
* Approach 2: Generate that unique ID here in `popup.js`, and then pass that ID to the not-yet-created content script. We'll use this approach.
-The following code outlines the updated code in `popup/popup.js`. You also pass in the current tab ID, which is used later in this article:
+The following code outlines the updated code in `popup/popup.js`. You also pass in the current tab ID, which is used later in this article:
+
+`/popup/popup.js` (complete):
```javascript
const sendMessageId = document.getElementById("sendmessageid");
@@ -130,13 +163,17 @@ if (sendMessageId) {
## Step 4: Make your `stars.jpeg` available from any browser tab
-To make `images/stars.jpeg` available from any browser tab, you must use the `chrome.runtime.getURL` API.
+This step has already been done in [manifest.json](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/manifest.json) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 2 extension, continue with the following steps.
-Note: If you are using Manifest V2, then instead use `chrome.extension.getURL`. That extra prefix is returned by `getURL` with the image attached, and looks something like the following: ```httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg```
+To make `images/stars.jpeg` available from any browser tab, you must use the `chrome.runtime.getURL` API.
The reason is that you're injecting the image using the `src` attribute of the `img` element into the content page. The content page is running on a unique thread that isn't the same as the thread running the extension. You must expose the static image file as a web asset for it to work correctly.
-Add another entry in the `manifest.json` file to declare that the image is available to all browser tabs. That entry is as follows (you should see it in the full `manifest.json` file below when you add the content script declaration coming up):
+Add another entry in the `manifest.json` file to declare that the image is available to all browser tabs.
+
+That entry is as follows (you should see it in the full `manifest.json` file below when you add the content script declaration coming up):
+
+`/manifest.json` (portion):
```json
"web_accessible_resources": [
@@ -147,20 +184,24 @@ Add another entry in the `manifest.json` file to declare that the image is avail
]
```
-You've now written the code in your `popup.js` file to send a message to the content page that is embedded on the current active tab page, but you haven't created and injected that content page. Do that now.
+You've now written the code in your `popup.js` file to send a message to the content page that is embedded on the current active tab page.
## Step 5: Update your `manifest.json` for new content and web access
+Next, you'll create and inject the content page that's embedded on the current active tab page. This step has already been done in [manifest.json](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/manifest.json) in the MicrosoftEdge-Extensions repo.
+
The updated `manifest.json` that includes the `content-scripts` and `web_accessible_resources` is as follows:
+`/manifest.json` (complete):
+
```json
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
- "description": "An extension to display the NASA picture of the day.",
+ "description": "An extension that uses JavaScript to insert an image at the top of the webpage.",
"icons": {
"16": "icons/nasapod16x16.png",
"32": "icons/nasapod32x32.png",
@@ -187,13 +228,17 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
}
```
-The `matches` attribute is set to ``, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. You also added `lib\jquery.min.js`. You can include that from the download mentioned at the top of the section.
+The `matches` attribute is set to ``, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. You also added `lib\jquery.min.js`. You can copy that file from the [/lib/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/lib) folder of the MicrosoftEdge-Extensions repo.
#### Add jQuery
-In the content scripts that you're injecting, plan on using jQuery (`$`). You added a minified version of jQuery and put it in your extension package as `lib\jquery.min.js`. These content scripts run in individual sandboxes, which means that the jQuery injected into the `popup.js` page isn't shared with the content.
+This step has already been done in [jquery.min.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/lib/jquery.min.js) in the MicrosoftEdge-Extensions repo.
+
+In the content scripts that you're injecting, plan on using jQuery (`$`). You added a minified version of jQuery and put it in your extension package as `lib\jquery.min.js`.
+
+These content scripts run in individual sandboxes, which means that the jQuery injected into the `popup.js` page isn't shared with the content.
@@ -206,7 +251,11 @@ Even if the browser tab has JavaScript running on it on the loaded web page, any
## Step 6: Add the content script message listener
-Here is that `content-scripts\content.js` file that gets injected into every browser tab page based on your `manifest.json` `content-scripts` section:
+To continue manually building-up the Part 2 demo, you would need to create this file. This step has already been done in [content.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/content-scripts/content.js) in the MicrosoftEdge-Extensions repo.
+
+Here's the `content-scripts\content.js` file that gets injected into every browser tab page based on the `content-scripts` section in `manifest.json`:
+
+`/content-scripts/content.js` (complete):
```javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
@@ -229,7 +278,7 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
});
```
-Notice that all the above JavaScript does is to register a `listener` using the `chrome.runtime.onMessage.addListener` Extension API method. This listener waits for messages like the one you sent from the `popup.js` described earlier with the `chrome.tabs.sendMessage` Extension API method.
+All that the above JavaScript does is to register a `listener` using the `chrome.runtime.onMessage.addListener` Extension API method. This listener waits for messages like the one you sent from the `popup.js` described earlier with the `chrome.tabs.sendMessage` Extension API method.
The first parameter of the `addListener` method is a function whose first parameter, request, is the details of the message being passed in. Remember, from `popup.js`, when you used the `sendMessage` method, those attributes of the first parameter are `url` and `imageDivId`.
@@ -241,22 +290,40 @@ When an event is processed by the listener, the function that is the first param
* The third script line adds a `click` event that covers the entire image allowing the user to select anywhere on the image and that image is removed from the page (along with it is event listener).
-8. Add functionality to remove the displayed image when selected
-Now, when you browse to any page and select your **Extension** icon, the pop-up menu is displayed as follows:
+
+## Step 7: Install and test the extension
-
+1. Install or update the extension, in the Manage Extensions page; see [Sideload an extension to install and test it locally](extension-sideloading.md).
-When you select the `Display` button, you get what is below. If you select anywhere on the `stars.jpeg` image, that image element is removed and tab pages collapses back to what was originally displayed:
+1. Go to a webpage, such as [Microsoft.com](https://www.microsoft.com), in a new window or tab. The tab must not be empty, and must not be the Manage Extensions page.
-
+1. Click the **Extensions** () button, next to the Address bar. Or, select **Settings and more** (...) > **Extensions**.
+
+ 
+
+1. Click the icon or name of the **NASA picture of the day viewer** extension.
+
+ The extension's pop-up opens:
+
+ 
-Congratulations! You've created an extension that successfully sends a message from the extension icon pop-up, and dynamically inserted JavaScript running as content on the browser tab. The injected content sets the image element to display your static stars `.jpeg` file.
+1. Click the **Display** button. `stars.jpeg` is inserted into the top of the current webpage in the current tab, pushing the webpage's content down below the image:
+
+ 
+
+1. Click the `stars.jpeg` image that's filling the top of the webpage. That image element is removed from the DOM tree and webpage, and the current webpage is restored, shifting its content back up to the top of the tab.
+
+Congratulations! You've created an extension that sends a message from the extension icon's pop-up, and dynamically inserts JavaScript running as content in the browser tab. The injected content sets the image element to display `stars.jpeg` in the top of the current webpage, and then removes the image when you click the image.
## See also
-* [Create an extension tutorial, part 1](./part1-simple-extension.md)
-* [MicrosoftEdge-Extensions repo > extension-getting-started-part2](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2) - the completed extension package source for Part 2 of the tutorial.
+* [Tutorial part 1: Display an image in a pop-up](./part1-simple-extension.md)
+* [Sideload an extension to install and test it locally](extension-sideloading.md)
+
+GitHub:
+* [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions) repo.
+ * [/extension-getting-started-part2/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2) - source code of the Part 2 sample.
diff --git a/microsoft-edge/extensions-chromium/index.md b/microsoft-edge/extensions-chromium/index.md
index a070882ef3..f8cdbbf7fa 100644
--- a/microsoft-edge/extensions-chromium/index.md
+++ b/microsoft-edge/extensions-chromium/index.md
@@ -9,6 +9,7 @@ ms.subservice: extensions
ms.date: 08/20/2024
---
# Overview of Microsoft Edge extensions
+
A Microsoft Edge _extension_, also called an _add-on_, is a small app that developers use to add or modify features of Microsoft Edge to improve a user's browsing experience. An extension provides a niche experience or function that is important to a target audience. You publish a Microsoft Edge extension at the [Microsoft Edge Add-ons website](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
diff --git a/microsoft-edge/extensions-chromium/landing/index.yml b/microsoft-edge/extensions-chromium/landing/index.yml
index e04074ff42..3261af38c9 100644
--- a/microsoft-edge/extensions-chromium/landing/index.yml
+++ b/microsoft-edge/extensions-chromium/landing/index.yml
@@ -1,6 +1,6 @@
### YamlMime:Landing
# landing page for Extensions portion of docset
-title: Microsoft Edge Extensions documentation
+title: Microsoft Edge extensions documentation
summary: Develop an extension (add-on) for Microsoft Edge.
metadata:
@@ -47,13 +47,13 @@ landingContent:
- text: Extension concepts and architecture
url: ../getting-started/index.md
- - text: Create an extension tutorial, part 1
+ - text: "Tutorial part 1: Display an image in a pop-up"
url: ../getting-started/part1-simple-extension.md
- - text: Create an extension tutorial, part 2
+ - text: "Tutorial part 2: Use JavaScript to insert an image in the webpage"
url: ../getting-started/part2-content-scripts.md
- - text: Sideload an extension
+ - text: Sideload an extension to install and test it locally
url: ../getting-started/extension-sideloading.md
- linkListType: whats-new
diff --git a/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md b/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md
index 9ad3563b0a..634f4d9e25 100644
--- a/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md
+++ b/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md
@@ -34,7 +34,7 @@ You can contact the Microsoft Edge extensions support team to request help, subm
## Inquire about your extension's review status or certification status
-After submitting your extension via Partner Center, if you have questions regarding your extension's review status or certification status, use the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/new/choose) repo to create a new issue.
+After submitting your extension via Partner Center, if you have questions regarding your extension's review status or certification status, use the [MicrosoftEdge-Extensions](https://github.com/microsoft/MicrosoftEdge-Extensions/issues/new/choose) repo to enter a new Issue.
@@ -58,7 +58,7 @@ To feature your extension in a collection on the Microsoft Edge Add-ons website,
## MicrosoftEdge-Extensions discussion forum
-Participate in the [MicrosoftEdge-Extensions discussion forum](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions) to flag any issues, raise a feature request, be a part of discussions, and share your ideas regarding the Microsoft Edge Extensions Store.
+Participate in the [Discussions](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions) forum in the MicrosoftEdge-Extensions repo to flag any issues, raise a feature request, be a part of discussions, and share your ideas regarding the Microsoft Edge Extensions Store.
diff --git a/microsoft-edge/extensions-chromium/publish/reply-user-reviews.md b/microsoft-edge/extensions-chromium/publish/reply-user-reviews.md
index 3cd4c22054..a467ae5069 100644
--- a/microsoft-edge/extensions-chromium/publish/reply-user-reviews.md
+++ b/microsoft-edge/extensions-chromium/publish/reply-user-reviews.md
@@ -62,4 +62,4 @@ When you post a reply using the Partner Center dashboard, your reply appears on
* [Released features for Microsoft Edge Add-ons](../whats-new/released-features.md) - recently released features at Partner Center.
-Share your feedback, questions, and comments with the team on Twitter [@MSEdgeDev](https://twitter.com/msedgedev/) or via our [GitHub community's Discussion topic](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/18).
+Share your feedback, questions, and comments with the team on Twitter [@MSEdgeDev](https://twitter.com/msedgedev/), or see [You can now respond to user reviews on your Microsoft Edge Add-ons page](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/18) in **Discussions** in the MicrosoftEdge-Extensions repo.
diff --git a/microsoft-edge/extensions-chromium/whats-new/released-features.md b/microsoft-edge/extensions-chromium/whats-new/released-features.md
index 83503d3156..4c0722f91e 100644
--- a/microsoft-edge/extensions-chromium/whats-new/released-features.md
+++ b/microsoft-edge/extensions-chromium/whats-new/released-features.md
@@ -9,6 +9,7 @@ ms.subservice: extensions
ms.date: 06/23/2023
---
# Released features for Microsoft Edge Add-ons
+
The following features or updates have been launched on [Partner Center](https://partner.microsoft.com/dashboard/microsoftedge/) for Microsoft Edge extensions.
@@ -24,7 +25,7 @@ The sidebar feature of Microsoft Edge extensions enables an extension to display
## Retirement of submitting new Microsoft Edge Add-ons with Manifest V2
-Microsoft Partner Center only accepts new Manifest V3 Microsoft Edge extension submissions, with visibility set as 'Hidden' or 'Public'. To share your feedback and comments, see [GitHub discussion topic - Update your extensions from Manifest V2 to V3](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/27).
+Microsoft Partner Center only accepts new Manifest V3 Microsoft Edge extension submissions, with visibility set as 'Hidden' or 'Public'. To share your feedback and comments, see [Update your extensions from Manifest V2 to V3](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/27) in **Discussions** in the MicrosoftEdge-Extensions repo.
*Released July 2022*
@@ -34,7 +35,7 @@ Microsoft Partner Center only accepts new Manifest V3 Microsoft Edge extension s
You can reply via Partner Center to reviews and feedback received about your extension on the Microsoft Edge Add-ons product page.
-To share your feedback and comments about this feature, see [GitHub discussion topic - Reply to user reviews on your Microsoft Edge Add-on product page](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/18).
+To share your feedback and comments about this feature, see [You can now respond to user reviews on your Microsoft Edge Add-ons page](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions/18) in **Discussions** in the MicrosoftEdge-Extensions repo.
*Released May 2022*
diff --git a/microsoft-edge/extensions-chromium/whats-new/roadmap.md b/microsoft-edge/extensions-chromium/whats-new/roadmap.md
index 048b5c6c04..50ab74b3be 100644
--- a/microsoft-edge/extensions-chromium/whats-new/roadmap.md
+++ b/microsoft-edge/extensions-chromium/whats-new/roadmap.md
@@ -9,6 +9,7 @@ ms.subservice: extensions
ms.date: 06/27/2023
---
# Roadmap for Microsoft Edge Add-ons
+
These are the next planned [Partner Center](https://partner.microsoft.com/dashboard/microsoftedge/) features or updates for Microsoft Edge extensions.
diff --git a/microsoft-edge/index.yml b/microsoft-edge/index.yml
index 032cb1c5e5..2939737531 100644
--- a/microsoft-edge/index.yml
+++ b/microsoft-edge/index.yml
@@ -218,7 +218,7 @@ conceptualContent:
url: ./extensions-chromium/getting-started/index.md
itemType: overview
- - text: Port a Chromium extension to Microsoft Edge
+ - text: Port a Chrome extension to Microsoft Edge
url: ./extensions-chromium/developer-guide/port-chrome-extension.md
itemType: overview
@@ -234,7 +234,7 @@ conceptualContent:
url: ./extensions-chromium/publish/create-dev-account.md
itemType: how-to-guide
- - text: Create a simple extension
+ - text: "Tutorial part 1: Display an image in a pop-up"
url: ./extensions-chromium/getting-started/part1-simple-extension.md
itemType: how-to-guide
# Card
diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml
index 568c74425c..1b8e5f05c5 100644
--- a/microsoft-edge/toc.yml
+++ b/microsoft-edge/toc.yml
@@ -1006,13 +1006,13 @@
- name: Extension concepts and architecture
href: extensions-chromium/getting-started/index.md
- - name: Create an extension tutorial, part 1
+ - name: "Tutorial part 1: Display an image in a pop-up"
href: extensions-chromium/getting-started/part1-simple-extension.md
- - name: Create an extension tutorial, part 2
+ - name: "Tutorial part 2: Use JavaScript to insert an image in the webpage"
href: extensions-chromium/getting-started/part2-content-scripts.md
- - name: Sideload an extension
+ - name: Sideload an extension to install and test it locally
href: extensions-chromium/getting-started/extension-sideloading.md
# -------------------------------------
+