WindowsからLinux Mintへ

Linux Mintの日本語のフォントを最優先に設定する自作のChromeの拡張機能

　Linux( Mint)でChromeで「小説家になろう」や「カクヨム」などでホワイト サークルである「○」が半角で4分の1の小ささで表示されてしまう不具合に対処するために、

さらに、信頼できそうな開発者のChromeの拡張機能がChromeのストアに無さそうなので、

Linux( Mint)に存在する可能性が高い日本語のフォントを、全てのウェブ ページのCSSのfont-familyに最優先で設定するChromeの拡張機能を最小構成で自作してみました。

　2024年1月22日に、自作のChromeの拡張機能によって、Linux MintでChromeで「小説家になろう」と「カクヨム」でホワイト サークルである「○」が全角の大きさで表示される事を確認しました。

　Githubでパブリック ドメインで公開しました。

　Bing検索で「github Eliphas1810 font-family-overwriter-for-linux-ja-chrome-extension」などで検索してみてください。

　Google検索では検索できません。

　コピーする場合は、2文字の全角空白を4文字の半角空白に置換してください。

　①

　Chromeで自作の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の拡張機能も削除されてしまうので、注意してください。

　Chromeの拡張機能はCSSも追加できるので、JavaScript無しのCSSだけのバージョンも作成してみました。

manifest.json

――――――――――――――――――――

{

　　"name": "FontFamilyOverWriterForLinuxJaByCss",

　　"version": "0.1.0",

　　"manifest_version": 3,

　　"description": "ウェブ ページのフォントをLinuxの日本語のフォントを最優先するように上書きします。CSS版。",

　　"content_scripts": [

　　　　{

　　　　　　"matches": ["https://*/*", "file:///*/*"],

　　　　　　"css": ["common.css"]

　　　　}

　　]

}

――――――――――――――――――――

common.css

――――――――――――――――――――

html, body, div, p, input, textarea {

　　font-family: 'TakaoPGothic', 'Noto Sans CJK JP', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'MS PGothic', sans-serif !important;

}

――――――――――――――――――――