Как получить элемент, в котором было выполнено контекстное меню - PullRequest
Новая
       15

Как получить элемент, в котором было выполнено контекстное меню

32 голосов
/ 09 октября 2011

Я пытаюсь написать расширение Google Chrome, где я использую контекстное меню.Это контекстное меню доступно только для редактируемых элементов (например, для ввода текста).Когда контекстное меню щелкается и выполняется, я хотел бы получить в функции обратного вызова элемент (входной текст), для которого было выполнено контекстное меню, чтобы обновить значение, связанное с этим входным текстом.

Здесьскелет моего расширения: 

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
    });

Параметры, связанные с функцией mycallback, не содержат никакой полезной информации для получения элемента, нажатого правой кнопкой мыши.Кажется, это известная проблема (http://code.google.com/p/chromium/issues/detail?id=39507), но в течение нескольких месяцев нет прогресса. Кто-нибудь знает обходной путь: без jquery и / или с jquery?

1 Ответ

50 голосов
/ 09 октября 2011

Сценарий содержимого можно внедрить с помощью mousedown прослушивателя событий и элемента хранилища, по которому щелкнули:

content script.js 

//content script
var clickedEl = null;

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

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

background.js 

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