From 32e82bf017d329b705f3dfae861c0bfb80cdbc07 Mon Sep 17 00:00:00 2001 From: bhuvanapriyap <178453891+bhuvanapriyap@users.noreply.github.com> Date: Tue, 24 Sep 2024 17:09:26 +0530 Subject: [PATCH 1/5] Update part2-content-scripts.md --- .../getting-started/part2-content-scripts.md | 73 +------------------ 1 file changed, 1 insertion(+), 72 deletions(-) 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 2a0b2fd8dd..c2f50a76de 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -121,37 +121,7 @@ if (sendMessageId) { }); }; } -``` - -#### [Manifest V2](#tab/v2) - -```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.extension.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()); - } - }); - }; -} -``` - +``` --- @@ -175,15 +145,6 @@ Add another entry in the `manifest.json` file to declare that the image is avail } ] ``` - -#### [Manifest V2](#tab/v2) - -```json -"web_accessible_resources": [ - "images/*.jpeg" -] -``` - --- 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. @@ -226,38 +187,6 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi ] } ``` - -#### [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" - }, - "content_scripts": [ - { - "matches": [ - "" - ], - "js": ["lib/jquery.min.js","content-scripts/content.js"] - } - ], - "web_accessible_resources": [ - "images/*.jpeg" - ] -} -``` - --- 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. From cd9894a1258938f0df062d3067c20fbd343f1283 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Tue, 24 Sep 2024 11:25:02 -0700 Subject: [PATCH 2/5] remove tabset tagging --- .../getting-started/part2-content-scripts.md | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) 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 c2f50a76de..815247416b 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: extensions -ms.date: 10/26/2022 +ms.date: 09/24/2024 --- # Create an extension tutorial, part 2 @@ -24,6 +24,8 @@ You'll learn to update your pop-up menu to replace your static stars image with These steps require that you complete the steps for initial extension package steps. For the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part1](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3). + + ## Step 1: Update pop-up.html to include a button In the popup folder where you created the `popup.html` file [from the initial part of the tutorial](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3), you'll add tagging that displays a title with a button. You'll later program that button in a different step, but for now include a reference to an empty JavaScript file `popup.js`. @@ -63,6 +65,8 @@ After updating and opening the extension, a pop-up opens with a display button. + + ## Step 2: Update popup.html to display image at the top of the browser tab 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. @@ -94,8 +98,6 @@ To send a unique ID to assign to the inserted image, a couple different 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: -#### [Manifest V3](#tab/v3) - ```javascript const sendMessageId = document.getElementById("sendmessageid"); if (sendMessageId) { @@ -122,7 +124,7 @@ if (sendMessageId) { }; } ``` ---- + ## Step 4: Make your `stars.jpeg` available from any browser tab @@ -131,12 +133,10 @@ To make `images/stars.jpeg` available from any browser tab, you must use the `ch 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``` -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. +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): -#### [Manifest V3](#tab/v3) - ```json "web_accessible_resources": [ { @@ -145,7 +145,7 @@ 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. @@ -154,8 +154,6 @@ You've now written the code in your `popup.js` file to send a message to the con The updated `manifest.json` that includes the `content-scripts` and `web_accessible_resources` is as follows: -#### [Manifest V3](#tab/v3) - ```json { "name": "NASA picture of the day viewer", @@ -187,17 +185,21 @@ 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. + + #### 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. +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. + -#### Understanding the Thread + +#### Understanding the thread -Keep in mind that even if the browser tab has JavaScript running on it on the loaded web page, any content that's injected doesn't have access to that JavaScript. The injected JavaScript only has access to the actual DOM that's loaded in that browser tab. +Even if the browser tab has JavaScript running on it on the loaded web page, any content that's injected doesn't have access to that JavaScript. The injected JavaScript only has access to the actual DOM that's loaded in that browser tab. + @@ -248,4 +250,4 @@ When you select the `Display` button, you get what is below. If you select anyw ![The image showing in browser](./part2-content-scripts-images/part2-showingimage.png) -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. +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. From 6cc60d6f496a6ebe6570cb407cf110da6855f13e Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Tue, 24 Sep 2024 11:41:51 -0700 Subject: [PATCH 3/5] trailing spaces --- .../getting-started/part2-content-scripts.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 815247416b..cf7b09ab39 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -10,7 +10,7 @@ ms.date: 09/24/2024 --- # Create an extension tutorial, part 2 -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). +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 source code has been updated from Manifest V2 to Manifest V3. @@ -22,13 +22,13 @@ This tutorial covers the following extension technologies: 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. -These steps require that you complete the steps for initial extension package steps. For the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part1](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3). +These steps require that you complete the steps for initial extension package steps. For the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part1](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3). ## Step 1: Update pop-up.html to include a button -In the popup folder where you created the `popup.html` file [from the initial part of the tutorial](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3), you'll add tagging that displays a title with a button. You'll later program that button in a different step, but for now include a reference to an empty JavaScript file `popup.js`. +In the popup folder where you created the `popup.html` file [from the initial part of the tutorial](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3), you'll add tagging that displays a title with a button. You'll later program that button in a different step, but for now include a reference to an empty JavaScript file `popup.js`. Below is a sample updated HTML file: @@ -123,7 +123,7 @@ if (sendMessageId) { }); }; } -``` +``` From e372a9bb5a8ff93b48bc7c39508eba6fed983d84 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Tue, 24 Sep 2024 11:58:59 -0700 Subject: [PATCH 4/5] fix links --- .../getting-started/part2-content-scripts.md | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) 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 cf7b09ab39..18c6c96026 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -10,9 +10,7 @@ ms.date: 09/24/2024 --- # Create an extension tutorial, part 2 -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 source code has been updated from Manifest V2 to Manifest V3. +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 source code uses Manifest V3. This tutorial covers the following extension technologies: * Injecting JavaScript libraries into an extension. @@ -22,13 +20,16 @@ This tutorial covers the following extension technologies: 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. -These steps require that you complete the steps for initial extension package steps. For the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part1](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3). +These steps require that you complete the initial extension package steps, in [Create an extension tutorial, part 1](./part1-simple-extension.md). ## Step 1: Update pop-up.html to include a button -In the popup folder where you created the `popup.html` file [from the initial part of the tutorial](/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3), you'll add tagging that displays a title with a button. You'll later program that button in a different step, but for now include a reference to an empty JavaScript file `popup.js`. +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`. +1. Program that button. Below is a sample updated HTML file: @@ -59,7 +60,7 @@ Below is a sample updated HTML file: ``` -After updating and opening the extension, a pop-up opens with a display button. +After updating and opening the extension, a pop-up opens with a display button: ![popup.html display after selecting the Extension icon](./part2-content-scripts-images/part2-popupdialog.png) @@ -251,3 +252,11 @@ When you select the `Display` button, you get what is below. If you select anyw ![The image showing in browser](./part2-content-scripts-images/part2-showingimage.png) 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. + + + +## 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. From 24fd8d45245be591337f679761219ba1077f300c Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Wed, 25 Sep 2024 12:54:10 -0700 Subject: [PATCH 5/5] remove whether repo uses mv2 or 3 --- .../getting-started/part2-content-scripts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 18c6c96026..b3a2d57455 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -10,7 +10,7 @@ ms.date: 09/24/2024 --- # Create an extension tutorial, part 2 -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 source code uses Manifest V3. +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). This tutorial covers the following extension technologies: * Injecting JavaScript libraries into an extension.