Question

我正在构建一个chrome扩展，因为我正在尝试关注从chrome扩展的后台脚本生成的弹出窗口。页面上有链接，在悬停它们时我需要打开一个带有这些链接的弹出窗口，如果用户将鼠标悬停在弹出窗口中已经打开的链接上，那么我只需要再次打开弹出窗口，我只需要专注于相同的弹出窗口，但重点是没有处理鼠标悬停，但工作点击。这是一个铬虫吗？

到目前为止我的代码是：

content.js

$(document).on("mouseover", "a", function (event) {
    var viewportwidth = document.documentElement.clientWidth;
    var viewportheight = document.documentElement.clientHeight;
    var data = { url: $(this).attr("href"), clientY: viewportwidth, clientX: viewportheight }
    if (data.url.indexOf("://") !== -1) sendMessage(data);
})

function sendMessage(data) {
    chrome.runtime.sendMessage(data);
}

background.js

var win;
var oldUrl ;
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if(oldUrl !== request.url || win.closed){
            oldUrl = request.url ;
            win &&  win.close();
            win = window.open(request.url, "mywindow", "menubar=0,tittlebar=0,resizable=1,width=1000,height=650" + ",top=" + request.clientY + ",left=" + request.clientX + 100);
            win.onclose = function(){
                oldUrl = "";
            }    
        }
        else{
            alert('hi');
            win.focus();
        }
    });

我可以选择此链接Can you focus a popup window from a Chrome Extension

这个弹出窗口没有多少选项，这是我的扩展程序所必需的。

任何帮助将不胜感激

Answer 1

如何使用chrome.windows而不是使用普通窗口？您可以使用chrome.windows.create功能并指定focused: true选项。通过这样做，您可以直接从您的扩展程序打开一个新窗口，您可以轻松地聚焦/模糊。

Answer 2

您可以使用chrome.windows.update()关注窗口。但是，要执行此操作，您需要要影响的窗口的窗口ID。我没有很快看到从Window返回的window.open()获取窗口ID的好方法。所以，我只是选择在调用window.open()之后捕获下一个焦点窗口的ID。

以下代码使用chrome.windows.update()来关注窗口：

var win;
var oldUrl;
var focusedWinId = null;
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
    if(oldUrl !== request.url || win.closed){
        oldUrl = request.url ;
        win && win.close();
        focusedWinId = null; //Flag to remember the next focused window.
        win = window.open(request.url, "mywindow", "menubar=0,tittlebar=0,resizable=1,width=1000,height=650" + ",top=" + request.clientY + ",left=" + request.clientX + 100);
        win.onclose = function(){
            oldUrl = "";
        }
    } else{
        if(focusedWinId !== null){
            chrome.windows.update(focusedWinId,{focused:true});
        }
    }
});

chrome.windows.onFocusChanged.addListener(function(winId){
    if(focusedWinId === null & winId > -1){
        focusedWinId = winId;
    }
});

只需更改窗口的网址，而不是关闭并重新打开：

我觉得有点恼人的是，每当有不同网址的链接悬停时，窗口就会被破坏并创建。因此，如果窗口尚未打开，我将代码更改为仅打开窗口。如果窗口已打开，则只需更改URL。

您的win.onclose两者都没有运行，并且没有做任何影响代码的事情。在这些条件下，唯一检查的地方是oldUrl !== request.url || win.closed和win.closed。因此，我删除了它。如果您需要清除oldUrl，则需要使用chrome.windows.onRemoved监听器。

当request.url与当前显示的不同时，以下代码将更新弹出窗口的URL而不是销毁窗口并重新打开新窗口：

var win;
var oldUrl;
var focusedWinId = null;
var popupTabId = null;
chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) {
    //win && console.log('closed:',win.closed);
    if(oldUrl !== request.url || win.closed){
        oldUrl = request.url ;
        if(win && !win.closed){
            chrome.tabs.update(popupTabId,{url:request.url});
        } else {
            focusedWinId = null; //Flag to remember the next focused window.
            win = window.open(request.url, "mywindow", "menubar=0,tittlebar=0,resizable=1,width=1000,height=650" + ",top=" + request.clientY + ",left=" + request.clientX + 100);
        }
    } else{
        if(focusedWinId !== null){
            chrome.windows.update(focusedWinId,{focused:true});
        }
    }
});

chrome.windows.onFocusChanged.addListener(function(winId){
    if(focusedWinId === null & winId > -1){
        focusedWinId = winId;
        chrome.windows.get(winId,{populate:true},function(win){
            popupTabId = win.tabs[0].id;
        });
    }
});

PopUp窗口焦点无法处理鼠标悬停事件，但处理来自Chrome扩展程序的点击事件

2 个答案: