Unable to perform action after selecting from context menu
Charlie Clynes
{
"manifest_version": 3,
"name": "myextension",
"description": "text will go here",
"version": "1.0",
"action": {
"default_popup": "logo_popup.html",
"default_icon": "images/icon256c.png"
},
"permissions": [
"contextMenus", "tabs", "activeTab"
],
"background": {
"service_worker": "service_worker.js"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}],
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png",
"256": "images/icon256c.png"
},
"web_accessible_resources": [
{
"resources": ["popup_shop.html"],
"matches": ["<all_urls>"]
}
]
}
chrome.contextMenus.create({
title: "Shop",
contexts: ["all"],
id: "shopMenuItem"
});
// open div element on selection of corresponding menu item
chrome.contextMenus.onClicked.addListener(function(info, tab) {
chrome.tabs.query(
{ active: true, currentWindow: true },
function (tabs) {
var activeTab = tabs[0]
console.log(activeTab)
if (info.menuItemId === "shopMenuItem") {
chrome.tabs.sendMessage(activeTab.id, { msg: "openDiv"},
function(response) {
console.log(response)}
);
}}
)
});
// create the popup page
function createDiv() {
const divElt = document.createElement("divElt");
divElt.id = "divElt";
divElt.innerHTML = "divElt.html";
document.body.appendChild(divElt)
// style the popup
divElt.style.position = "fixed";
divElt.style.bottom = "20px";
divElt.style.right = "20px"
divElt.style.zIndex = "1000";
divElt.style.color = "white";
}
function removeDiv() {
const divElt = document.getElementById("divElt");
if (divElt) {
divElt.remove();
}
}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log(message);
createDiv();
sendResponse({ message : "content.js successfully received message"});
})
document.addEventListener('click', (event) => {
const divElt = document.getElementById('divElt');
if (divElt && !divElt.contains(event.target)) {
removeDiv();
}
});
