Linux( Mint)の日本語フォントを最優先に設定する自作のChromeの拡張機能
Linux( Mint)に存在する可能性が高い日本語フォントを全てのウェブ ページのCSSのfont-familyに最優先で設定するChromeの拡張機能を自作してみました。
また、当拡張機能を変更すれば、自分の好みの日本語フォントを全てのウェブ ページのCSSのfont-familyに最優先で設定するChromeの拡張機能を自作できると思います。
例えば、「カクヨムの日本語フォントの選択が好きではない」というインターネット上の意見をいくつか見た事が有りますが、当拡張機能を変更した物で解決できるかもしれません。
ただし、画面の部分の幅などが崩れてしまうかもしれませんが。
パブリック ドメインです。
Githubでもパブリック ドメインで公開しました。
Bing検索で「github Eliphas1810 font-family-overwriter-for-linux-ja-chrome-extension」などで検索してみてください。
Google検索では検索できません。
コピーする場合は、2文字の全角空白を4文字の半角空白に置換してください。
①
Chromeで自作のChromeの拡張機能をディレクトリ単位で指定するので、Chromeの拡張機能のファイルを置くディレクトリを新規作成します。
ただし、Chromeに指定して読み込んでいるディレクトリを削除すると、その自作のChromeの拡張機能も削除されてしまうので、「ドキュメント」のディレクトリの下などにディレクトリを新規作成します。
著者は、「FontFamilyOverWriterForLinuxJa」という名前でディレクトリを新規作成しました。
――――――――――――――――――――
FontFamilyOverWriterForLinuxJa
――――――――――――――――――――
②
どのURLのウェブ ページの時に、どのJavaScriptを実行するのか等の設定のファイルであるmanifest.jsonを用意します。
ちなみに、マニフェスト(manifest.json)で、run_atの設定を省略した場合は、document_idleというタイミングで拡張機能のJavaScriptが実行されます。
run_atのdocument_idleは、ウェブ ページのDOM木構造の構築後である事が保証されているそうです。
そのため、拡張機能のJavaScriptでウェブ ページの(DOM)構造を変更するだけの場合は、マニフェスト(manifest.json)でrun_atの設定は不要なので、省略できます。
/FontFamilyOverWriterForLinuxJa/manifest.json
――――――――――――――――――――
{
"name": "FontFamilyOverWriterForLinuxJa",
"version": "0.1.0",
"manifest_version": 3,
"description": "ウェブ ページのフォントをLinuxの日本語のフォントを最優先するように上書きします。",
"content_scripts": [
{
"matches": ["https://*/*", "file:///*/*"],
"js": ["FontFamilyOverWriterForLinuxJa.js"]
}
]
}
――――――――――――――――――――
③
Chromeの拡張機能の本体であるJavaScriptをmanifest.jsonに書いた名前で用意します。
/FontFamilyOverWriterForLinuxJa/FontFamilyOverWriterForLinuxJa.js
――――――――――――――――――――
var fontFamilyForLinuxJa = "'TakaoPGothic', 'Noto Sans CJK JP', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'MS PGothic', sans-serif";
["html", "body"].forEach(function (tagName) {
document.getElementsByTagName(tagName.toUpperCase())[0].style.setProperty("font-family", fontFamilyForLinuxJa, "important");
});
["div", "p", "input", "textarea"].forEach(function (tagName) {
var tags = document.getElementsByTagName(tagName.toUpperCase());
for (var index = 0; index < tags.length; index++) {
tags[index].style.setProperty("font-family", fontFamilyForLinuxJa, "important");
}
});
――――――――――――――――――――
※htmlタグ、bodyタグ、divタグ、pタグ、inputタグ、textareaタグのフォント ファミリーを優先度important指定で上書きしているだけです。
※Element.style.fontFamilyではimportantキーワードは無視されてしまうので、Element.style.setProperty()を利用しています。
④
Chromeで「拡張機能」をクリックして選択してから「拡張機能を管理」を選択します。
⑤
「デベロッパー モード」をクリックしてオンにします。
⑥
「パッケージ化されていない拡張機能を読み込む」をクリックして選択します。
⑦
自作のChromeの拡張機能のファイルを置いているディレクトリを選択して「Select」ボタンをクリックします。
※
Chromeに指定して読み込んでいるディレクトリを削除すると、その自作のChromeの拡張機能も削除されてしまうので、注意してください。
