Jak odzyskać element, w którym został wykonany contextmenu

Question

Jak odzyskać element, w którym został wykonany contextmenu

Próbuję napisać rozszerzenie Google chrome, gdzie używam contextmenu. Ten contextmenu jest dostępny tylko na elementach edytowalnych (np. tekstach wejściowych). Po kliknięciu i wykonaniu contextmenu chciałbym pobrać w funkcji callback element (tekst wejściowy), na którym został wykonany contextmenu, aby zaktualizować wartość powiązaną z tym tekstem wejściowym.

Oto szkielet mojego rozszerzenia:

function mycallback(info, tab) {
  // missing part that refers to the question:
  // how to retrieve elt which is assumed to be 
  // the element on which the contextMenu has been executed ?
  elt.value = "my new value"
}

var id = chrome.contextMenus.create({
        "title": "Click me",
        "contexts": ["editable"],
        "onclick": mycallback
    });

Parametry powiązane z funkcją mycallback nie zawierają żadnych użytecznych informacji do pobrania klikniętego elementu. Wydaje się, że jest to znany problem ( http://code.google.com/p/chromium/issues/detail?id=39507 ), ale nie ma postępu od kilku miesięcy. Czy ktoś zna obejście: bez jquery i / lub z jquery?

44

javascript dom google-chrome-extension contextmenu

Author: ThinkingStiff, 2011-10-09

Source

1 answers

score 67 · Accepted Answer

Można wprowadzić skrypt zawartości za pomocą detektora zdarzeń contextmenu i zapisać element, który został kliknięty:

manifest.json

"content_scripts": [{
  "matches": ["<all_urls>"],
  "js": ["content.js"],
  "all_frames": true,
  "match_about_blank": true
}]

skrypt treści.js

//content script
var clickedEl = null;

document.addEventListener("contextmenu", function(event){
    clickedEl = event.target;
}, true);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request == "getClickedEl") {
        sendResponse({value: clickedEl.value});
    }
});

tło.js

//background
function mycallback(info, tab) {
    chrome.tabs.sendMessage(tab.id, "getClickedEl", {frameId: info.frameId}, data => {
        elt.value = data.value;
    });
}