Javascript 在Firefox Webextension Contentscript中使用fontawesome

我想用令人敬畏的图标来设计我的Webextension。对于弹出菜单和扩展设置，这可以正常工作，但我的contentscripts无法访问它

为了创建一个简单的示例，我设置了一个存储库：

git clone https://github.com/lhk/fa_test.git
cd fa_test
npm install -d

它将javascript作为contentscript注入。 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')
})

$（函数（）{
$（''）.appendTo（'正文'）
})

在Chrome中，它工作得非常完美，这就是它的外观：

在Firefox上，图标根本不存在（请注意，脚本只注入Wikipedia，在那里进行测试）

起初我认为这与CSP有关，也许fontawesome正在向一个由Firefox过滤的CDN发出一些请求。但是我在开发者设置的网络窗格中找不到任何这样的请求。

---

任何web控制台中都没有错误消息。

Fontsome正在观察DOM突变，以便用

svg

元素替换

的标记。在我看来，替换应该发生在

requestAnimationFrame

回调中，由于某种原因，

requestAnimationFrame

的回调没有被调用。
经过研究和调试，我得出了一个非常奇怪的结论，但我确信我找到了原因，甚至找到了一个不错的解决办法

我怀疑以下错误：
在Webextension内容脚本中，当全局

requestAnimationFrame

函数分配给变量而未绑定到

窗口时，它将不工作

Font Awesome正是这样做的，它可以防止被调用，这对于我上面提到的替换过程来说是非常关键的

因此，解决方法是将以下文件添加到内容脚本列表中，它应该可以工作：

/*raf-ff-fix.js*/
window.requestAnimationFrame=window.requestAnimationFrame.bind（窗口）

/*manifest.json*/
// ...
“js”：[
“/raf ff fix.js”，
// ....
]