Chrome扩展：如何获取右键点击元素（排除右键菜单鼠标移动干扰）

需求说明 #

实现一个Chrome扩展，在右键菜单中添加选项，允许用户修改右键点击目标元素的背景色。

现有代码 #

manifest.json #

{
    "manifest_version": 3,
    "name": "Mouse Tracker",
    "description": "Tracks the mouse position and adds a right click context menu item to get the cursor position and currently hovered element and change the background color of that element to red.",
    "default_locale": "en",
    "version": "1.0",
 
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "contextMenus",
        "activeTab"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
}

background.js #

chrome.runtime.onInstalled.addListener(function () {
    chrome.contextMenus.create({
        id: "change-color",
        title: "Change background to red",
        contexts: ["all"]
    });
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
    if (info.menuItemId == "change-color") {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { command: "change_color" }, function (response) { });
        });
    }
});

尝试过的方案及问题 #

content.js #1 #

let element;

//Detecting when an element is hovered
document.addEventListener('mouseover', function (e) {
    element = e.target
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.command == "change_color") {
        sendResponse({ result: 'success' });
        element.style.backgroundColor = "red";
    }
});

问题：右键菜单弹出后，鼠标移动会触发菜单下方元素的mouseover事件，导致最终变红的是菜单下方元素，而非右键点击的目标元素。

content.js #2（问题相同） #

let mouseX = 0;
let mouseY = 0;
let element;

document.onmousemove = function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    element = document.elementFromPoint(mouseX, mouseY);
    console.log(element)
}

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.command == "change_color") {
        element.style.backgroundColor = "red";
        sendResponse({ result: 'success' });
    }
});

content.js #3（尝试检测菜单开闭失败） #

let mouseX = 0;
let mouseY = 0;
let element;
let contextOpen = false

document.onmousemove = function (e) {
    if (!contextOpen) {
        mouseX = e.clientX;
        mouseY = e.clientY;
        element = document.elementFromPoint(mouseX, mouseY);
        console.log(element)
    } 
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.command == "change_color") {
        element.style.backgroundColor = "red";
        sendResponse({result: 'success'});
    }
    if (request.command == "menu_open") {
        contextOpen = true
        sendResponse({result: 'success'});
    }
    if (request.command == "menu_close") {
        contextOpen = false
        sendResponse({result: 'success'});
    }
});

问题：Chrome上下文菜单API未提供菜单开闭的监听事件，无法通过后台脚本发送对应指令控制contextOpen状态。

可行解决方案 #

核心思路是在右键菜单触发的瞬间锁定目标元素，而非依赖鼠标移动或hover事件，避免菜单弹出后鼠标位移导致的元素误判。

修改后的content.js代码：

let targetElement = null;

// 监听右键菜单触发事件，记录点击的目标元素
document.addEventListener('contextmenu', function(e) {
    targetElement = e.target;
    // 若不需要保留页面原右键菜单，可启用下方代码阻止默认行为
    // e.preventDefault();
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.command === "change_color" && targetElement) {
        targetElement.style.backgroundColor = "red";
        sendResponse({ result: 'success' });
    } else {
        sendResponse({ result: 'no_element_selected' });
    }
});

原理说明 #

contextmenu事件在用户右键点击元素时立即触发，此时通过事件对象的target属性可以精准获取到右键点击的元素，不受后续右键菜单弹出后鼠标移动的影响，从根源上解决了元素误判问题。

内容的提问来源于stack exchange，提问作者J.Todd