Использование fontawesome в Firefox Webextension Contentscript
Я хотел бы оформить свое веб-расширение с помощью значков Fontawesome. Для всплывающего меню и настроек расширения это работает без проблем, но мои сценарии содержимого не могут получить к нему доступ.
Чтобы создать минимальный пример, я настроил репозиторий:
git clone https://github.com/lhk/fa_test.git
cd fa_test
npm install -d
Он внедряет потрясающий javascript в качестве сценария контента. манифест.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"
]
}
],
А затем добавляет значок в конец веб-сайта (только википедия): контент.js:
$(function(){
$('<div> <i class = "fas fa-question-circle fa-2x"></i> </div>').appendTo('body')
})
В Chrome это работает отлично, вот как это выглядит:
В Firefox значка просто нет (обратите внимание, скрипты внедряются только в Википедию, тестируйте там).
Сначала я подумал, что это связано с CSP, возможно, fontawesome делает некоторые запросы к CDN, которые фильтруются Firefox. Но я не могу найти такие запросы в панели сети настроек разработчика. Ни в одной из веб-консолей также нет сообщений об ошибках.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
FontAwesome наблюдает за мутациями DOM, чтобы заменить разметку <i.../> элементом svg. Из того, что я вижу, замена должна происходить внутри обратного вызова requestAnimationFrame, и по какой-то причине обратный вызов requestAnimationFrame не вызывается.
После исследования и отладки я пришел к очень странному выводу, но я уверен, что нашел причину и даже достойный обходной путь.
Подозреваю следующий баг:
В сценарии содержимого Webextension, когда глобальная функция requestAnimationFrame назначается переменной без привязки к window, она не работает.
Font Awesome делает именно это правильно, здесь, и предотвращает вызов этот обратный вызов, что имеет решающее значение для процесса замены, о котором я упоминал выше.
Таким образом, обходным путем является добавление следующего файла в список сценариев содержимого, и он должен работать:
/* raf-ff-fix.js */
window.requestAnimationFrame = window.requestAnimationFrame.bind(window)
/* manifest.json */
// ...
"js": [
"./raf-ff-fix.js",
// ....
]