个人中心
gpt4 book ai didi

javascript - 从当前选项卡上下文打开一个新选项卡(何时关闭弹出窗口)？

转载 作者：行者123 更新时间：2023-11-30 21:03:08 24 4
gpt4 key购买 nike

在新标签页的上下文中打开新标签页时出现问题。

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

这是代码相关部分的亮点(来自下面的 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，这将改变打开的新选项卡的目标。该计划最终是一个附加组件，可以在具有相同内容的镜像网站之间切换，即使当前网站已关闭(由于高流量)。

上下文的完整代码

list .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 选项卡添加为临时插件。

最佳答案

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

关于javascript - 从当前选项卡上下文打开一个新选项卡(何时关闭弹出窗口)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46918792/

24 4 0
文章推荐： c - 数组转换为长指针？
文章推荐： c# - SQL的前缀搜索中如何放入参数值
文章推荐： c - 如何使用 C 获取字符串并按字母顺序排列单词
文章推荐： c# - 如何初始化 AttributeCollection 的实例？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com