从当前选项卡上下文中打开一个新选项卡（何时关闭弹出窗口）？

Question

从新选项卡的上下文中打开新选项卡的问题。

按下按钮后，我在弹出窗口中打开新选项卡时遇到问题。 到目前为止，我的测试表明，一旦按下按钮，我就可以打开一个新选项卡，但是一旦我尝试从我对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，这将改变打开的新选项卡的目的地。 该计划最终是针对可以在具有相同内容的镜像网站之间切换的附加组件，即使当前站点已关闭（由于高流量）。

上下文的完整代码

清单.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>

弹出窗口/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;
}

弹出/菜单.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选项卡添加为临时附加组件。

Answer 1

因为你不工作window.close()弹出式窗口前执行browser.tabs.create()中.then()用于browser.tabs.query() 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);
        });
    }
});

从当前选项卡上下文中打开一个新选项卡（何时关闭弹出窗口）？

问题描述

从新选项卡的上下文中打开新选项卡的问题。

上下文的完整代码

笔记

1 个解决方案

解决方案1
1 已采纳 2017-10-24 20:15:24

从当前选项卡上下文中打开一个新选项卡（何时关闭弹出窗口）？

问题描述

从新选项卡的上下文中打开新选项卡的问题。

上下文的完整代码

笔记

1 个解决方案

解决方案1 1 已采纳 2017-10-24 20:15:24

解决方案1
1 已采纳 2017-10-24 20:15:24