Update extension tutorial to use Manifest V3

microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 01/07/2021
+ms.date: 06/16/2022
 ---
 # Create an extension tutorial, part 1
 
@@ -23,15 +23,17 @@ The goal for this tutorial is to build a Microsoft Edge extension, starting with
 <!-- ====================================================================== -->
 ## Before you begin
 
-To test out the completed extension that you are building in this tutorial, download the [source code](https://github.com/MicrosoftEdge/MicrosoftEdge-Extensions-Demos/tree/master/extension-getting-started-part1/part1).<!-- changing master to main doesn't work 5/19/2022 -->
+To test out the completed extension that you are building in this tutorial, download the source code from the [MicrosoftEdge-Extensions-Demos repo > extension-getting-started-part1](https://github.com/MicrosoftEdge/MicrosoftEdge-Extensions-Demos/tree/master/extension-getting-started-part1/part1).<!-- changing master to main doesn't work 5/19/2022 -->  The source code has been updated from Manifest V2 to Manifest V3.
 
 
 <!-- ====================================================================== -->
 ## Step 1: Create a manifest.json file
 
 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 snippet outlines the basic information needed in your `manifest.json` file.
+The following code outlines the basic information needed in your `manifest.json` file:
+
+#### [Manifest V2](#tab/v2)
 
 ```json
 {
@@ -42,6 +44,19 @@ The following code snippet outlines the basic information needed in your `manife
 }
 ```
 
+#### [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."
+}
+```
+
+---
+
 
 <!-- ====================================================================== -->
 ## Step 2: Add icons
@@ -54,7 +69,7 @@ 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.
+The directories of your project should be similar to the following structure:
 
 ```shell
 └── part1
@@ -66,7 +81,9 @@ The directories of your project should be similar to the following structure.
         └── 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 snippet. The `png` files listed in the following code are available in the download file mentioned earlier in this article.
+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 V2](#tab/v2)
 
 ```json
 {
@@ -83,13 +100,32 @@ Next, add the icons to the `manifest.json` file. Update your `manifest.json` fil
 }
 ```
 
+#### [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"
+    }
+}
+```
+
+---
+
 
 <!-- ====================================================================== -->
 ## Step 3: Open a default pop-up dialog
 
 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 code snippet to `popup.html` to display the stars image.
+Add the code from the following listing to `popup.html` to display the stars image:
 
 ```html
 <html lang="en">
@@ -105,7 +141,7 @@ Add the code from the following code snippet to `popup.html` to display the star
 </html>
 ```
 
-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.
+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
@@ -121,7 +157,9 @@ Ensure that you add the image file `images/stars.jpeg` to the images folder.  Th
         └── popup.html
 ```
 
-Finally, ensure you register the pop-up in `manifest.json` under `browser_action`, as shown in the following code snippet.
+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 V2](#tab/v2)
 
 ```json
 {
@@ -141,6 +179,28 @@ Finally, ensure you register the pop-up in `manifest.json` under `browser_action
 }
 ```
 
+#### [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"
+    }
+}
+```
+
+---
+
 
 <!-- ====================================================================== -->
 ## Next steps

microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md

@@ -5,11 +5,11 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 01/07/2021
+ms.date: 06/16/2022
 ---
 # Create an extension tutorial, part 2
 
-[Completed extension package source for this part](https://github.com/MicrosoftEdge/MicrosoftEdge-Extensions-Demos/tree/master/extension-getting-started-part2/extension-getting-started-part2)<!-- changing master to main doesn't work 5/19/2022 -->
+To see the completed extension package source for this part of the tutorial, go to [MicrosoftEdge-Extensions-Demos repo > extension-getting-started-part2](https://github.com/MicrosoftEdge/MicrosoftEdge-Extensions-Demos/tree/master/extension-getting-started-part2/extension-getting-started-part2).<!-- changing master to main doesn't work 5/19/2022 -->   The source code has been updated from Manifest V2 to Manifest V3.
 
 
 <!-- ====================================================================== -->
@@ -85,6 +85,8 @@ In that message, you must include the URL to the image you want to display.  Als
 
 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.
 
+#### [Manifest V2](#tab/v2)
+
 ```javascript
 const sendMessageId = document.getElementById("sendmessageid");
 if (sendMessageId) {
@@ -112,7 +114,38 @@ if (sendMessageId) {
 }
 ```
 
-4. Make your stars.jpeg available from any browser tab
+#### [Manifest V3](#tab/v3)
+
+```javascript
+const sendMessageId = document.getElementById("sendmessageid");
+if (sendMessageId) {
+    sendMessageId.onclick = function() {
+        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+            chrome.tabs.sendMessage(
+                tabs[0].id,
+                {
+                    url: chrome.runtime.getURL("images/stars.jpeg"),
+                    imageDivId: `${guidGenerator()}`,
+                    tabId: tabs[0].id
+                },
+                function(response) {
+                    window.close();
+                }
+            );
+            function guidGenerator() {
+                const S4 = function () {
+                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+                };
+                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+            }
+        });
+    };
+}
+```
+
+---
+
+4. Make your `stars.jpeg` available from any browser tab
 
 You're probably wondering why, when you pass the `images/stars.jpeg` must you use the `chrome.extension.getURL` chrome Extension API instead of just passing in the relative URL without the extra prefix like in the previous section.  By the way, that extra prefix, returned by `getUrl` with the image attached looks something like the following.
 
@@ -124,18 +157,35 @@ The reason is that you're injecting the image using the `src` attribute of the `
 
 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 V2](#tab/v2)
+
 ```json
 "web_accessible_resources": [
     "images/*.jpeg"
 ]
 ```
 
+#### [Manifest V3](#tab/v3)
+
+```json
+"web_accessible_resources": [
+    {
+      "resources": ["images/*.jpeg"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+```
+
+---
+
 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.
 
-5.  Update your manifest.json for content and web access
+5.  Update your `manifest.json` for content and web access
 
 The updated `manifest.json` that includes the `content-scripts` and `web_accessible_resources` is as follows.
 
+#### [Manifest V2](#tab/v2)
+
 ```json
 {
     "name": "NASA picture of the day viewer",
@@ -165,6 +215,42 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
 }
 ```
 
+#### [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"
+    },
+    "content_scripts": [
+        {
+            "matches": [
+              "<all_urls>"
+            ],
+            "js": ["lib/jquery.min.js","content-scripts/content.js"]
+        }
+    ],
+    "web_accessible_resources": [
+        {
+            "resources": ["images/*.jpeg"],
+            "matches": ["<all_urls>"]
+        }
+    ]
+}
+```
+
+---
+
 The section you added is `content_scripts`.  The `matches` attribute is set to `<all_urls>`, 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're able to include that from the download mentioned at the top of the section.
 
 6. Add jQuery and understanding the associated thread