检查窗口是否已经从非父窗口打开（chrome 扩展）答案

【问题标题】：Check if window is already open from a non-parent window (chrome extension)检查窗口是否已经从非父窗口打开（chrome 扩展）
【发布时间】：2016-03-14 23:38:22
【问题描述】：

我正在制作 Chrome 扩展程序。单击popup.html 中的按钮会打开一个新窗口并加载feedback-panel.html。

这可行，但是，在点击时，我想检查窗口是否已经打开，如果是，则关注它而不是创建一个新窗口。

JavaScript window.open only if the window does not already exist 看起来很有希望，但它依赖于在打开窗口时将打开的窗口作为变量存储在父页面上，并在打开新窗口之前检查这些窗口。这对我不起作用，因为父窗口 (popup.html) 经常会自行关闭并重新打开，我会丢失变量。

我尝试实现相同的想法，但使用chrome.storage 存储窗口变量，因为它允许您存储对象。好吧，它确实允许您存储对象，但它首先将它们序列化，因此 window 变量失去了它的所有功能，我最终得到了

result.feedbackPanel.focus() 不是函数

这是我的尝试：

function openFeedbackPanel(){
    chrome.storage.local.get('feedbackPanel', function (result) {
        console.log( result.feedbackPanel); // logs window object sans all functions
        if(result.feedbackPanel && ! result.feedbackPanel.closed){
            try{
                result.feedbackPanel.focus();
            }
            catch(error){
                chrome.storage.local.remove('feedbackPanel', function () {
                });
                createFeedbackPanel();
            }
        }
        else{
            createFeedbackPanel();
        }
    });
}
function createFeedbackPanel(){
    var win =  window.open('feedback-panel.html', 'Feedback', 'width=935, height=675');
    console.log(win); // logs full object as expected 
    chrome.storage.local.set({"feedbackPanel": win});
}



$('#some-button').click(openFeedbackPanel());

所以，因为这不起作用：

如何检查弹出窗口是否已从非父窗口（未打开弹出窗口的窗口）打开？

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension window

【解决方案1】：

无需跟踪和存储窗口。
如果您知道您的扩展 ID，最简单的方法是测试所有选项卡 url 并查看它是否已经打开

chrome.tabs.query({}, function(tabs) {
  var doFlag = true;
  for (var i=tabs.length-1; i>=0; i--) {
    if (tabs[i].url === "chrome-extension://EXTENSION_ID/feedback-panel.html") {
      //your popup is alive
      doFlag = false;
      chrome.tabs.update(tabs[i].id, {active: true}); //focus it
      break;
    }
  }
  if (doFlag) { //it didn't found anything, so create it
    window.open('feedback-panel.html', 'Feedback', 'width=935, height=675');
  }
});

这里已经回答了如何获取extension ID，

【讨论】：

这看起来很有希望，但遗憾的是它不起作用。当页面未打开时，它会打开它，但当它打开时没有任何反应。我设置了一个断点，代码被称为chrome.tabs.update(tabs[i].id, {active: true});，我有正确的标签ID，但窗口没有获得焦点。我认为这是因为弹出窗口本身仍然打开
@DelightedD0D 我在 Opera 浏览器中的 win10 上对其进行了测试，并且弹出窗口得到了关注（从后台）。也许是不同的平台行为？
嗯，没有意识到你可以在opera中安装chrome扩展，你可以在实际的chrome中测试吗？我很想确认它是否有效，这样我就可以专注于我的无效原因
太奇怪了，你能把你做的测试扩展上传到我可以下载的地方吗？我想将它与我在工作流程方面的情况进行比较，以尝试找出导致我失败的原因。并感谢您的时间:)
感谢 Wolf，如果我将我的项目简化为像您的示例那样的框架，它确实可以工作。我的代码中一定有什么东西阻止了它，现在为了有趣的追踪它.....

【解决方案2】：

您还可以使用消息传递系统。这是我用于扩展选项的示例。在按钮的 onClick 中调用这样的函数：

    // send message to the option tab to focus it.
    // if not found, create it
    showOptionsTab: function() {
        chrome.runtime.sendMessage({window: 'highlight'}, null, function(response) {
            if (!response) {
                // no one listening
                chrome.tabs.create({url: '../html/options.html'});
            }
        });
    },

然后在您的窗口/标签中收听这样的消息

// listen for request to make ourselves highlighted
chrome.runtime.onMessage.addListener(t.onMessage);

...

// message: highlight ourselves and tell the sender we are here
t.onMessage = function(request, sender, response) {
    if (request.window === 'highlight') {
        chrome.tabs.getCurrent(function(t) {
            chrome.tabs.update(t.id, {'highlighted': true});
        });
        response(JSON.stringify({message: 'OK'}));
    }
};

这种方法的一个优点是它不需要标签权限。

【讨论】：