[Chrome Extension] contextmenu가 클릭된 DOM element 알아내기

일단, chrome.contextMenus.onClicked.addListener의 callback에서 받을 수 있는 info, tab 파라메터로는 알 수가 없음.

context menu가 실행된 위치에 있는 DOM element를 알아내려면 content script를 밀어넣어서,

oncontextmenu 이벤트 핸들러를 하나 등록하고 context menu가 실행되었을 때마다 이벤트 핸들러로 넘어온 element를 특정변수에 저장해두는 꼼수밖에 없음.

아래는 간략한 예제.

background.js

// content_script.js 밀어넣기
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if (changeInfo.status !== 'complete') return;

    chrome.tabs.executeScript(tabId, {file:'content_script.js', allFrames: true, runAt: 'document_end'});
});

// context menu 등록
chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        id: 'bloodguy_test',
        title: '백충덕 테스트',
        contexts: ['all']
    });
});

// '백충덕 테스트' 라는 context menu가 실행되면 해당탭에 메세지 전송
chrome.contextMenus.onClicked.addListener(function(info, tab){
    var req = {
        url: info.pageUrl,
        cmd: 'bloodguy_test'
    };
    chrome.tabs.sendMessage(tab.id, req);
});

content_script.js

// context menu가 발생된 위치에 있던 DOM element를 저장할 변수
var contextMenuElement = null;

// context menu가 발생할 때마다 DOM element 저장
document.addEventListener('contextmenu', function(e){
    contextMenuElement = e.srcElement;
});

// background.js에서 '백충덕 테스트' context menu가 실행되면 넘어오는 메세지 처리 핸들러
chrome.extension.onMessage.addListener(function(req, sender, sendResponse){
    if (req.url!==location.href || req.cmd!=='bloodguy_test') return;

    // context menu가 발생된 위치에 있던 element는 contextMenuElement 변수에 저장되어 있음.
    // 이제 이걸로 마음껏...
    console.log(contextMenuElement);
});