Как использовать fontawesome в Chrome Extension?

Question

Как использовать fontawesome в Chrome Extension?

Я разрабатываю расширение Google Chrome, которое отображается на определенном веб-сайте. И я хочу использовать Fontawesome в моем расширении Chrome. Когда я пытаюсь загрузить шрифты, ошибка GET chrome-extension://invalid/ net::ERR_FAILED произошло.

В таблицу стилей включены веб-шрифты с @font-face как это.

src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');

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

Мой манифест.json:

"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],

Как это решить?

15

css google-chrome google-chrome-extension font-awesome

Источник

user6209648 20 дек '16 в 08:11

8 ответов

Другие вопросы по тегам css google-chrome google-chrome-extension font-awesome

user3002584 13 апр '20 в 01:13 2020-04-13 01:13 · Answer 1 · 2020-04-13 01:13

Я хотел бы добавить к ответу @Thomas Kekeisen обновленный ответ для версии 5 (текущая версия - 5.13.0) FontAwesome.
Кроме того, я хотел бы, чтобы вещи были как можно более минимальными, поэтому:

Я буду ссылаться только на woff2, поскольку нет причин использовать другой формат.
Я буду ссылаться только на FontAwesome's regularstyle (это один из их 5 стилей).

Поэтому, если вы используете формат, отличный от woff2, или стиль, отличный от regular, просто примените к нему таким же образом следующее.

Итак, чтобы использовать FontAwesome в расширениях Chrome, сделайте следующее:

Загрузите файл.zip FontAwesome (это прямая ссылка для загрузки, вы можете посетить страницу загрузки здесь).
Извлеките.zip и возьмите только то, что нужно, а именно:
(а) css/fontawesome.min.css
(б) css/regular.min.css
(c) webfonts/fa-regular-400.woff2
Примечание. Если вы используете css/all.min.js, он заменяет оба (а) и (б).
Необязательно и облегчит нашу жизнь:
В корневой папке расширения Chrome создайте папки css а также webfontsдля имитации структуры FontAwesome и переместите файлы, перечисленные выше, в эти папки.
Структура вашей папки должна выглядеть следующим образом:
```
your-extension
 |- css
   |- fontawesome.min.css
   |- regular.min.css
 |- webfonts
   |- fa-regular-400.woff2
```
Внутри css/regular.min.css, переопределить (да, просто переопределить) @font-face медиа-стиль со следующим:
```
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display:block;
  src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");
}
```
Примечание. Напомню еще раз, что я имею в виду regular стиль в качестве примера, поэтому, если вы используете другой стиль, убедитесь, что @font-face.srcсвойство имеет правильную стоимость.

Обновите свой manifest.json следующим образом:

{
  ...
  "content_scripts": [{
     ...
     "css": [
        "css/fontawesome.min.css",
        "css/regular.min.css",
     ]
     ...
  }],
  ...
  "web_accessible_resources": [
     ...
    "css/fontawesome.min.css",
    "css/regular.min.css",
    "webfonts/fa-regular-400.woff2", // or: "webfonts/*" 
  ]
}

Примечание: необходимо добавить .css пути в оба "content_scripts" а также "web_accessible_resources".

user301277 02 мар '19 в 10:40 2019-03-02 10:40 · Answer 2 · 2019-03-02 10:40

Вот как мне удалось получить локальный (автономный) экземпляр fontawesome (4.7) в моем расширении chrome:

1) Скачать файлы шрифтов (FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff, fontawesome-webfont.woff2) чтобы fonts/

2) Скачать font-awesome.min.css в css/ и заменить все URL в этом файле chrome-extension://__MSG_@@extension_id__/fonts/[...],

3) Обновите свой manifest.json как это:

{
    ...
    "content_scripts":          [
        {
           ...
            "css":        [
                "css/font-awesome.min.css",
                ...
            ]
            ...
        }
    ],
    ...
    "web_accessible_resources": [
        ...
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
    ]
}

Это делает fontawesome доступным в автономном режиме (для этого вам не нужны никакие fontawesome-js).

user2490989 23 окт '17 в 20:54 2017-10-23 20:54 · Answer 3 · 2017-10-23 20:54

Если вам нужно использовать скрипт содержимого Font Awesome для расширения Chrome (не popup.html), вы можете сделать следующее:

Скачать https://use.fontawesome.com/840a321d95.jsпереименуйте его в fontawesome.js и включите его в каталог вашего расширения, как описано в ответе @wesdotcool.

Затем добавьте следующее manifest.json:

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}

Jock 24 авг '22 в 09:53 2022-08-24 09:53 · Answer 4 · 2022-08-24 09:53

Ничего из вышеперечисленного не работало для меня. Это может быть связано с тем, что все ответы устарели, поскольку они относятся к более старым версиям Font Awesome. Я решил это, когда нашел то, что предлагает Font Awesome 6 на их официальном сайте .

Суммируя:

Загрузите ZIP-файл Font Awesome для Интернета.
Извлеките все в папку вашего проекта
Скопируйте путь, чтобы добраться доcss/all.css,cssэто папка внутри той, которую вы только что извлекли
Вставьте следующее в заголовок вашего HTML:

      <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

Примечание. Обязательно вставьте правильный путь.

Несколько отличных руководств по получению пути к файлу:

user550446 14 июн '17 в 20:16 2017-06-14 20:16 · Answer 5 · 2017-06-14 20:16

Самый простой, но ужасный способ - загрузить Fontawesome и напрямую включить его

curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"

а затем добавить его туда, где это нужно

<script src="fontawesome.js"></script>

2

Источник

user550446 14 июн '17 в 20:16

user2128650 25 ноя '19 в 14:52 2019-11-25 14:52 · Answer 6 · 2019-11-25 14:52

Я успешно смог использовать Font Awesome с помощью Sass в моем расширении Chrome.

Шаги по интеграции FontAwesome 5.11.x в вашем расширении Chrome с помощью sass:

Перейдите на страницу загрузки Font Awesome, чтобы загрузить локальную копию веб-файлов.
Скопируйте SCSS папку в папку стилей.
Скопируйте весь webfonts папку в папку с активами.
Откройте шрифт awesome scss/variables.scss и отредактируйте $fa-font-path чтобы указать, куда вы поместили папку веб-шрифтов.

Вам нужно будет использовать chrome-extension://__MSG_@@extension_id__/ чтобы найти путь к папке расширения.

Для меня путь к файлам шрифтов был - extension/chrome/assets/font-awesome, поэтому я изменил $fa-font-path к chrome-extension://__MSG_@@extension_id__/assets/font-awesome.

Импортируйте Font Awesome, добавив @import "scss/fontawesome.scss"в вашем основном файле SCSS. Также импортируйте один или несколько стилей@import "scss/solid.scss"в вашем основном файле SCSS. Если вы используете обычный шрифт, импортируйтеregular.scss.

Запустите свое веб-расширение, и вы сможете использовать отличные иконки шрифтов.

user9763476 03 апр '23 в 17:20 2023-04-03 17:20 · Answer 7 · 2023-04-03 17:20

Мой вариант использования следующий: я добавляю значки на одну страницу, а не во всплывающее окно, на страницу, где я генерирую элементы div, кнопки, текст и прочее.

В конце концов я сделал это, просто добавив элемент <script, содержащий Fontawesome.js, на страницу, где мое расширение добавляло значки.

      if(!document.getElementById("fontawesome_styling_script")){
        const script = document.createElement("script");
        script.id = "fontawesome_styling_script"
        script.src = "https://kit.fontawesome.com/name_of_file.js";
        script.crossOrigin = "anonymous";
        document.querySelector("head").appendChild(script);
    }

Получите файл .js, создав комплект на потрясающей веб-странице.

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

Michael Libman 16 ноя '23 в 14:43 2023-11-16 14:43 · Answer 8 · 2023-11-16 14:43

Добавьте следующую строку в свой манифест:"content_security_policy": "script-src 'self' https://kit.fontawesome.com/[FILE_NAME].js; object-src 'self'"

Обновите расширение.

Изменить: этот метод, похоже, не работает для Manifest V3.

0

Источник

Michael Libman 16 ноя '23 в 14:43