我想用Fontawesome图标设计我的Webextension。对于弹出菜单和扩展设置,这没有问题,但我的内容脚本无法访问它。
要创建一个最小的示例,我设置了一个存储库:
git clone https://github.com/lhk/fa_test.git
cd fa_test
npm install -d
它将字体awesome javascript作为内容脚本注入。 manifest.json的:
"content_scripts": [
{
"matches": [
"https://*.wikipedia.org/*"
],
"js": [
"node_modules/jquery/dist/jquery.min.js",
"./node_modules/@fortawesome/fontawesome-free/js/all.js",
"./content.js"
]
}
],
然后在网站末尾添加一个图标(虽然只有维基百科):content.js:
$(function(){
$('<div> <i class="fas fa-question-circle fa-2x"></i> </div>').appendTo('body')
})
在Firefox上,图标根本就不存在(请注意,脚本只注入维基百科,在那里进行测试)。
起初我认为这与CSP有关,也许有些人正在向一个被Firefox过滤的CDN提出一些请求。但是我在开发人员设置的网络窗格中找不到任何此类请求。任何Web控制台中也没有错误消息。
FontAwesome正在观察DOM突变,以便用<i.../>
元素替换svg
的标记。根据我的看法,替换应该在requestAnimationFrame
回调中发生,并且由于某种原因,没有调用requestAnimationFrame
的回调。
经过研究和调试后,我得出了一个非常奇怪的结论,但我确信我找到了原因甚至是一个不错的解决方法。
我怀疑以下错误:
在Webextension内容脚本中,当全局requestAnimationFrame
函数被赋值给变量而不受window
限制时,它不起作用。
字体真棒正在做正确的here,并且它阻止this callback被调用,这对于我上面提到的替换过程是至关重要的。
因此,解决方法是将以下文件添加到您的内容脚本列表中,它应该工作:
/* raf-ff-fix.js */
window.requestAnimationFrame = window.requestAnimationFrame.bind(window)
/* manifest.json */
// ...
"js": [
"./raf-ff-fix.js",
// ....
]