Расширение Chrome: Font Awesome не загружает файлы шрифтов - PullRequest
Новая
       8

Расширение Chrome: Font Awesome не загружает файлы шрифтов

0 голосов
/ 01 июня 2018

Я боролся с этим некоторое время, поэтому подумал, что пришло время опубликовать здесь, так как ни один из подобных вопросов не помог.

Я уже пробовал несколько вещей.Потрясающая версия шрифта (5.0.9)

1) включает fontawesome-all.min.css к содержимому и изменяет URL-адреса @ font-face в файле css в соответствии с хромомпуть расширения. 

"content_scripts": [
{
  "matches": ["http://*/*", "https://*/*"],
  "js": ["contentscript.js"],
  "css": ["assets/css/fontawesome-all.min.css"]
}
],
"permissions": [
    "cookies", "tabs", "notifications", "storage", "identity", "<all_urls>"
],
 "web_accessible_resources": [
    "modal.html", "style.css", "assets/images/*", "assets/css/*", "assets/webfonts/*", "assets/js/*"
]

Вот пример того, как выглядит один из URL-адресов @ font-face. 

@font-face{font-family:Font Awesome\ 5 Pro;font-style:normal;font-weight:300;src:url(chrome-extension://<extension_id>/assets/webfonts/fa-light-300.woff2) format("woff2")}

Когда я это делаю, кажется fontawesome-all.min.css вообще не загружается, когда я смотрю на вкладку «Сети».

2) Включите файл css в contentscript.js (загружен CSS, но не шрифты значков) 

// Add Fontawesome library
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('assets/css/fontawesome-all.min.css');
    shadow.appendChild(link);

Как уже упоминалось, здесь отображаются "квадратные" значки, но не правильные.Я также вижу, что файл css загружается на вкладке Сети, однако шрифты значков все еще не загружаются.Почему?

Я загружаю это внутри Shadow DOM, на случай, если это должно иметь какое-либо отношение к нему ..

Попытался также загрузить файл шрифта из содержимого, но все жене сработало, я думаю, что это может быть связано с тем, что ресурс не находится в разделе "web_accessible_resources", но они ... так что я потерян. 

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: Font Awesome\ 5 Brands; font-style: normal; font-weight: 400; src: url('
        + chrome.extension.getURL('assets/webfonts/fa-brands-400.woff2')
        + ')}';
    shadow.appendChild(fa);
...