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.

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

Update extension tutorial to use Manifest V3 #2014

Merged
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 2 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
10 changes: 5 additions & 5 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/15/2022
---
# Create an extension tutorial, part 1

Expand Down Expand Up @@ -37,7 +37,7 @@ The following code snippet outlines the basic information needed in your `manife
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 2,
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day."
}
```
Expand Down Expand Up @@ -72,7 +72,7 @@ Next, add the icons to the `manifest.json` file. Update your `manifest.json` fil
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 2,
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"icons": {
"16": "icons/nasapod16x16.png",
Expand Down Expand Up @@ -127,15 +127,15 @@ Finally, ensure you register the pop-up in `manifest.json` under `browser_action
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 2,
"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"
},
"browser_action": {
"action": {
"default_popup": "popup/popup.html"
}
}
Expand Down
20 changes: 13 additions & 7 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,7 +5,7 @@ author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 01/07/2021
ms.date: 06/15/2022
---
# Create an extension tutorial, part 2

Expand Down Expand Up @@ -93,7 +93,7 @@ if (sendMessageId) {
chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.extension.getURL("images/stars.jpeg"),
url: chrome.runtime.getURL("images/stars.jpeg"),
imageDivId: `${guidGenerator()}`,
tabId: tabs[0].id
},
Expand Down Expand Up @@ -126,8 +126,11 @@ Add another entry in the `manifest.json` file to declare that the image is avail

```json
"web_accessible_resources": [
"images/*.jpeg"
]
{
"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.
Expand All @@ -140,15 +143,15 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 2,
"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"
},
"browser_action": {
"action": {
"default_popup": "popup/popup.html"
},
"content_scripts": [
Expand All @@ -160,7 +163,10 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
}
],
"web_accessible_resources": [
"images/*.jpeg"
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
}
```
Expand Down