I’m trying to uniquely identify images that I click with a contextMenu, however I’m trying to resolve the edge case where there are multiple images with the same src.
Looking at the values in contextMenus.OnClickData there seems to be a targetElementId and parentMenuItemId which could be useful. However, when trying to use contextMenus.getTargetElement() in my content script to retrieve the targeted element (as described in the documentation) I’m getting the following error:
Uncaught (in promise) Error: browser.contextMenus is undefined
My question is why is browser.contextMenus not available in my content script? Also, I’m confused what the parentMenuItemId can be used for? Can it be accessed like with contextMenus.getTargetElement()? The documentation is not very descriptive of this value.
manifest.json
{
"manifest_version": 2,
...
"permissions": [
"activeTab",
"storage",
"tabs",
"contextMenus"
],
"content_scripts": [
{
"matches": [
"*://*/*"
],
"js": [
"content_script.js"
],
"run_at": "document_idle"
}
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
...
}
background.js
// ===== initialize context menu for single image adjustment on right click
browser.contextMenus.create(
{
id: "adjust-single-image",
title: "Adjust Single Image",
contexts: ["image"]
}
)
browser.contextMenus.onClicked.addListener((info, tab) => {
console.log(info)
browser.tabs.sendMessage(tab.id, {
action: 'adjustSingleImage',
imageInfo: {
parentMenuItemId: info.parentMenuItemId,
targetElementId: info.targetElementId,
srcUrl: info.srcUrl,
frameId: info.frameId
}
})
})
content_script.js
// ===== listen for message from popup or background script to apply changes
browser.runtime.onMessage.addListener(async (request) => {
console.log("got msg: " + request.action)
if ('action' in request && (request.action === 'enableFilter' || request.action === 'enableImageFilter' || request.action === 'changeType')) {
location.reload()
} else if (request.action === "adjustSingleImage") {
let {srcUrl, targetElementId, parentMenuItemId, frameId} = request.imageInfo;
let image;
if (targetElementId) {
console.log("Found targetElementId")
image = browser.contextMenus.getTargetElement(targetElementId);
// can this be done?
//} else if (parentMenuItemId && srcUrl) {
// console.log("Found parentMenuItemId")
// let parent = browser.contextMenus.getTargetElement(parentMenuItemId);
// image = parent.querySelector(`img[src="${srcUrl}"]`)
} else if (srcUrl) {
console.log("Found srcUrl")
image = document.querySelectorAll(`img[src="${srcUrl}"]`)[0]
} else {
console.log("Error: could not find selected image");
return
}
console.log(image);
}
});