Skip to content

Commit 30ee647

Browse files
author
Michael Hoffman
authored
Merge pull request #2014 from eclipse439/main
Update extension tutorial to use Manifest V3
2 parents 53bff62 + dd549aa commit 30ee647

2 files changed

Lines changed: 158 additions & 12 deletions

File tree

‎microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md‎

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: MSEdgeTeam
55
ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.prod: microsoft-edge
8-
ms.date: 01/07/2021
8+
ms.date: 06/16/2022
99
---
1010
# Create an extension tutorial, part 1
1111

@@ -23,15 +23,17 @@ The goal for this tutorial is to build a Microsoft Edge extension, starting with
2323
<!-- ====================================================================== -->
2424
## Before you begin
2525

26-
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 -->
26+
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.
2727

2828

2929
<!-- ====================================================================== -->
3030
## Step 1: Create a manifest.json file
3131

3232
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.
3333

34-
The following code snippet outlines the basic information needed in your `manifest.json` file.
34+
The following code outlines the basic information needed in your `manifest.json` file:
35+
36+
#### [Manifest V2](#tab/v2)
3537

3638
```json
3739
{
@@ -42,6 +44,19 @@ The following code snippet outlines the basic information needed in your `manife
4244
}
4345
```
4446

47+
#### [Manifest V3](#tab/v3)
48+
49+
```json
50+
{
51+
"name": "NASA picture of the day viewer",
52+
"version": "0.0.0.1",
53+
"manifest_version": 3,
54+
"description": "An extension to display the NASA picture of the day."
55+
}
56+
```
57+
58+
---
59+
4560

4661
<!-- ====================================================================== -->
4762
## Step 2: Add icons
@@ -54,7 +69,7 @@ For icons:
5469
* We recommend using `PNG` format, but you can also use `BMP`, `GIF`, `ICO` or `JPEG` formats.
5570
* We recommend using images that are 128 x 128 px, which are resized by the browser if necessary.
5671

57-
The directories of your project should be similar to the following structure.
72+
The directories of your project should be similar to the following structure:
5873

5974
```shell
6075
└── part1
@@ -66,7 +81,9 @@ The directories of your project should be similar to the following structure.
6681
└── nasapod128x128.png
6782
```
6883

69-
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.
84+
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.
85+
86+
#### [Manifest V2](#tab/v2)
7087

7188
```json
7289
{
@@ -83,13 +100,32 @@ Next, add the icons to the `manifest.json` file. Update your `manifest.json` fil
83100
}
84101
```
85102

103+
#### [Manifest V3](#tab/v3)
104+
105+
```json
106+
{
107+
"name": "NASA picture of the day viewer",
108+
"version": "0.0.0.1",
109+
"manifest_version": 3,
110+
"description": "An extension to display the NASA picture of the day.",
111+
"icons": {
112+
"16": "icons/nasapod16x16.png",
113+
"32": "icons/nasapod32x32.png",
114+
"48": "icons/nasapod48x48.png",
115+
"128": "icons/nasapod128x128.png"
116+
}
117+
}
118+
```
119+
120+
---
121+
86122

87123
<!-- ====================================================================== -->
88124
## Step 3: Open a default pop-up dialog
89125

90126
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.
91127

92-
Add the code from the following code snippet to `popup.html` to display the stars image.
128+
Add the code from the following listing to `popup.html` to display the stars image:
93129

94130
```html
95131
<html lang="en">
@@ -105,7 +141,7 @@ Add the code from the following code snippet to `popup.html` to display the star
105141
</html>
106142
```
107143

108-
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.
144+
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:
109145

110146
```shell
111147
└── part1
@@ -121,7 +157,9 @@ Ensure that you add the image file `images/stars.jpeg` to the images folder. Th
121157
└── popup.html
122158
```
123159

124-
Finally, ensure you register the pop-up in `manifest.json` under `browser_action`, as shown in the following code snippet.
160+
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:
161+
162+
#### [Manifest V2](#tab/v2)
125163

126164
```json
127165
{
@@ -141,6 +179,28 @@ Finally, ensure you register the pop-up in `manifest.json` under `browser_action
141179
}
142180
```
143181

182+
#### [Manifest V3](#tab/v3)
183+
184+
```json
185+
{
186+
"name": "NASA picture of the day viewer",
187+
"version": "0.0.0.1",
188+
"manifest_version": 3,
189+
"description": "An extension to display the NASA picture of the day.",
190+
"icons": {
191+
"16": "icons/nasapod16x16.png",
192+
"32": "icons/nasapod32x32.png",
193+
"48": "icons/nasapod48x48.png",
194+
"128": "icons/nasapod128x128.png"
195+
},
196+
"action": {
197+
"default_popup": "popup/popup.html"
198+
}
199+
}
200+
```
201+
202+
---
203+
144204

145205
<!-- ====================================================================== -->
146206
## Next steps

‎microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md‎

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ author: MSEdgeTeam
55
ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.prod: microsoft-edge
8-
ms.date: 01/07/2021
8+
ms.date: 06/16/2022
99
---
1010
# Create an extension tutorial, part 2
1111

12-
[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 -->
12+
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.
1313

1414

1515
<!-- ====================================================================== -->
@@ -85,6 +85,8 @@ In that message, you must include the URL to the image you want to display. Als
8585

8686
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.
8787

88+
#### [Manifest V2](#tab/v2)
89+
8890
```javascript
8991
const sendMessageId = document.getElementById("sendmessageid");
9092
if (sendMessageId) {
@@ -112,7 +114,38 @@ if (sendMessageId) {
112114
}
113115
```
114116

115-
4. Make your stars.jpeg available from any browser tab
117+
#### [Manifest V3](#tab/v3)
118+
119+
```javascript
120+
const sendMessageId = document.getElementById("sendmessageid");
121+
if (sendMessageId) {
122+
sendMessageId.onclick = function() {
123+
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
124+
chrome.tabs.sendMessage(
125+
tabs[0].id,
126+
{
127+
url: chrome.runtime.getURL("images/stars.jpeg"),
128+
imageDivId: `${guidGenerator()}`,
129+
tabId: tabs[0].id
130+
},
131+
function(response) {
132+
window.close();
133+
}
134+
);
135+
function guidGenerator() {
136+
const S4 = function () {
137+
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
138+
};
139+
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
140+
}
141+
});
142+
};
143+
}
144+
```
145+
146+
---
147+
148+
4. Make your `stars.jpeg` available from any browser tab
116149

117150
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.
118151

@@ -124,18 +157,35 @@ The reason is that you're injecting the image using the `src` attribute of the `
124157

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

160+
#### [Manifest V2](#tab/v2)
161+
127162
```json
128163
"web_accessible_resources": [
129164
"images/*.jpeg"
130165
]
131166
```
132167

168+
#### [Manifest V3](#tab/v3)
169+
170+
```json
171+
"web_accessible_resources": [
172+
{
173+
"resources": ["images/*.jpeg"],
174+
"matches": ["<all_urls>"]
175+
}
176+
]
177+
```
178+
179+
---
180+
133181
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.
134182

135-
5. Update your manifest.json for content and web access
183+
5. Update your `manifest.json` for content and web access
136184

137185
The updated `manifest.json` that includes the `content-scripts` and `web_accessible_resources` is as follows.
138186

187+
#### [Manifest V2](#tab/v2)
188+
139189
```json
140190
{
141191
"name": "NASA picture of the day viewer",
@@ -165,6 +215,42 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
165215
}
166216
```
167217

218+
#### [Manifest V3](#tab/v3)
219+
220+
```json
221+
{
222+
"name": "NASA picture of the day viewer",
223+
"version": "0.0.0.1",
224+
"manifest_version": 3,
225+
"description": "An extension to display the NASA picture of the day.",
226+
"icons": {
227+
"16": "icons/nasapod16x16.png",
228+
"32": "icons/nasapod32x32.png",
229+
"48": "icons/nasapod48x48.png",
230+
"128": "icons/nasapod128x128.png"
231+
},
232+
"action": {
233+
"default_popup": "popup/popup.html"
234+
},
235+
"content_scripts": [
236+
{
237+
"matches": [
238+
"<all_urls>"
239+
],
240+
"js": ["lib/jquery.min.js","content-scripts/content.js"]
241+
}
242+
],
243+
"web_accessible_resources": [
244+
{
245+
"resources": ["images/*.jpeg"],
246+
"matches": ["<all_urls>"]
247+
}
248+
]
249+
}
250+
```
251+
252+
---
253+
168254
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.
169255

170256
6. Add jQuery and understanding the associated thread

0 commit comments

Comments
 (0)