I worked with  Bhuvana Pappu to update this code example for this article: https://review.learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?branch=pr-en-us-2266&tabs=v3
This commit is contained in:
JasonAndrewWriter 2022-10-28 10:18:55 -07:00
Родитель 3ebe7d374c
Коммит 477c3570e0
3 изменённых файлов: 52 добавлений и 50 удалений

Просмотреть файл

@ -1,18 +1,18 @@
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
$("head").prepend(
`<style>
.slide-image {
height: auto;
width: 100vw;
}
</style> `
);
$("body").prepend(
`<img src="${request.url}" id="${request.imageDivId}"
class="slide-image" /> `
`<img src="${request.url}" id="${request.imageDivId}"
class="slide-image" /> `
);
$("head").prepend(
`<style>
.slide-image {
height: auto;
width: 100vw;
}
</style>`
);
$(`#${request.imageDivId}`).click(function() {
$(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
$(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
});
sendResponse({ fromcontent: "This message is from content.js" });
});

Просмотреть файл

@ -1,26 +1,29 @@
{
"name": "NASA Picture of the day viewer",
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 2,
"description": "A chromium extension to show NASA's Picture of the Day.",
"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"
"16": "icons/nasapod16x16.png",
"32": "icons/nasapod32x32.png",
"48": "icons/nasapod48x48.png",
"128": "icons/nasapod128x128.png"
},
"browser_action": {
"default_popup": "popup/popup.html"
"action": {
"default_popup": "popup/popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["lib/jquery.min.js","content-scripts/content.js"]
}
{
"matches": [
"<all_urls>"
],
"js": ["lib/jquery.min.js","content-scripts/content.js"]
}
],
"web_accessible_resources": [
"images/*.jpeg"
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
}

Просмотреть файл

@ -1,25 +1,24 @@
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.extension.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) {
chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.runtime.getURL("images/stars.jpeg"),
imageDivId: `${guidGenerator()}`,
tabId: tabs[0].id
},
function(response) {
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());
}
});
};
}