Skip to content

Update extension tutorial to use Manifest V3 #2014

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

Merged
mikehoffms merged 6 commits into from
Jun 25, 2022
Merged

Update extension tutorial to use Manifest V3 #2014

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb1dda0
Update Part 1 Extension to use Manifest V3
eclipse439 Jun 15, 2022
ad716f6
updated part1 and part2 edge extension tutorials to use manifest v3
eclipse439 Jun 15, 2022
fdc6c28
Added tab-set to preserve V2 code listings
Jun 16, 2022
b7fe1e3
Specified which version is at demo repo
Jun 16, 2022
ed86ec3
Update microsoft-edge/extensions-chromium/getting-started/part1-simpl…
Jun 25, 2022
dd549aa
Remove dup line
Jun 25, 2022
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
63 changes: 61 additions & 2 deletions microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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).<!-- 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.


<!-- ====================================================================== -->
Expand All @@ -33,6 +33,7 @@ Every extension package must have a `manifest.json` file at the root. The manif

The following code snippet outlines the basic information needed in your `manifest.json` file.

#### [Manifest V2](#tab/v2)
```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -42,6 +43,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
Expand All @@ -68,6 +82,8 @@ The directories of your project should be similar to the following structure.

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.

#### [Manifest V2](#tab/v2)

```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -83,6 +99,25 @@ 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
Expand Down Expand Up @@ -123,6 +158,8 @@ Ensure that you add the image file `images/stars.jpeg` to the images folder. Th

Finally, ensure you register the pop-up in `manifest.json` under `browser_action`, as shown in the following code snippet.

#### [Manifest V2](#tab/v2)

```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -141,6 +178,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
Expand Down
94 changes: 90 additions & 4 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 @@ -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.


<!-- ====================================================================== -->
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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.
Copy link
Collaborator

@mikehoffms mikehoffms Jun 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This V2-specific word|sentence|paragraph needs techreview in future PR. chrome.extension.getURL is V2-specific. @ashishnirvana1 @eclipse439
rendered:
https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?tabs=v2
find chrome.extension.getURL then click tabs


Expand All @@ -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",
Expand Down Expand Up @@ -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
Expand Down