typescript環境を整える開発環境を整えます。今回使うライブラリは以下のものを使います。"^1.1.2",}他にも依存関係を使っているのですが、細かいところは省いています。webpackを使ってtypescriptで書かれたスクリプトをビルドして、それを拡張機能として利用します。content-scriptを使って画面を拡張してmaterial-iconsのアイコンを表示します。}}ここで大事なのはloaderの部分です。nameを指定することで出力時のwoffファイルがfonts/MaterialIcons-Regular.woffとのようになります。出力時のpathはwebpack.configのあるディレクトリがルートとなります。これを行わない場合、ファイル名がhashとなります。すると、画面上でwoff等を読み込むのが難しくなります。build時に再度生成されるため、毎回書き直す必要が出てきます。],}このようになります。ここで重要なのは、web_accessible_resourcesにフォント用のファイルを書いていることです。(ワイルドカード*を使っても良いですが、使えるリソースを把握するのにすべて書いたほうが良いと考えてこのようにしています。)これを行うことで、画面上からリソースを使用することができます。Resourcesを参照するのが良いです。リソースを扱う場合は以下のようにurlを書かなければなりません。ID]/[PATH]web_accessible_resourcesを使わない場合material-iconsで使用するwoffなどが以下のように読み込まれます。https://[domain]/~.woffもちろんそのページで.woffを使用していない限り、これはエラー(404)となります。一点重要な点があります。"assets/fonts/MaterialIcons-Regular.eot",リソースの書き方です。最初は以下のように相対パスで実装していました。]}これは動きませんでした。原因はわかりませんでした。予想ではリソースの読み込み時に利用するurlが異なるからです。画面に@font-faceを埋め込むmanifestの設定時に解説した通り、リソースを利用する場合は以下のように使用する必要があります。ID]/[PATH]このパスを作成するのに必要なのが、拡張機能のIDです。IDは開発時と配信時に別のIDが付けられるため、ハードコーディングでは対応できません。googleはこのurlを作成するための機能を用意しています。ID]/hoge.pngとうurlを取得できます。以上を踏まえて、画面上に@font-faceを<style>として埋め込みます。document.head.appendChild(newStyle);}これで画面上からリソースを利用できるようになります。jquery使ってないというツッコミはなしでお願いします。TestExtensionとしていることです。Iconsを使っていた場合、コンフリクトが発生する可能性があります。あとはこの関数を実行するだけです。cssを追加する私の場合はscssを使っています。sassの場合は読み替えてください。Iconsに書かれているように以下のように使用しないことです。'~material-icons/iconfont/material-icons.scss';このようにすると、せっかく参照できるようにしたリソースファイルを利用してくれません。ちなみに、上記のスタイルは以下のファイルを参考にしました。node_modules/material-icons/iconfont/material-icons.cssまとめやることは以下のことです。リソースを登録する@font-faceを埋め込むmaterial-iconsのスタイルを独自に用意する以上です。これを解決するのに1日かかってしまいました。だれかの参考になれば幸いです。»プロフィールid:miyaji-y26プログラミングに関する記事をメインで書いています。月別アーカイブ最新記事alembicで環境別にマイグレーションファイルを分割するFlaskで共通的なpath変数を検証する方法material-iconsをchrome拡張のcontent-scriptで使用する方法リファクタリングを行うタイミングについて属性付きセレクタを作成する関数を作った。はてなブログをはじめよう!miyaji-y26さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。