How to retrieve the element where a contextmenu has been executed if i have only background script?

Question

it seems similar to that question How to retrieve the element where a contextmenu has been executed but i cant get nothing from that, please help me.

 var clickedEl;
document.addEventListener("mousedown", function(event){
        //right click
        if(event.button == 2) { 
            clickedEl = event.target;
        }
        }, true);
var imageSourceUrl;
function getClickHandler() {
    "use strict";

    return function (info, tab) {

 if(tab.url.indexOf('https://vk.com') > -1){
        if(clickedEl.parentNode.href.indexOf('photo') > -1){
        var photoalbumid = clickedEl.parentNode.href.substring(clickedEl.parentNode.href.lastIndexOf("o")+1);

            var getphoto = new XMLHttpRequest();

            getphoto.open('GET', 'https://api.vk.com/method/photos.getById?photos=' + photoalbumid);

            getphoto.onload = function () {

            var answer = JSON.parse(getphoto.response);

            if (answer.response[0].src_big === undefined) {
                thereIsAnError('hueta s polucheniem url img', answer, imageUrl);
                return;
            }
            imageSourceUrl =  decodeURIComponent(answer.response[0].src_big);                                           

            }                                    

            getphoto.send();
    }
}
if(imageSourceUrl === undefined) imageSourceUrl  = info.srcUrl;

           var imageUploadHelperUrl = 'upload.html#',
            vkCLientId           = '128593',
            vkRequestedScopes    = 'docs,offline,groups,stats,photos',
            vkAuthenticationUrl  = 'https://oauth.vk.com/authorize?client_id=' + vkCLientId + '&scope=' + vkRequestedScopes + '&redirect_uri=http%3A%2F%2Foauth.vk.com%2Fblank.html&display=page&response_type=token';

        chrome.storage.local.get({'vkaccess_token': {}}, function (items) {

            if (items.vkaccess_token.length === undefined) {
                chrome.tabs.create({url: vkAuthenticationUrl, active:false}, function (tab) {
                    chrome.tabs.onUpdated.addListener(listenerHandler(tab.id, imageSourceUrl));
                });

                return;
            }

            imageUploadHelperUrl += imageSourceUrl + '&' + items.vkaccess_token;

            chrome.tabs.create({url: imageUploadHelperUrl, active:false}); 
        });
    };
}

 * Handler of chrome context menu creation process -creates a new item in the context menu
 */
chrome.contextMenus.create({
    "title": "Rehost on vk.com",
    "type": "normal",
    "contexts": ["image"],
    "onclick": getClickHandler()
});

chrome says "Error in event handler for contextMenus: TypeError: Cannot read property 'parentNode' of undefined at " if(clickedEl.parentNode.href.indexOf('photo') " line.... how to access changed clickedEl inside getClickHandler() right ?

        //background 
var imageSourceUrl;
function getClickHandler() {
    "use strict";

    return function (info, tab) { 
        if(tab.url.indexOf('https://vk.com') > -1){
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {imghref : "gimmemore"}, function(response) {
                    imageSourceUrl = response.imaged;
                    console.log(response.imaged);
                });
            });
        }
        else{imageSourceUrl=info.srcUrl;}
        var imageUploadHelperUrl = 'upload.html#',
            vkCLientId           = '5118087',
            vkRequestedScopes    = 'docs,offline,groups,stats,photos',
            vkAuthenticationUrl  = 'https://oauth.vk.com/authorize?client_id=' + vkCLientId + '&scope=' + vkRequestedScopes + '&redirect_uri=http%3A%2F%2Foauth.vk.com%2Fblank.html&display=page&response_type=token';

        chrome.storage.local.get({'vkaccess_token': {}}, function (items) {

            if (items.vkaccess_token.length === undefined) {
                chrome.tabs.create({url: vkAuthenticationUrl, active:false}, function (tab) {
                    chrome.tabs.onUpdated.addListener(listenerHandler(tab.id, imageSourceUrl));
                });

                return;
            }

            imageUploadHelperUrl += imageSourceUrl + '&' + items.vkaccess_token;

            chrome.tabs.create({url: imageUploadHelperUrl, active:false}); 
        });
    };
}


    //content script
var clickedEl = null;
var photoalbumid = null;
document.addEventListener("mousedown", function(event){
       //right click
        if(event.button == 2) { 
            clickedEl = event.target;
            if(clickedEl.parentNode.href.indexOf('photo') > -1){
                photoalbumid = clickedEl.parentNode.href.substring(clickedEl.parentNode.href.lastIndexOf("o")+1);
                if (photoalbumid.indexOf('?') > -1) {
                    photoalbumid = photoalbumid.slice(0, photoalbumid.indexOf('?'));
                }
            }
            console.log(photoalbumid);
        }
        }, true);
                var getphoto = new XMLHttpRequest();

                getphoto.open('GET', 'https://api.vk.com/method/photos.getById?photos=' + photoalbumid);

                getphoto.onload = function () {

                var answer = JSON.parse(getphoto.response);

                if (answer.response[0].src_big === undefined) {
                thereIsAnError('hueta s polucheniem url img', answer, imageUrl);
                }
                imageSourceUrl =  decodeURIComponent(answer.response[0].src_big);                                           
                }                                    
                getphoto.send();

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.imghref == "gimmemore") {
        sendResponse({imaged : imageSourceUrl });
    }
});

alteration after re-read ^

Answer 1

You missed the part in the original answer where the comments explain how the code splits between parts of extension:

//content script
/* ... */

//background
/* ... */

You need to (re-)read the Architecture Overview to get a better idea of how Chrome extensions are structured.

What happens here is that the click event never actually happens in your background - it happens in an actual page, and that's where you can catch it with a content script.

But a content script cannot serve as a listener to the context menu events. You need the background for that. So, the (required) logic here is:

1. In the page, click listener prepares the information.
2. Context menu click happens, event listener in background fires.
3. Background script requests information from the content script.
4. Content script receives request, replies with information.
5. Background script receives reply, processes data.

With that in mind, please read the Overview (all of it this time) and then the original question again.