Открытие новой вкладки из контекста текущей вкладки (когда закрывать всплывающее окно)?

1

Ошибка открытия новой вкладки в контексте новой вкладки.

У меня есть проблема с открытием новой вкладки из моего всплывающего окна после нажатия кнопки. До сих пор мое тестирование показало, что я могу открыть новую вкладку после нажатия кнопки, но как только я попытаюсь сделать это из .then() моего вызова в browser.tabs.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-адрес активной активной вкладки, и это изменит назначение новой открытой вкладки. В конечном итоге этот план предусматривает добавление, которое может переключаться между зеркальными веб-сайтами, имеющими один и тот же контент, даже если текущий сайт не работает (из-за высокого трафика).

Полный код для контекста

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

всплывающее окно /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>

всплывающее окно /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;
}

Всплывающие /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();
});

Заметка

Чтобы загрузить полный код тестового примера, включая значки, загрузите ZIP из этого репозитория GitHub и добавьте его как временное дополнение через вкладку about:debugging.

  • 0
    @Makyen Извините. Может быть трудно найти правильный баланс слишком большого / слишком малого кода. Отредактировали его, добавив отсутствующий html (вероятно, ошибка копирования вставки) и объяснив, что верхняя часть кода является выдержкой из полного контекста. Это понятнее?
  • 0
    Да, это понятнее. Я тоже немного отредактировал. Не стесняйтесь отменить мои изменения, если у вас есть проблемы с ними. Спасибо за дополнительную информацию.
Показать ещё 6 комментариев
Теги:
tabs
firefox-webextensions
firefox-addon

1 ответ

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);
        });
    }
});
Поделиться
  • 0
    Спасибо, я проверю это решение завтра. Слишком поздно для меня сегодня вечером ...
  • 0
    Отлично. Это исправило это. Я не осознавал, что browser.tabs.query был асинхронным. Хорошо знать.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню