использование fontawesome в Firefox Webextension Contentscript - PullRequest
Новая
       22

использование fontawesome в Firefox Webextension Contentscript

0 голосов
/ 17 февраля 2019

Я бы хотел стилизовать свой Webextension с иконками Fontawesome.Для всплывающего меню и настроек расширения это работает без проблем, но мои сценарии содержания не могут получить к нему доступ.

Чтобы создать минимальный пример, я настроил репозиторий: 

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 это работает отлично, вот как это выглядит: enter image description here

В Firefox значок просто отсутствует (обратите внимание, что скрипты вводятся только вВикипедия, проведите там тестирование.)

Сначала я подумал, что это связано с CSP, возможно, fontawesome делает некоторые запросы к CDN, который фильтруется Firefox.Но я не могу найти такие запросы в сетевой панели настроек разработчика.Также нет сообщений об ошибках ни в одной веб-консоли.

1 Ответ

0 голосов
/ 18 февраля 2019

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",
      // ....
]
...