javascript - 根据右键单击从 html 的特定部分抓取

Question

我正在构建一个 chrome 扩展，我希望能够右键单击页面的特定部分，然后从中抓取一些信息。因此，使用 chrome.contextMenus 我希望只能从我右键单击的元素(其中一个属性)中抓取。有点像 chrome 中的行为，当您右键单击页面上的某处并选择检查时，它将在您右键单击的页面元素上打开元素 View 。我想这样做的原因是因为会有许多具有不同 id(属性)的相似类型元素，所以我希望能够只获得我感兴趣的特定元素的 id。

这可能吗？

我正在查看 chrome.contextMenus文档，我想知道我是否知道元素类型(文章)我可以在其上设置上下文菜单并以这种方式获取存储在其中的 ID 吗？

Answer 1

我会说您的扩展程序必须记住右键单击下的最后一个元素是什么。内容脚本很适合它。

background.js

chrome.contextMenus.create({
    title: "Get ID",
    id: "menu1",
    onclick: function (info, tab) {
        // send message about context manu action
        chrome.tabs.sendMessage(tab.id, {
            msg: 'get_id'
        }, {
            frameId: info.frameId
        });
    }
});

content-script.js

let lastClickedEl = null;

// remember last clicked element
document.body.addEventListener('mousedown', function (e) {
    if (e.button === 2) { // right click to an element
        lastClickedEl = e.target;
    }
});

// receive message about context menu action
chrome.runtime.onMessage.addListener(function (request) {
    if(request.msg === 'get_id') {
        console.log(lastClickedEl.id); // your code here
    }
});