Question

我在这里遇到了一些问题。根据我之前的问题，我已经开发了一个扩展，它记录了鼠标点击并标记了该位置。

但是，当我点击链接打开弹出窗口时;标记的鼠标单击位于背景窗口而不是弹出窗口。

这是安全问题吗？

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    chrome.tabs.captureVisibleTab(null, {format:"png"}, function(dataUrl){

    var img = new Image();
    img.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");

        ctx.drawImage(img, 0, 0);
        ctx.arc(request.x, request.y, 5, 0, Math.PI*2, true);
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.fill();

        chrome.tabs.create({url: canvas.toDataURL("image/png")});
    };
    img.src = dataUrl;

});
sendResponse({});
});
<body>
    <canvas id="canvas"></canvas>
</body>

content_script.js：

window.addEventListener("click", function(event) {
    chrome.extension.sendRequest({x: event.x, y: event.y});
});

Answer 1

这是因为当前窗口和焦点窗口是Chrome API中的两个不同的东西。将null传递给chrome.tabs.captureVisibleTab()需要当前窗口，弹出窗口表示背景窗口。正如它在docs中所说的那样：

当前窗口是包含当前正在执行的代码的窗口。重要的是要意识到这可能与最顶层或聚焦窗口不同。

要制作发送请求的窗口的屏幕截图，我们需要明确指定它：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    chrome.tabs.captureVisibleTab(sender.tab.windowId, {format:"png"}, function(dataUrl){
        ...
    });
});

Answer 2

如果弹出窗口未激活（显示），则您无法在后台页面中执行任何操作。假设你正在遵循这个事实。

确保您的鼠标点击位于该弹出窗口DOM中。所以在你的弹出窗口中，做听众。

获取弹出窗口的鼠标坐标而不是背景窗口

2 个答案: