Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove MV2 code from "Create an extension tutorial, part 2" #3278

Merged
merged 5 commits into from
Sep 27, 2024
Merged

Remove MV2 code from "Create an extension tutorial, part 2" #3278

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
32e82bf
Update part2-content-scripts.md
bhuvanapriyap Sep 24, 2024
cd9894a
remove tabset tagging
mikehoffms Sep 24, 2024
6cc60d6
trailing spaces
mikehoffms Sep 24, 2024
e372a9b
fix links
mikehoffms Sep 24, 2024
24fd8d4
remove whether repo uses mv2 or 3
mikehoffms Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 30 additions & 90 deletions microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@ 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

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).

This tutorial covers the following extension technologies:
* Injecting JavaScript libraries into an extension.
Expand All @@ -22,11 +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:

Expand Down Expand Up @@ -57,12 +60,14 @@ Below is a sample updated HTML file:
</html>
```

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)

<!--![popup.html display after selecting the Extension icon] -->


<!-- ====================================================================== -->
## 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.
Expand Down Expand Up @@ -94,8 +99,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) {
Expand Down Expand Up @@ -123,36 +126,6 @@ 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());
}
});
};
}
```

---

<!-- ====================================================================== -->
## Step 4: Make your `stars.jpeg` available from any browser tab
Expand All @@ -161,12 +134,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": [
{
Expand All @@ -176,15 +147,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.


Expand All @@ -193,8 +155,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",
Expand Down Expand Up @@ -227,48 +187,20 @@ 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": [
"<all_urls>"
],
"js": ["lib/jquery.min.js","content-scripts/content.js"]
}
],
"web_accessible_resources": [
"images/*.jpeg"
]
}
```

---

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 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.
<!-- todo: mention 'thread', since heading says 'thread' -->


<!-- ====================================================================== -->
Expand Down Expand Up @@ -319,4 +251,12 @@ 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.


<!-- ====================================================================== -->
## See also
<!-- all links in article -->

* [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.