My goal is to create a dropdown menu that shows different links depending on which web you are, let's say you are on google.com and you want 3 dropdowns menu with links and if you are on github you like to show another 2 dropdown menu different links
So far, the extension works, I realised after checking a lot of questions about this that background.js shouldn't be the one having this code but this should be on the content-script.js which so far is empty.
This post helped me with the submenus And I was trying to understand this other one to do it but I cannot figure it out yet.
So basically, from what I understood, I need to declare all the URLs on the background.js as per this post but this is manifest 3 and I couldn't make it work.
I tried to use also
"content_scripts": [{
"matches": ["*://support.google.com/*"]}]
But this doesn't work and second it will only match one URL, so I came back to the code that works for me so far.
My question is about constraining the dropdown menu by urls, and if this should be done in the background.js and then the logic for the menu on the content-script.js.
Manifest
{
"manifest_version": 3,
"name": "Feedback",
"version": "0.0.2",
"description": "Create feedback with a click",
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"js": ["content-script.js"]
}],
"permissions": [
"contextMenus",
"tabs",
]
}
Background
const menuId = "myMenu";
//primary menu
chrome.contextMenus.create({
id : menuId,
title : "Feedback",
contexts : ["all"]
});
//sub-menu
chrome.contextMenus.create({
id : "help",
parentId : menuId,
title : "Help Form",
contexts : ["all"]
});
//sub-menu
chrome.contextMenus.create({
id : "internal",
parentId : menuId,
title : "Internal Form",
contexts : ["all"]
});
//sub-menu
chrome.contextMenus.create({
id : "translation",
parentId : menuId,
title : "Translation Form",
contexts : ["all"]
});
//sub-menu
chrome.contextMenus.create({
id : "github",
parentId : menuId,
title : "Issue GitHub",
contexts : ["all"]
});
//on click opens link
chrome.contextMenus.onClicked.addListener((info) => {
if (info.menuItemId === "help")
chrome.tabs.create({
url: "https://docs.google.com/forms"
});
if (info.menuItemId === "internal")
chrome.tabs.create({
url: "https://docs.google.com/forms"
});
if (info.menuItemId === "translation")
chrome.tabs.create({
url: "https://docs.google.com/forms"
});
if (info.menuItemId === "github")
chrome.tabs.create({
url: "https://github.com/help/issues/new"
});
});