Closed4ヶ月前にクローズ3

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

Chrome拡張

フォント

firefoxアドオン

operaアドオン

edge拡張

yamadashy 4ヶ月前に更新

やりたいこと

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 4ヶ月前に更新

Firefoxの場合はこうなる

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

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

yamadashy 4ヶ月前

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

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

このスクラップは4ヶ月前にクローズされました