如何检索已执行上下文菜单的元素

IT技术 javascript dom google-chrome-extension contextmenu
2021-01-30 17:00:14

我正在尝试编写一个使用上下文菜单的 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个回答

您可以使用contextmenu事件侦听器和存储被单击的元素注入内容脚本：

清单文件.json

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

内容脚本.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});
    }
});

背景.js

//background
function mycallback(info, tab) {
    chrome.tabs.sendMessage(tab.id, "getClickedEl", {frameId: info.frameId}, data => {
        elt.value = data.value;
    });
}
非常感谢。解决方案是使用内容脚本来检索和更改当前选项卡中包含的字段的内容。确实，后台脚本是孤立的，无法访问当前网页的内容。然后，从内容脚本可以使用 document.activeElement
2021-03-17 17:00:14
如果您只需要可聚焦元素，例如输入，则可以改用document.activeElement.
2021-03-22 17:00:14
或者更好的是，contextmenu事件。在这种情况下，您不必检查event.button == 2
2021-03-28 17:00:14
onRequest 和 sendRequest 现在已弃用。它应该是 onMessage 和 sendMessage。
2021-04-06 17:00:14
我有 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
2021-04-07 17:00:14
其它你可能感兴趣的问题
上一篇传入 undefined 的目的是什么？ 下一篇如何限制 Bootstrap Datepicker 中的可选日期范围？