Open2024/01/02にコメント追加3

Chrome拡張/Firefoxアドオンでフォントを内蔵して読み込むメモ

Chrome拡張

yamadashy

やりたいこと

Webフォントとして読み込まず、ブラウザ拡張に埋め込んで読み込みたい。

例えばフォントのサブセット化した場合などに有用。

手順

まずttfなどのフォントファイルをどこかに置く。

次に manifest.json の web_accessible_resources に、置いたフォントのパスで設定する。

  "web_accessible_resources": [
    {
      "resources": [
        "<パス>"
      ],
      "matches": [
          "<拡張が動くサイトのURL>"
      ]
    }
  ],

すると、cssなどから以下のようなパスで読み込むことができる。
このパス指定の方法は Chrome拡張、Edge拡張、Operaアドオンに使える

chrome-extension://__MSG_@@extension_id__/<パス>

具体例

具体的な例として、私が出している Slack Channels Grouping という拡張の場合。

以下のようなパスにフォントを置いて

次のように設定し、

  "web_accessible_resources": [
    {
      "resources": [
        "fonts/SlackChannelsGrounping-NotoSansJP-Medium.ttf"
      ],
      "matches": [
        "http://app.slack.com/*",
        "https://app.slack.com/*"
      ]
    }
  ],

CSSで読み込んでいる。

yamadashy

Firefoxの場合はこうなる

moz-extension://__MSG_@@extension_id__/<パス>

具体例だと次のようになる。

yamadashy

また manifest.json v2 の場合は、web_accessible_resources は配列になる。

  web_accessible_resources": [
    "fonts/SlackChannelsGrounping-NotoSansJP-Medium.ttf"
  ],