You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: microsoft-edge/extensions-chromium/getting-started/part1-simple-extension.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,9 +31,10 @@ To test out the completed extension that you are building in this tutorial, down
31
31
32
32
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.
33
33
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
35
36
36
#### [Manifest V2](#tab/v2)
37
+
37
38
```json
38
39
{
39
40
"name": "NASA picture of the day viewer",
@@ -68,7 +69,7 @@ For icons:
68
69
* We recommend using `PNG` format, but you can also use `BMP`, `GIF`, `ICO` or `JPEG` formats.
69
70
* We recommend using images that are 128 x 128 px, which are resized by the browser if necessary.
70
71
71
-
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:
72
73
73
74
```shell
74
75
└── part1
@@ -80,7 +81,7 @@ The directories of your project should be similar to the following structure.
80
81
└── nasapod128x128.png
81
82
```
82
83
83
-
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.
84
85
85
86
#### [Manifest V2](#tab/v2)
86
87
@@ -124,7 +125,7 @@ Next, add the icons to the `manifest.json` file. Update your `manifest.json` fil
124
125
125
126
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.
126
127
127
-
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:
128
129
129
130
```html
130
131
<htmllang="en">
@@ -140,7 +141,7 @@ Add the code from the following code snippet to `popup.html` to display the star
140
141
</html>
141
142
```
142
143
143
-
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:
144
145
145
146
```shell
146
147
└── part1
@@ -156,8 +157,7 @@ Ensure that you add the image file `images/stars.jpeg` to the images folder. Th
156
157
└── popup.html
157
158
```
158
159
159
-
Finally, ensure you register the pop-up in `manifest.json` under `browser_action`, as shown in the following code snippet.
160
-
Finally, ensure you 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 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:
0 commit comments