使用 Polyfill 将 Firefox 扩展移植到 Chrome 时出现未捕获（Promise）错误

问题描述 投票：0回答：1

我为 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 });
                });
        }
    });
}

但是，当我运行此代码时，出现以下错误（“choose_length_page.html”是本文中的 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 了解更多详细信息。

所以，我认为这不起作用。

javascript google-chrome-extension promise firefox-addon-webextensions polyfills
1个回答
1
投票

我设法修复了错误：

我将 javascript 文件更改为（我向 Promise 添加了 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>

错误似乎是我没有兑现承诺。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.