在 Firefox Webextension Contentscript 中使用 fontawesome

Question

我想用 Fontawesome 图标来设计我的 Webextension。对于弹出菜单和扩展设置，这没有问题，但我的内容脚本无法访问它。

为了创建一个最小示例，我设置了一个存储库：

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

它将 fontawesome 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 上，图标根本不存在（请注意，脚本仅注入维基百科，在那里进行测试）。

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

Answer 1

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

我怀疑有以下错误：
在 Webextension 内容脚本中，当全局 requestAnimationFrame 函数被分配给一个变量而不受 window 的限制时，它不起作用。

Font Awesome 正是这样做的 here, and it prevents this callback 从被调用这对我上面提到的替换过程至关重要。

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

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

/* manifest.json */

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

在 Firefox Webextension Contentscript 中使用 fontawesome

using fontawesome in Firefox Webextension Contentscript

javascript

html

google-chrome-extension

font-awesome

firefox-addon-webextensions