Javascript 检查窗口是否已从非父窗口(chrome扩展)打开
我正在做一个Chrome扩展。单击Javascript 检查窗口是否已从非父窗口(chrome扩展)打开,javascript,jquery,google-chrome,google-chrome-extension,window,Javascript,Jquery,Google Chrome,Google Chrome Extension,Window,我正在做一个Chrome扩展。单击popup.html中的按钮将打开一个新窗口并加载反馈面板.html 这是可行的,但单击后,我想检查窗口是否已经打开,如果已经打开,则将焦点放在它上,而不是创建一个新窗口 看起来很有希望,但它依赖于打开的窗口在打开窗口时作为变量存储在父页面上,并在打开新窗口之前检查这些变量。这对我不起作用,因为父窗口(popup.html)经常会自动关闭并重新打开,我会丢失变量 我试图实现同样的想法,但是使用chrome.storage存储窗口变量,因为它允许您存储对象。它确实
popup.html
中的按钮将打开一个新窗口并加载反馈面板.html
这是可行的,但单击后,我想检查窗口是否已经打开,如果已经打开,则将焦点放在它上,而不是创建一个新窗口
看起来很有希望,但它依赖于打开的窗口在打开窗口时作为变量存储在父页面上,并在打开新窗口之前检查这些变量。这对我不起作用,因为父窗口(popup.html
)经常会自动关闭并重新打开,我会丢失变量
我试图实现同样的想法,但是使用chrome.storage
存储窗口变量,因为它允许您存储对象。它确实允许您存储对象,但它首先序列化对象,因此窗口变量会丢失它的所有函数,最终导致
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());
所以,既然这不起作用:
如何检查弹出窗口是否已从非父窗口(未打开弹出窗口的窗口)打开?无需跟踪和存储窗口。
如果您知道自己的扩展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');
}
});
这里已经回答了如何获取,无需跟踪和存储窗口。
如果您知道自己的扩展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');
}
});
这里已经回答了如何获取,您也可以使用消息传递系统。这是我用于扩展选项的示例。在按钮的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'}));
}
};
此方法的一个优点是不需要tabs权限。您也可以使用消息传递系统。这是我用于扩展选项的示例。在按钮的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'}));
}
};
这种方法的一个优点是它不需要tabs权限。这看起来很有希望,但遗憾的是它不起作用。当页面未打开时,它会打开它,但当它打开时,不会发生任何事情。我设置了一个断点,代码被调用为
chrome.tabs.update(tabs[I].id,{active:true})代码>和我有正确的选项卡id,但窗口没有获得焦点。我想这是因为弹出窗口本身仍然是open@DelightedD0D我在Opera浏览器的win10上测试了它,弹出窗口(从后台)得到了关注。也许是不同的平台行为?嗯,我没意识到你可以在opera中安装chrome扩展,你能在实际的chrome中测试吗?我很想确认它是否有效,这样我就可以专注于我的原因了。这太奇怪了,你能把你做的测试扩展上传到我可以下载的地方吗?我想将它与我的工作流程进行比较,试图找出导致我失败的原因。谢谢你的时间:)谢谢Wolf,如果我把我的项目简化成像你的例子那样的框架,它实际上是有效的。我的代码中一定有什么东西阻止了它,现在为了找到它的乐趣……这看起来很有希望,但遗憾的是它不起作用。当页面未打开时,它会打开它,但当它打开时,不会发生任何事情。我设置了一个断点,代码被调用为chrome.tabs.update(tabs[I].id,{active:true})代码>和我有正确的选项卡id,但窗口没有获得焦点。我想这是因为弹出窗口本身仍然是open@DelightedD0D我在Opera浏览器的win10上测试了它,弹出窗口(从后台)得到了关注。也许是不同的平台行为?嗯,我没意识到你可以在opera中安装chrome扩展,你能在实际的chrome中测试吗?我很想确认它是否有效,这样我就可以专注于我的原因了。这太奇怪了,你能把你做的测试扩展上传到我可以下载的地方吗?我想将它与我的工作流程进行比较,试图找出导致我失败的原因。谢谢你的时间:)谢谢Wolf,如果我把我的项目简化成像你的例子那样的框架,它实际上是有效的。我的代码中一定有什么东西阻止了它,现在为了找到它的乐趣。。。。。