使用Polyfill將Firefox擴展移植到Chrome時出現未捕獲（承諾）錯誤

Question

我為Firefox Quantum編寫了一個Web擴展。 該擴展程序有一個彈出窗口，單擊該彈出窗口可提供3按鈕菜單。 單擊其中一個按鈕時，擴展程序會將包含iFrame的DIV注入用戶的當前頁面。

Firefox擴展使用promise API並使用browser名稱空間，而不是“回調”和chrome名稱空間。 這樣，Mozilla提供了一個polyfill來輕松移植為Firefox擴展編寫的代碼。

本文摘錄。

如果您確實編寫了擴展程序以使用browser和Promise，則Firefox還提供了一個polyfill，使其能夠在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 });
                });
        }
    });
}

但是，當我運行此代碼時，出現以下錯誤（本文中的HTML文件為“ choose_length_page.html”）：

為什么會發生此錯誤，我該如何解決？

更新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 。

因此，我認為這行不通。

Answer 1

我設法解決了這些錯誤：

我將javascript文件更改為（我向promises添加了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);
}

我還將script標記的src屬性中的路徑更改為：

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

錯誤似乎是我沒有兌現承諾。

使用Polyfill將Firefox擴展移植到Chrome時出現未捕獲（承諾）錯誤

問題描述

1 個解決方案

解決方案1
0 已采納 2018-04-27 00:08:13

使用Polyfill將Firefox擴展移植到Chrome時出現未捕獲（承諾）錯誤

問題描述

1 個解決方案

解決方案1 0 已采納 2018-04-27 00:08:13

解決方案1
0 已采納 2018-04-27 00:08:13