【问题标题】：Opening a new tab from current tab context (when to close the popup)?从当前选项卡上下文打开一个新选项卡（何时关闭弹出窗口）？
【发布时间】：2017-10-24 19:42:25
【问题描述】：

在新标签的上下文中打开新标签。

按下按钮后，我在弹出窗口中打开新标签时遇到问题。到目前为止，我的测试表明，一旦按下按钮，我就可以打开一个新选项卡，但是一旦我尝试从我调用 browser.tabs.query() 的 .then() 中这样做，相同的代码将不再有效。

这是相关代码部分的一个亮点（来自下面的 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);

最终我打算获取当前活动标签的 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"
    }
}

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();
});

注意

要下载测试用例的完整代码（包括图标），请从 this GitHub repository 下载 ZIP 并通过 about:debugging 选项卡添加为临时插件。

【问题讨论】：

@Makyen 对不起。很难在太多/太少的代码之间取得适当的平衡。已对其进行编辑以包含丢失的 html（可能是复制粘贴错误）并解释它的顶部代码是从完整上下文中提取的。是不是更清楚了？
是的，这样更清楚。我也编辑了一点。如果您有任何问题，请随时恢复我的编辑。感谢您提供更多信息。
顺便说一句：似乎至少有三个人在大约同一时间点遇到了类似的问题。这是一个小组项目吗？和学校有关的东西？这没什么不好。这是个好问题。我只是想知道由于代码的相似性和多人对相对低流量标签的兴趣。
可能吧，去年有稳定增长+，最近有暴涨。就我的想法而言，兴趣汇合，这可能是我的抽样偏差。部分原因可能是压缩了我看到您编辑的问题以包含 Firefox 附加标签的时间范围。这个问题实际上是前一段时间发布的，但我今天才看到它。另一个是对这个问题发表评论的另一个人，他们有同样的问题。
是的，page_action 按钮位于 URL 栏中。它可以在每个选项卡的基础上隐藏/显示。 browser_action 按钮显示在工具栏中。它不能实际上隐藏，但您可以使用显示为空白区域的图标。应该注意的是，人们看pageAction 按钮不像browserAction 按钮那样容易。因此，您可能必须告知人们按钮在哪里。不幸的是，没有自动方法可以让页面操作按钮显示在特定的 URL 上，IMO 是 API 中缺少的一个重要功能，该 API 应该只在某些页面上显示。

标签： javascript tabs firefox-addon firefox-addon-webextensions

【解决方案1】：

它不起作用，因为您在为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);
        });
    }
});

【讨论】：

谢谢，我明天去看看这个解决方案。今晚对我来说太晚了……
优秀。这解决了它。我没有意识到browser.tabs.query 是异步的。很高兴知道。
@AntonChanning 几乎所有对 WebExtension API 的调用都是异步的。一般来说，你应该假设如果有东西使用Promises（即使用.then()方法），那么它是异步的。虽然可以使用 Promises 来做同步的事情，并且有时会以这种方式使用它们，主要是为了适应将它们用于其他异步事情的语义，但它们的存在主要是为了提供一组不同的语义来做异步任务。