Skip to content

Commit

Permalink
Merge pull request #2014 from eclipse439/main
Browse files Browse the repository at this point in the history 
Update extension tutorial to use Manifest V3
  • Loading branch information
Michael Hoffman authored Jun 25, 2022
2 parents 53bff62 + dd549aa commit 30ee647
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 12 deletions.
76 changes: 68 additions & 8 deletions microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
View file
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,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
{
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
{
Expand All @@ -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">
Expand All @@ -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
Expand All @@ -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
{
Expand All @@ -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
Expand Down
94 changes: 90 additions & 4 deletions microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md
View file
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.

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

0 comments on commit 30ee647

Please sign in to comment.