CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extensionfont-awesomefirefox-addon-webextensions
lhk
lhk

Reputation: 30086

using fontawesome in Firefox Webextension Contentscript

I would like to style my Webextension with Fontawesome icons. For the Popup menu and the extension settings, this works without a problem, but my contentscripts can't access it.

To create a minimal example, I set up a repository:

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

It injects the fontawesome javascript as a 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"
        ]
      }
    ],

And then adds an icon to the end of a website (only wikipedia though): content.js:

$(function(){
    $('<div> <i class="fas fa-question-circle fa-2x"></i> </div>').appendTo('body')
})

In Chrome this works perfectly, this is how it looks: enter image description here

On Firefox the icon is simply not there (please note, the scripts are only injected into Wikipedia, do your testing there).

At first I thought this was related to CSP, maybe fontawesome is making some requests to a CDN which is filtered by Firefox. But I can't find any such requests in the network pane of the developer settings. There are also no error messages in any of the web consoles.

Upvotes: 1

Views: 408

Answers (1)

Ramy Ben Aroya
Ramy Ben Aroya

Reputation: 2423

FontAwesome is observing DOM mutations in order to replace the markup of <i.../> with svg element. From what I see, the replacement should occur within a requestAnimationFrame callback and for some reason the callback of requestAnimationFrame is not being called.
After researching and debugging I came to a very weird conclusion but I'm sure that I found the reason and even a decent workaround.

I suspect the following bug:
Within a Webextension content script, when the global requestAnimationFrame function is assigned to a variable without being bounded to the window it is not working.

Font Awesome is doing exactly this right here, and it prevents this callback from being called which is cruical for the replacement process I mentioned above.

So the workaround is adding the following file to your content scripts list and it should work:

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

/* manifest.json */

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

Upvotes: 2

Related Questions