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-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-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标签发送鼠标移动

1 个答案: