はじめに

Chrome 拡張機能で FontAwesome (FontAwesome 5) を使う方法を整理した。

TL;DR

  • 外部アクセス(リモートコード) OK な場合
    • 拡張機能内で <head> に <link> を差し込む
  • 拡張機能内で完結したい場合
    • Download | Font Awesome から「Pro/Free for Web」一式をダウンロード
    • webfonts 配下一式、および css/all(.min).css を拡張機能内に配置
    • all(.min).css の url(../webfonts/xxxx) を url(chrome-extension://__MSG_@@extension_id__/xxxx) に変更
    • manifest.json で css/all(.min).css を読み込み
    • manifest.json の web_accessible_resources にフォント一式を追加
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前置き
    2. 外部アクセス(リモートコード)
    3. 拡張機能内で完結
      1. ダウンロード/配置
      2. all(.min).css を編集
      3. manifest.json を編集
  5. まとめ
  6. 参考文献

環境・条件

  • Chrome バージョン: 83.0.4103.116（Official Build）（64 ビット）
  • FontAwesome v5.13.1

詳細

前置き

ここでの「FontAwesome を使う方法」とは、「FontAwesome 未使用の Web ページ内で FontAwesome を使用可能にする方法」の意味。

「オプションページ、ポップアップページなどで使用可能にする方法」ではないので注意。
※基本的には同様の方法で使えるとは思うけど未確認。

外部アクセス(リモートコード)

ページ内の <head> に <link> で、FontAwesome の CSS を読み込ませれば OK。

1
2
3
4
5
6
7
8
9
10
11
const loadFontAwesome = () => {
  let link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://use.fontawesome.com/releases/v5.13.1/css/all.css';
  document.head.insertAdjacentElement('beforeEnd', link);
};

(function() {
  'use strict';
  loadFontAwesome();
})();

これで <i class="fas fa-home"></i> などお好みのアイコンを使えるようになる。

この方法が一番お手軽だとは思うが、拡張機能リリース時「プライバシー」の「リモートコード」で説明を記述する必要が出てくるので注意。

Load fontawesome css to show icon font とかそれっぽいこと書いておけば大丈夫ではないかと思う。
※↑の文言でリリースをパスしたとかではないので注意。

拡張機能内で完結

参考: css - How to use fontawesome in Chrome Extension? - Stack Overflow

外部から読み込みたくない(リモートコードの説明書きたくない)って場合は、拡張機能内に CSS とフォント一式を配置することで使用可能となる。

ダウンロード/配置

Download | Font Awesome から「Pro for Web」か「Free for Web」をダウンロードして展開。

展開後、webfonts 配下の一式と css/all(.min).css を拡張機能内にコピー。自分は my-extension/fonts/ 配下と my-extension/css/ 配下に配置した。

1
2
3
4
5
6
7
8
9
css/
  all.min.css

fonts/
  fa-brands-400.eot
  fa-brands-400.svg
  fa-brands-400.ttf
  ...
  fa-solid-900.woff2

all(.min).css を編集

all(.min).css をエディタで編集する。

url(../webfonts/xxxx) を url(chrome-extension://__MSG_@@extension_id__/path/to/fonts/xxxx) に変更。

自分は fonts に配置したので url(chrome-extension://__MSG_@@extension_id__/fonts/xxxx) に置換、実際の変更イメージは以下。
※見やすいように all.css を変更した場合のイメージを記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
diff --git a/css/all.css b/css/all.css
index c9816fa..fb012c1 100644
--- a/css/all.css
+++ b/css/all.css
@@ -4555,8 +4555,8 @@ readers do not read off random characters that represent icons */
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../webfonts/fa-brands-400.eot");
-  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-brands-400.eot");
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("chrome-extension://__MSG_@@extension_id__/fonts/fa-brands-400.woff2") format("woff2"), url("chrome-extension://__MSG_@@extension_id__/fonts/fa

 .fab {
   font-family: 'Font Awesome 5 Brands';
@@ -4566,8 +4566,8 @@ readers do not read off random characters that represent icons */
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../webfonts/fa-regular-400.eot");
-  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webf
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-regular-400.eot");
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("chrome-extension://__MSG_@@extension_id__/fonts/fa-regular-400.woff2") format("woff2"), url("chrome-extension://__MSG_@@extension_id__/fonts/

 .far {
   font-family: 'Font Awesome 5 Free';
@@ -4577,8 +4577,8 @@ readers do not read off random characters that represent icons */
   font-style: normal;
   font-weight: 900;
   font-display: block;
-  src: url("../webfonts/fa-solid-900.eot");
-  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-solid-900.eot");
+  src: url("chrome-extension://__MSG_@@extension_id__/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("chrome-extension://__MSG_@@extension_id__/fonts/fa-solid-900.woff2") format("woff2"), url("chrome-extension://__MSG_@@extension_id__/fonts/fa-s

 .fa,
 .fas {

manifest.json を編集

manifest.json を編集。

  • css/all.min.css の読み込み
  • fonts 配下のファイルへのアクセス許可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 {
   ...
   "content_scripts": [
     {
       ...
+      "css": [
+        "css/all.min.css"
+      ],
       ...
     }
   ],
   ...
+   "web_accessible_resources": [
+     "fonts/*"
+   ],
   ...
 }

これで <i class="fas fa-home"></i> などお好みのアイコンを使えるようになる。

まとめ

  • 外部アクセス(リモートコード) OK な場合
    • 拡張機能内で <head> に <link> を差し込む
  • 拡張機能内で完結したい場合
    • Download | Font Awesome から「Pro/Free for Web」一式をダウンロード
    • webfonts 配下一式、および css/all(.min).css を拡張機能内に配置
    • all(.min).css の url(../webfonts/xxxx) を url(chrome-extension://__MSG_@@extension_id__/xxxx) に変更
    • manifest.json で css/all(.min).css を読み込み
    • manifest.json の web_accessible_resources にフォント一式を追加

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list