我为Firefox Quantum编写了一个Web扩展。该扩展程序有一个弹出窗口,单击该窗口时会提供一个3按钮菜单。单击其中一个按钮时,扩展程序会将包含iFrame的DIV注入用户的当前页面。
Firefox扩展使用promise
API并使用browser
命名空间而不是“回调”和chrome
命名空间。因此,Mozilla提供了一个polyfill,可以轻松移植为Firefox Extensions编写的代码。
摘自this article。
如果您确实要编写扩展程序以使用
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文件):
为什么会发生此错误,我该如何解决?
更新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>
完成后,我收到以下消息:
[弃用]其网址包含嵌入凭据(例如
https://user:pass@host/
)的子资源请求被阻止。有关详细信息,请参阅https://www.chromestatus.com/feature/5669008342777856。
所以,我觉得这不行。
答案 0 :(得分:0)
我设法解决了错误:
我将我的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);
}
我还将src
标记的script
属性中的路径更改为:
<script type="application/javascript" src="/polyfills/browser-polyfill.js"></script>
错误似乎是我没有抓住承诺。