通过 chrome 个选项卡发送鼠标移动

Question

我有这个代码：

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status === 'complete') {
        var host = tab.url;
        var reg = new RegExp("test", "gi");
        if(reg.test(host)) {
            chrome.tabs.executeScript(
                tabId,{
                    code:"$(window).on('mousemove', function(e) {var posX = e.pageX;var posY = e.pageY;console.log(posX);console.log(posY);});"
                },
                function(results) {
            });
        }
    }
});

如果我进入页面鼠标移动被捕获。在控制台中显示鼠标坐标。现在，我想将相同的鼠标坐标发送到另一个 chrome 选项卡。在另一个选项卡中，应该捕获鼠标坐标，上面的代码应该在控制台中显示 posX 和 poxY。求教一些做这件事需要注意什么函数、方法或者关键字。

Answer 1

没有服务器，您可以使用 Window.postMessage() 来完成此操作。 postMessages 允许两个 window objects 之间的通信。

所以在你的 parent window 中，你会得到类似这样的东西：

//Window-A.html
document.onmousemove = function (e) {mousePos(e);};

var mouseX = 0;
var mouseY = 0;

function mousePos (e) {
    if (!mie) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    }
    else {
        mouseX = event.clientX + document.body.scrollLeft;
        mouseY = event.clientY + document.body.scrollTop;
    }

    document.show.mouseXField.value = mouseX;
    document.show.mouseYField.value = mouseY;

    return true;
}

var newWindow = window.open(...);
newWindow.postMessage(`x: ${mouseX}, y: ${mouseY}`, '*');

然后在接收 window 中添加侦听器：

//Window-b.html
window.addEventListener("message", function (event) {
    console.log(event.data); // will log out the values from the postMessage from Window-A.html
}, false);

通过 chrome 个选项卡发送鼠标移动

Sending mouse move through chrome tabs

javascript

google-chrome-extension

chrome-custom-tabs