Skip to content
This repository has been archived by the owner on Dec 1, 2023. It is now read-only.

Update tutorial to Manifest V3 from Manifest V2 #30

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update tutorial to Manifest V3 from Manifest V2 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5da4d7b
Updated the tutorial to Manifest V3 from Manifest V2, because the Man…
aKacharava Apr 6, 2022
994030a
Merge branch 'master' into master
aKacharava Jul 18, 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
4 changes: 2 additions & 2 deletions extension-getting-started-part2/extension-getting-started-part2/content-scripts/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
$("head").prepend(
`<style>
.slide-image {
Expand All @@ -11,7 +11,7 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
`<img src="${request.url}" id="${request.imageDivId}"
class="slide-image" /> `
);
$(`#${request.imageDivId}`).click(function() {
$(`#${request.imageDivId}`).click(function () {
$(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
});
sendResponse({ fromcontent: "This message is from content.js" });
Expand Down
4 changes: 2 additions & 2 deletions extension-getting-started-part2/extension-getting-started-part2/lib/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

53 changes: 27 additions & 26 deletions extension-getting-started-part2/extension-getting-started-part2/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
{
"name": "NASA Picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "A chromium extension to show NASA's 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": [
{
"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>"]
}
]
}
}]
}
51 changes: 27 additions & 24 deletions extension-getting-started-part2/extension-getting-started-part2/popup/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
width: 500px;
}
button {
background-color: #336dab;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Show the NASA Picture of the Day</h1>
<h2>(click on the image to remove)</h2>
<button id="sendmessageid">Display</button>
<script src="popup.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 500px;
}
button {
background-color: #336dab;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Show the NASA picture of the day</h1>
<h2>(select the image to remove)</h2>
<button id="sendMessageId">Display</button>
<script src="./popup.js"></script>
</body>
</html>
50 changes: 26 additions & 24 deletions extension-getting-started-part2/extension-getting-started-part2/popup/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
const sendMessageId = document.getElementById("sendmessageid");
const sendMessageId = document.querySelector("#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) {
console.log("message with url sent");
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());
}
});
};
}
sendMessageId.onclick = function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
function guidGenerator() {
const S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0)
.toString(16)
.substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}

chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.runtime.getURL("images/stars.jpeg"),
imageDivId: `${guidGenerator()}`,
tabId: tabs[0].id,
},
function (response) {
window.close();
}
);
});
};
}