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.

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 1" #3277

Merged
merged 48 commits into from
Oct 25, 2024
Merged
Changes from 6 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
5635949
Update part1-simple-extension.md
bhuvanapriyap Sep 24, 2024
26fbc2c
remove tabset tagging
mikehoffms Sep 24, 2024
d890aee
see also
mikehoffms Sep 24, 2024
b9a9f29
todo asking if repo updated to MV3 yet
mikehoffms Sep 24, 2024
e084a75
remove statement about repo using mv3 or mv2
mikehoffms Sep 25, 2024
823b3a1
remove todo re part 2 from Next Step
mikehoffms Sep 25, 2024
2648cd0
numsteps, show toggle On, how run after sideload
mikehoffms Sep 25, 2024
26c7b81
initial h2, clarify article/scenario
mikehoffms Sep 30, 2024
ac30db1
clarify Sideloading title
mikehoffms Sep 30, 2024
0cbfb42
update link for macOS deploy Edge in hub
mikehoffms Sep 30, 2024
f62fd85
describe other, hard way
mikehoffms Sep 30, 2024
30a13a1
fix "Chromium" in title in hub & docset landing
mikehoffms Oct 2, 2024
594838c
lowercase "extensions" in landing page title
mikehoffms Oct 2, 2024
b9410ef
move Sideload up in toc
mikehoffms Oct 2, 2024
60090ba
Merge branch 'main' into user/bhuvanap/removemv2
mikehoffms Oct 2, 2024
6c5dc0f
remove mv2 note, clarify tut titles
mikehoffms Oct 2, 2024
c00096c
clarify tut titles, consistently
mikehoffms Oct 2, 2024
a4c05e6
link to Sideload to test, where appropriate
mikehoffms Oct 2, 2024
55f3451
quotes for title: yaml field
mikehoffms Oct 2, 2024
9d27c65
clean up desc of next step
mikehoffms Oct 2, 2024
e52c653
fix html filename in heading
mikehoffms Oct 2, 2024
be606b3
add picture of simple extension running
mikehoffms Oct 2, 2024
acd8f26
describe part 1 vs part 2, improve Intros
mikehoffms Oct 2, 2024
a535349
bold button label
mikehoffms Oct 2, 2024
3fdc5a2
show filename above each listing
mikehoffms Oct 2, 2024
2a1df4d
clean up comments for filenames of listings
mikehoffms Oct 2, 2024
9dbe23d
different desc: for 1 vs 2, must open webpage
mikehoffms Oct 4, 2024
97ec396
different "name" & "description" in part 1&2 code
mikehoffms Oct 4, 2024
a0ecfd3
date
mikehoffms Oct 4, 2024
db9f19b
deleted spurious "8." line
mikehoffms Oct 4, 2024
c39dfbc
remove desc of other demo
mikehoffms Oct 4, 2024
ca9b86c
starting-state dirs
mikehoffms Oct 4, 2024
6ddc907
update and add images
mikehoffms Oct 4, 2024
2ff2988
recomm demo, not doing coding steps
mikehoffms Oct 4, 2024
b950781
Step 6: say to create this file & already done
mikehoffms Oct 4, 2024
6cd6ec4
link directly to files in samples repo
mikehoffms Oct 4, 2024
ffdaca2
add aka links from samples repo readme
mikehoffms Oct 4, 2024
2e6ccfc
fix alt-text as "Stars" in popup.html in part 1
mikehoffms Oct 4, 2024
eb644a0
strike (which is not a webpage)
mikehoffms Oct 4, 2024
17c1d6e
clarify sample path examples
mikehoffms Oct 4, 2024
b1cbb7e
remove photo, remove "javascript", describe ux
mikehoffms Oct 4, 2024
a0c17d9
"samples repo">"MicrosoftEdge-Extensions repo"
mikehoffms Oct 4, 2024
417cda7
retitle, shift focus from tut to sample
mikehoffms Oct 5, 2024
fa2bd88
strike "standard" HTML button
mikehoffms Oct 5, 2024
c95fb64
typo We recommending
mikehoffms Oct 7, 2024
8e25ab7
same typo in Part 1
mikehoffms Oct 7, 2024
f63f101
clarify "with" a Display button
mikehoffms Oct 7, 2024
8588c8b
Merge branch 'main' into user/bhuvanap/removemv2
mikehoffms Oct 16, 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
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
ms.date: 06/28/2022
ms.date: 09/25/2024
---
# Create an extension tutorial, part 1

Expand All @@ -16,7 +16,7 @@ The goal for this tutorial is to build a Microsoft Edge extension, starting with
* Adding icons.
* Opening a default pop-up dialog.

If you want to test out the completed extension that you are building in this tutorial, download the source code from [MicrosoftEdge-Extensions repo > extension-getting-started-part1](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1). The source code has been updated from Manifest V2 to Manifest V3.
If you want to test out the completed extension that you are building in this tutorial, download the source code from [MicrosoftEdge-Extensions repo > extension-getting-started-part1](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1).


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

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

#### [Manifest V3](#tab/v3)

```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -37,19 +35,6 @@ The following code outlines the basic information needed in your `manifest.json`
}
```

#### [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."
}
```

---


<!-- ====================================================================== -->
## Step 2: Add icons
Expand All @@ -76,8 +61,6 @@ 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. The `png` files listed in the following code are available in the download file mentioned earlier in this article.

#### [Manifest V3](#tab/v3)

```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -93,25 +76,6 @@ Next, add the icons to the `manifest.json` file. Update your `manifest.json` fil
}
```

#### [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"
}
}
```

---


<!-- ====================================================================== -->
## Step 3: Open a default pop-up dialog
Expand Down Expand Up @@ -152,8 +116,6 @@ Ensure that you add the image file `images/stars.jpeg` to the images folder. Th

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 V3](#tab/v3)

```json
{
"name": "NASA picture of the day viewer",
Expand All @@ -172,30 +134,17 @@ Finally, register the pop-up in `manifest.json` under `browser_action` (in Manif
}
```

#### [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"
}
}
```
<!-- ====================================================================== -->
## Next steps

---
That's everything you need to develop a working extension. Now, continue on to sideload and test your extension. For more information, see [Sideload an extension](extension-sideloading.md).
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved


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

That's everything you need to develop a working extension. Now, continue on to sideload and test your extension. For more information, see [Sideload an extension](extension-sideloading.md).
* [Create an extension tutorial, part 2](./part2-content-scripts.md)<!-- not linked in present article -->
* [Sideload an extension](extension-sideloading.md)
* [MicrosoftEdge-Extensions repo > extension-getting-started-part1](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part1/part1) - source code of the completed extension that you build in this tutorial.