在Firefox Webextension Contentscript中使用fontawesome

Question

我想用Fontawesome图标设置Webextension的样式。对于“弹出菜单”和扩展名设置，此方法可以正常工作，但是我的内容脚本无法访问它。

要创建一个最小的示例，我建立了一个存储库：

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

它注入字体丰富的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')
})

在Chrome中，它可以完美运行，外观如下：

在Firefox上，图标根本不存在（请注意，脚本仅注入到Wikipedia中，在此处进行测试）。

起初，我认为这与CSP有关，也许fontawesome正在向由Firefox过滤的CDN发出一些请求。但是我在开发人员设置的网络窗格中找不到任何此类请求。 在任何Web控制台中也没有错误消息。

Answer 1

FontAwesome正在观察DOM突变，以将<i.../>的标记替换为svg元素。从我的角度来看，替换应该在requestAnimationFrame回调中进行，由于某种原因，requestAnimationFrame的回调没有被调用。
经过研究和调试后，我得出了一个非常奇怪的结论，但是我确信我找到了原因，甚至是一个不错的解决方法。

我怀疑存在以下错误：
在Webextension内容脚本中，当将全局requestAnimationFrame函数分配给变量而没有绑定到window时，它将无法正常工作。

Font Awesome正是在正确执行here，并防止调用this callback，这对于我上面提到的替换过程至关重要。

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

/* raf-ff-fix.js */
window.requestAnimationFrame = window.requestAnimationFrame.bind(window)

/* manifest.json */

// ...
"js": [
      "./raf-ff-fix.js",
      // ....
]