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

发布于 2024-11-24 09:47:54 字数 1073 浏览 1 评论 0原文

我这里有点问题。根据我之前提出的问题，我开发了一个扩展程序，可以记录鼠标单击并标记该位置。

但是，当我单击链接打开弹出窗口时；标记的鼠标单击是在背景窗口上而不是在弹出窗口上。

这是安全问题还是其他问题？

背景.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});
});

原文

I have a bit of a problem here. Based on my previous question asked I have developed an extension that takes note of the mouse-clicks and marks the place.

However, when I click on a link to open a pop-up; the mouse-clicks that are marked are on the background window and not on the pop-up.

Is this a security issue or something ?

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});
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

原谅我要高飞 2024-12-01 09:47:54

发生这种情况是因为当前窗口和聚焦窗口是Chrome API中的两个不同的东西。将 null 传递给 chrome.tabs.captureVisibleTab() 会获取当前窗口，这对于弹出窗口意味着背景窗口。正如文档中所述：

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

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

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

This happens because current window and focused window are two different things in Chrome API. Passing null to chrome.tabs.captureVisibleTab() takes current window, which for popups means a background window. As it says in the docs:

The current window is the window that contains the code that is currently executing. It's important to realize that this can be different from the topmost or focused window.

To make screenshot of a window that sent the request we need to specify it explicitly:

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

回复收藏 0 原文