Opening a new tab from current tab context (when to close the popup)?
Question
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.
This is a highlight of the relevant section of code (from popup/menu.js below):
// 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. 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 :
{
"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 :
<!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 :
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 :
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.
1 answers
solution1
1 ACCPTED 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() . browser.tabs.query() is asynchronous. The .then() is not executed immediately. When you close the popup, the context is destroyed, and execution stops. Thus, the .then() doesn't exist to be called.
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.
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);
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.