Chrome v87 アドレスバー ( URLバー ) の背景色をまぶしい白から変更

商品リンクをクリックし通販サイトへ飛ぶ物は 「 広告 」のリンクです。
記事の執筆に AI な類は使用しておりません。

【 目次 】

はじめに
中級者～向け、シンプル説明

初心者様 (テーマ、スキンを触ったことがない人) 向け
テーマ ( スキン ) を入手
アドレスバー ( URLバー ) の色情報を追加
テーマ ( スキン ) を作成
おすすめリンク／関連記事

はじめに

皆様は Windows でどのブラウザをご使用ですか？
私はメインで Vivaldi 、サブで Chrome を使用しています。

Chrome は使い勝手がいいのですが
アドレスバー ( URLバー ) が文字を入力する為に
マウスで選択すると、以下のように白くなりまぶしいので
黒系にする方法をブログネタ。

この画面の白い部分が



このようになります。



英語 検索用ワード：
url ber / address ber / white / gray / change / setting / skin / theme

【 目次へ戻る 】

中級者～向け、シンプル説明

ここは書き換える箇所だけわかる人向けです。
初心者様、意味がわからない方は下へどうぞ、詳細説明あります。

やっている事はアドレスバー ( URLバー ) の部分に
色情報を付加するだけ。

Chrome 用のテーマ ( スキン ) を用意して解凍し
manifest.json に以下を追加、保存。
スキンを作り直し、拡張機能画面から読み込む。

"background_tab_incognito_inactive": [55,55,55],
"omnibox_background": [50,50,50],
"omnibox_text": [180,180,180],

上２つが背景色、３つ目が文字色です。
色の指定により、背景色と文字色が同色になり ( 自動調節される？ )
一部見えなくなる事があります。

その場合は色を調節してください。
上の色設定なら問題はありません。

【 目次へ戻る 】

スキンを入手

ここからはテーマ ( スキン ) の入手と書き換え方をご紹介。

最初にテーマを入手します。
これを書き換えて適用すれば簡単なので。

以下のページに飛びます。
好きな色でテーマを作成可能なサイト。

Chrome Theme Creator
Create Custom Google Chrome Themes Online

左上の Image / Colors / Pack の順で指定していきます。

各文字の右にある色の部分をクリックして色を変更します。
右の画面に反映されるので英字でも、どの項目がどこか？はわかる。



私の設定を書いておきます。

[ Image ]
NTP Background → c0c0c0
Frame → 202020
Toolbar → 908c8f
Tab Background → 202020

[ Colors ]
Toolbar → 000000
Tab Text → 000000
Background Tab Text → c0c0c0
Bookmark Text → 000000
NTP Text → 000000
NTP Link → 063774
Control Buttons → 202020
Buttons → 000000

設定が終了したら Pack → Pack and Download で
.crx をダウンロードします、これがテーマ ( スキン ) です。



次は、このテーマ ( スキン ) を書き換えていきます。

【 目次へ戻る 】

アドレスバー ( URLバー ) の色情報を追加

上で入手しましたテーマ ( スキン ) を書き換えます。

ダウンロードした .crx ファイルは圧縮ファイルなので
ZIP 形式が解凍できるアプリにドラッグなどして解凍します。

手持ちの解凍アプリで出来ない場合は
PeaZip / EXPLZH / WinRAR で可能です。

※入れる場合は関連付けが変わると思うので
　解凍するだけで使用可能な以下がオススメ
　PeaZip Portable の評価・使い方 - フリーソフト100

manifest.json と images フォルダが出来るので
デスクトップに 「 灰色テーマ 」 というフォルダに
全部コピーしたとしまして説明します。

灰色テーマ\manifest.json
灰色テーマ\images

manifest.json をメモ帳などのエディタで開きます。

横に文字がズラーッとありますので "colors" で検索します。
※ 最前と最後尾の "" も含めて検索

それより後ろの括弧範囲ならどこでもいいのですが
( **は指定したものにより数値が変化 )

"ntp_link":[**,**,**],

この , の後ろに以下を挿入

"background_tab_incognito_inactive": [55,55,55],
"omnibox_background": [50,50,50],
"omnibox_text": [180,180,180],

３行になっていますが１行にして下さい。
前方の , と 後方の , が消えたり２つ連続であるなどに注意
※エラーが出ます

挿入箇所がわからない場合は
], の後ろ全て、自分で Enter キー 押して改行すれば見やすい



この場合は、改行したものは元に戻さなくてよい。
追加も画像見たまま３行でよし。

書き込んだら manifest.json を保存します。

【 目次へ戻る 】

テーマ ( スキン ) を作成

上で manifest.json を書き換えましたが
解凍したんだから、そのまま .crx に再圧縮すればいいのでは？

と思うかもしれませんが圧縮は出来ても Chrome では読み込めません。
セキュリティ関連で、ぐぬぬ。
テーマ ( スキン ) を作成する方法を。

Chrome を起動しまして … → その他のツール → 拡張機能。



デベロッパーモードを有効に ( 右にスライドさせる )
( 発言すると舌噛みそうな名前は何度見ても噴く )



拡張機能をパッケージ化。



上の拡張機能のルートディレクトリの 観覧 を選択し
manifest.json のあるフォルダを選択 → 拡張機能をパッケージ化。
※秘密鍵ファイルは省略可能



作成された テーマ、拡張子 .crx が作成されるので
Chrome の拡張機能画面にドラッグして終了。

完成図。



パッケージの作成時に以下のエラーが出る場合は

拡張機能のパッケージ化のエラー
指定した拡張機能の秘密鍵は既に存在します。
その鍵を再利用するか、先に削除してください。

作成したテーマのフォルダ名＋ .pem という拡張子が
あるのでそれを消せば問題ない。

作り直す場合、２回目の作成時に通常はこれらを
消してないと思うのでエラーが出る事が多い。

-----

とまあ、こんな感じで
Chrome のアドレスバー ( URLバー ) の
まぶしい背景色の白色を変更しようでした。

こんな事をしなくても Windows10 のダークモードを使用すればいいのに
となりますが、 Windows のテーマをハイコントラストで使用していると
ダークモードが使えないので、色も白のままだという。

それでは皆様に、まぶしくない画面でブラウジングを快適に行えますよう
ブラウジングの神様にお願いをいたしまして、これにて終了です。

まぶしい画面にバイバーイ。
以上。

おすすめリンク

・Amazon / 楽天市場 / Yahoo! でお買い物をする。

関連リンク

・Comodo IceDragon 日本語化、タブ色変更方法、その他。
・Vivaldi v3.3.2022.39 プライベートウィンドウのテーマを元に戻す ( 使っていたテーマに )
・Win10 2009 October 2020 のまぶしい背景色を灰色 (グレー) に変更
・【画面全体・ブラウザ・エクスプローラ】パソコン画面のまぶしさをなくそう
・Firefox stylish (Stylus) アドオンでまぶしい背景色を暗く(灰色)にするCSS その2
・Firefox テーマ ( 外見 ) を変更するアドオン 「 Firefox Color 」( URL・検索蘭の色も変更可 )
・【設定】デスクトップをホイール上下し画面の明るさを変更 MouseGestureL.ahk と f.lux 使用
・Vivaldi ポータブルでの使用・設定方法とタブ／背景／文字色のまぶしくない設定
・Firefox Vivaldi Chrome ブックマークをHTMLで書き
　Dropbox / Googleドライブで共有
・Firefox Vivaldi Chrome 現在のウィンドウに保存したタブを復元
　日本語訳と使用方法
・Win10 ハイコントラストテーマで Vivaldi／Chrome／Edge の配色が変を直す
・Win10 May 2021 Update 21H1 のまぶしい背景色を灰色 (グレー) に変更