Uncaught (в Promise) Ошибка при использовании Polyfill для переноса расширений Firefox на Chrome - PullRequest
Новая
       40

Uncaught (в Promise) Ошибка при использовании Polyfill для переноса расширений Firefox на Chrome

0 голосов
/ 27 апреля 2018

Я написал веб-расширение для Firefox Quantum. Расширение имеет всплывающее окно, которое при нажатии предоставляет меню из 3 кнопок. При нажатии на одну из кнопок расширение вставит DIV, содержащий iFrame, в текущую страницу пользователя.

Расширения Firefox используют API promise и используют пространство имен browser вместо "обратных вызовов" и пространства имен chrome. Таким образом, Mozilla предоставляет полифилл, позволяющий легко переносить код, написанный для расширений Firefox.

Выдержка из этой статьи .

Если вы напишите свое расширение для использования browser и обещаний, тогда Firefox также предоставит полифилл, который позволит ему работать в Chrome: https://github.com/mozilla/webextension-polyfill.

Я следовал руководству по github, чтобы изменить html-файл для моего всплывающего окна (я удалил классы CSS, чтобы сделать пример более кратким): 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Nunito:800" rel="stylesheet">
    <script type="application/javascript" src="../polyfills/browser-polyfill.js"></script>
</head>

<body>
    <div style="display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100vw; min-width: 200px;">
        <button class="btn" id="3">Short Summary</button>
        <button class="btn" id="5">Medium Summary</button>
        <button class="btn" id="7">Long Summary</button>
        <script src="choose_length_page.js"></script>
    </div>
</body>

</html>

Тогда в моем файле "choose_length_page.js" у меня есть следующий код: 

//Enable the polyfill for the content script and execute it in the current tab

browser.tabs.executeScript({ file: "../polyfills/browser-polyfill.js" }).then(loadContentScript);

function loadContentScript() {
    browser.tabs.executeScript({ file: "../inject-content/inject.js" }).then(listenForClicks);
}

function listenForClicks() {
    document.addEventListener('click', e => {

        if (!e.target.classList.contains('btn')) {
            return;
        } else {
            browser.tabs.query({ active: true, currentWindow: true })
                .then(tabs => {
                    browser.tabs.sendMessage(tabs[0].id, { summaryLength: e.target.id, targetURL: tabs[0].url });
                });
        }
    });
}

Однако, когда я запускаю этот код, я получаю следующую ошибку ("choose_length_page.html" - это HTML-файл в этом посте):

Error

Почему происходит эта ошибка, и как я могу ее исправить?

Обновление 1 -

По предложению wOxxOm я попытался указать пути, указанные в корневом пакете. Я сделал это так: 

<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Nunito:800" rel="stylesheet">
<script type="application/javascript" src="chrome-extension://__MSG_@@extension_id__/polyfills/browser-polyfill.js"></script>

После этого я получил следующее сообщение:

[Устаревание] Запросы субресурсов, URL-адреса которых содержат встроенные учетные данные (например, https://user:pass@host/), блокируются. Подробнее см. https://www.chromestatus.com/feature/5669008342777856.

Итак, я не думаю, что это работает.

1 Ответ

0 голосов
/ 27 апреля 2018

Мне удалось исправить ошибки:

Я изменил свой файл javascript на (я добавил в обещания операторы catch и изменил пути в соответствии с предложением JaromandaX): 

//Enable the polyfill for the content script and execute it in the current tab

browser.tabs.executeScript({ file: "/polyfills/browser-polyfill.js" }).then(loadContentScript).catch((error) => logError(error));

function loadContentScript() {
    browser.tabs.executeScript({ file: "/inject-content/inject.js" }).then(listenForClicks).catch((error) => logError(error));
}

function listenForClicks() {
    document.addEventListener('click', e => {
        if (!e.target.classList.contains('btn')) {
            return;
        } else {
            browser.tabs.query({ active: true, currentWindow: true })
                .then(tabs => {
                    browser.tabs.sendMessage(tabs[0].id, { summaryLength: e.target.id, targetURL: tabs[0].url });
                });
        }
    });
}

function logError(error) {
    console.log(error);
}

Я также изменил путь в атрибуте src тега script на: 

<script type="application/javascript" src="/polyfills/browser-polyfill.js"></script>

Ошибка, казалось, заключалась в том, что я не уловил обещания.

...