TampermonkeyでGoogle Fontsを読み込む

Tampermonkey から Google Fonts や Material Icons を利用する方法をメモメモ…

まずはヘッダに@resourceと@grantを追加します。

// @resource   HachiMaruPop https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap
// @grant      GM_addStyle
// @grant      GM_getResourceText

@resourceタグには適当な名称と読み込ませたいURLを指定しておきます。名称はなんでもOK。

そしてコード本体で次のように記述します。

GM_addStyle(GM_getResourceText("HachiMaruPop"));

GM_addStyle()は指定したCSSをページ内に挿入する関数。GM_getResourceText()は@resourceタグで指定しておいたコンテンツを取得する関数です。引数にはさっきつけた名称を渡します。

これで準備は完了です。あとは好きなように使いましょう。

const text = document.createElement("span");
text.setAttribute("style", "font-family: Hachi Maru Pop");
text.innerHTML = "恥の多い生涯を送って来ました。<br/>自分には、人間の生活というものが、見当つかないのです。";
parent.appendChild(text);

「

恥の多い生涯を送って来ました。
自分には、人間の生活というものが、見当つかないのです。

」

基本的にはスタイルシートにアクセスできるURLさえ手に入ればこの方法で読み込めるので、Material Icons なども同じように利用することができます。

// @resource   MaterialIcons https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round
// @grant      GM_addStyle
// @grant      GM_getResourceText


GM_addStyle(GM_getResourceText("MaterialIcons"));


const icon = document.createElement("span");
icon.classList.add("material-icons-round");
icon.innerText = "thumb_up";
parent.appendChild(icon);

thumb_up

「ボタンを押したら処理を実行」というスクリプトを書く機会は結構多いと思いますが、そういうときに Material Icons は簡易的なボタンをさくっと追加できて便利ですね。どうしても外部ファイルを読み込みたくなければSVGの中身をそのままコピペして利用するという手もありますが…

なお、今回はCSSの読み込み先を@resourceタグで指定しましたが、もしjQueryなどの外部スクリプトを読み込みたい場合は@requireタグを使うようにしましょう。(参考 Tampermonkey Documentation)