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>"
]
}
],
あとがき
検索ワードが思い浮かばず手当たり次第に調べたので、解決までにかなり時間がかかってしまいました。
私のような人が一人でも減れば幸いです。