从当前选项卡上下文打开新选项卡(何时关闭弹出窗口)?

时间:2017-10-24 19:42:26

标签: javascript tabs firefox-addon firefox-webextensions

问题从新标签的上下文中打开新标签。

按下按钮后,在弹出窗口中打开新标签时出现问题。到目前为止,我的测试表明,按下按钮后我可以打开一个新选项卡,但是一旦我在exec "$JAVACMD" \ $MAVEN_OPTS \ $MAVEN_DEBUG_OPTS \ -classpath "${M2_HOME}"/boot/plexus-classworlds-*.jar \ "-Dclassworlds.conf=${M2_HOME}/bin/m2.conf" \ "-Dmaven.home=${M2_HOME}" "-Dmaven.multiModuleProjectDirectory=${MAVEN_PROJECTBASEDIR}" \ ${CLASSWORLDS_LAUNCHER} "$@" 调用.then()的{​​{1}}内尝试这样做,相同的代码就不再有效了。

这是相关代码部分的一个亮点(来自下面的 popup / menu.js ):

browser.tabs.query()

最终我计划获取当前活动标签的URL,这将改变打开的新标签的目的地。该计划最终用于可以在具有相同内容的镜像网站之间切换的插件,即使当前网站已关闭(由于高流量)。

上下文的完整代码

的manifest.json

    // 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);

弹出/ menu.html

{
    "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"
    }
}

弹出/ menu.css

<!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.js

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

注意

要下载测试用例的完整代码(包括图标),请从this GitHub repository下载ZIP,然后通过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(); }); 标签添加为临时插件。

1 个答案:

答案 0 :(得分:1)

window.close() browser.tabs.create()执行.then()之前,您browser.tabs.query()弹出窗口是不可行的。 browser.tabs.query()是异步的。 .then()不会立即执行。关闭弹出窗口时,上下文将被销毁,执行将停止。因此,.then()不存在被调用。

如果您想在创建选项卡后关闭弹出窗口,则{/ 1}}需要在打开选项卡后执行

这就像是:

window.close()