从当前选项卡上下文中打开一个新选项卡（何时关闭弹出窗口）？
[英]Opening a new tab from current tab context (when to close the popup)?
问题描述
Issue opening a new tab from within the context of a new tab.
从新选项卡的上下文中打开新选项卡的问题。
I have an issue opening a new tab from within my popup after a button press.按下按钮后，我在弹出窗口中打开新选项卡时遇到问题。 My testing so far has shown that I can open a new tab once the button is pressed, but once I try doing so from within the .then() of my call to browser.tabs.query() , the same code no longer works.到目前为止，我的测试表明，一旦按下按钮，我就可以打开一个新选项卡，但是一旦我尝试从我对browser.tabs.query()调用的.then()中这样做，相同的代码就不再起作用.
This is a highlight of the relevant section of code (from popup/menu.js below):这是相关代码部分的亮点（来自下面的popup/menu.js ）：
// Getting the currently active tab
var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
gettingActiveTab.then((tabs) => {
// Open desired tab. This fails for some reason?
var creating = browser.tabs.create({
url:"https://stackoverflow.com/users/641534/antonchanning"
});
creating.then(onCreated, onError);
});
//test to show we can actually open a tab successfully. This works...
var creating = browser.tabs.create({
url:"https://stackexchange.com/users/322227/antonchanning"
});
creating.then(onCreated, onError);
Ultimately I plan to get the URL of the currently active tab and this will alter the destination of the new tab that is opened.最终我计划获取当前活动选项卡的 URL，这将改变打开的新选项卡的目的地。 The plan eventually is for an add-on that can switch between mirror websites that have the same content, even if the current site is down (due to high traffic).该计划最终是针对可以在具有相同内容的镜像网站之间切换的附加组件，即使当前站点已关闭（由于高流量）。
Full code for context上下文的完整代码
manifest.json :清单.json ：
{
"manifest_version": 2,
"name": "New tab test",
"version": "1.0",
"description": "Demonstrating an issue getting a new tab to open from a certain context.",
"icons": {
"48": "icons/newtab_48.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icons/newtab_32.png",
"default_title": "New tab test",
"default_popup": "popup/menu.html"
}
}
popup/menu.html :弹出/菜单.html ：
<!doctype html>
<html lang="en">
<head>
<title>New tab example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div>
<h1>Example</h1>
<h2><strong>Open:</strong></h2>
<div>
<span href="https://stackexchange.com" title="steemdb" class="opennewtab"><img src="/icons/wrench-go.png" title="steemdb" class="flowLeft">New tab 1</span>
<span href="https://stackoverflow.com" title="steemd" class="opennewtab"><img src="/icons/wrench-go.png" title="steemd" class=flowLeft>New tab 2</span>
</div>
</div>
<script language="javascript" src="menu.js"></script>
</body>
</html>
popup/menu.css :弹出窗口/menu.css ：
html div{
background-color: #FAFAFA;
width: 160px;
margin: auto;
border-style: solid;
border-color:#EFF2FB;
border-width: 1px;
border-radius:5px;
padding: 0.5em;
align-content: center;
}
h1{
line-height: 2em;
font: 100% Verdana, Geneva, sans-seriff;
font-style: normal;
color:#58ACFA;
margin-bottom: 0.5em;
text-align: center;
text-transform: uppercase;
}
h2{
line-height: 1em;
font: 100% Verdana, Geneva, sans-seriff;
font-style: normal;
color:#A4A4A4;
margin-bottom: 0.5em;
text-indent: 1em;
clear:right;
}
.opennewtab{
color: #045FB4;
font:0.9em Verdana, Geneva, sans-seriff;
display:block;
text-indent: 2em;
text-decoration:none;
margin-bottom: 0.5em;
background-color: #EFF2FB;
border:1px solid #A9BCF5;
padding: 0.5em;
border-radius: 3px;
}
.opennewtab:hover{
color: #136;
background: #def;
}
ul{
list-style-type:none;
}
img{
margin-right: 5px;
}
img.logo{
float: right;
margin-left:0.2em;
}
hr{
border-style:solid;
border-color:#F0F0F0;
}
popup/menu.js :弹出/菜单.js ：
function onCreated(tab) {
console.log(`Created new tab: ${tab.id}`)
}
function onError(error) {
console.log(`Error: ${error}`);
}
document.addEventListener("click", (e) => {
if (e.target.classList.contains("opennewtab")) {
var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
gettingActiveTab.then((tabs) => {
// Open desired tab. This fails for some reason?
var creating = browser.tabs.create({
url:"https://stackoverflow.com/users/641534/antonchanning"
});
creating.then(onCreated, onError);
});
//test to show we can actually open a tab successfully
var creating = browser.tabs.create({
url:"https://stackexchange.com/users/322227/antonchanning"
});
creating.then(onCreated, onError);
}
window.close();
});
Note笔记
To download the full code of the test case, including icons, download the ZIP from this GitHub repository and add as a temporary add-on via the about:debugging tab.要下载测试用例的完整代码（包括图标），请从此GitHub 存储库下载 ZIP 并通过about:debugging选项卡添加为临时附加组件。
1 个解决方案
解决方案1
1 已采纳 2017-10-24 20:15:24
It doesn't work because you window.close() your popup prior to executing the browser.tabs.create() in the .then() for browser.tabs.query() .因为你不工作window.close()弹出式窗口前执行browser.tabs.create()中.then()用于browser.tabs.query() browser.tabs.query() is asynchronous. browser.tabs.query()是异步的。 The .then() is not executed immediately. .then()不会立即执行。 When you close the popup, the context is destroyed, and execution stops.当您关闭弹出窗口时，上下文将被销毁，并且执行停止。 Thus, the .then() doesn't exist to be called.因此， .then()不存在被调用。
If you are wanting to close the popup after you create the tab, then the window.close() needs to execute after you open the tab.如果您想在创建选项卡后关闭弹出窗口，则需要在打开选项卡后执行window.close() 。
That would be something like:那将是这样的：
function onCreated(tab) {
console.log(`Created new tab: ${tab.id}`)
window.close();
}
function onError(error) {
console.log(`Error: ${error}`);
window.close();
}
document.addEventListener("click", (e) => {
if (e.target.classList.contains("opennewtab")) {
browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
browser.tabs.create({
url:"https://stackoverflow.com/users/641534/antonchanning"
}).then(onCreated, onError);
});
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.