从新选项卡的上下文中打开新选项卡的问题
按下按钮后，我在弹出窗口中打开一个新标签时遇到问题。到目前为止，我的测试表明，一旦按下按钮，我就可以打开一个新的选项卡，但一旦我尝试从调用browser.tabs.query()的.then()中打开，相同的代码就不再有效了。
这是相关代码部分的一个亮点(来自下面的弹出菜单/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);
最终，我计划获得当前活动选项卡的URL，这将改变打开的新选项卡的目的地。最终的计划是开发一个附加组件，即使当前网站关闭(由于流量高)，也可以在具有相同内容的镜像网站之间切换。
上下文的完整代码
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"
}
}
弹出/菜单.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>
弹出/菜单.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;
}
弹出/菜单.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();
});
备注
要下载测试用例的完整代码，包括图标，请从GitHub存储库下载ZIP，并通过about:debugging选项卡作为临时插件添加。
它不起作用，因为在为browser.tabs.query()执行.then()中的browser.tabs.create()之前，您先window.close()您的弹出窗口。browser.tabs.query()是异步的。.then()不会立即执行。当您关闭弹出窗口时，上下文将被破坏，执行将停止。因此，.then()不存在以被调用。
如果您想在创建选项卡后关闭弹出窗口，则window.close()需要在打开选项卡后执行。
这将类似于：
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);
});
}
});