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 298e0787aa..b4011fda72 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md +++ b/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,7 +23,7 @@ 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). +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). The source code has been updated from Manifest V2 to Manifest V3. @@ -31,7 +31,9 @@ To test out the completed extension that you are building in this tutorial, down 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 @@ -105,7 +141,7 @@ Add the code from the following code snippet to `popup.html` to display the star ``` -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 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 182493fdfd..079da71ca7 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/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) +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). 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": [""] + } + ] +``` + +--- + 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": [ + "" + ], + "js": ["lib/jquery.min.js","content-scripts/content.js"] + } + ], + "web_accessible_resources": [ + { + "resources": ["images/*.jpeg"], + "matches": [""] + } + ] +} +``` + +--- + The section you added is `content_scripts`. 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're able to include that from the download mentioned at the top of the section. 6. Add jQuery and understanding the associated thread