Chrome拡張 contents_scriptでローカルのフォント、画像を使う

Chrome拡張を作っているときに、ローカルのフォントデータをCSS読み込みしようとしたところでハマったのでメモ

私の中での理解であり内容に間違いがあるかもしれません。
間違いを見つけられた場合、やさしいコメント or 編集リクエストをいただけるとうれしいです。

TL;DR

chrome-extension://__MSG_@@extension_id__ を使えばいいよ！

@font-face {
  font-family: "SampleFont";
  src: url("chrome-extension://__MSG_@@extension_id__/css/font/sample.ttf");
}

body {
  background-image: url('chrome-extension://__MSG_@@extension_id__/sample.png');
}

なにが問題だったのか？

contents_scriptのcssでローカルに配置したリソース（フォントや画像）を読み込むにはフルパスで指定する必要があります。（これ気づくのに30分くらいかかった）
そして、フルパスには拡張機能のIDが含まれます。

IDはChromeに読み込むか、アプリ登録する事で発行されますが、開発版と公開版でIDは変わってしまいます。

• 開発版：　chrome://extensions/ で拡張機能を読み込む
• 公開版： デベロッパーダッシュボード （新UI版）に登録

なので、発行されたIDを直接コードに埋め込むのは現実的ではありません。

解決方法

コードはTL;DRを見てください。

JavaScriptにおけるchrome.extension.getURL()にあたるものがcssでも使えれば解決するのはわかっていましたが、書き方がわからずに時間がとられてしまいました

Webをひたすら漁った結果、stackoverflowに記事を発見して無事解決することができました。
https://stackoverflow.com/questions/4535816/how-to-use-font-face-on-a-chrome-extension-in-a-content-script

リファレンスにもちゃんと書いてあったようです。上記の記事中に書いてあって気づきました。。
https://developer.chrome.com/extensions/i18n#overview-predefined

補足(manifest.json)

content_scriptが動いているWebサイトから 拡張機能内のリソースにアクセスするために、manifestファイルへの記述も必要です。
v3からは公開するサイトなどの明記も必要になりました。

"content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
...
    }

スクリプトが動くサイトがの指定が上記だった場合、v2, v3それぞれこんな感じです。

for Manifest v2

  "web_accessible_resources": [
    "css/font/*"
  ],

for Manifest v3

  "web_accessible_resources": [
    {
      "resources": [
        "css/font/*"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],

あとがき

検索ワードが思い浮かばず手当たり次第に調べたので、解決までにかなり時間がかかってしまいました。
私のような人が一人でも減れば幸いです。