【ライフハック】「背景とアイコンを同化させニキ」に対抗したい

TL;DR

• chrome extensionを自作したい！という人向けです。

• プロフィール画像を微妙に変更するchrome extensionを作る
  (chrome extensoionを自作して、特定のDOMに独自のcssを適用する)

はじめに

以下のようなことが、よくありますね。(?)

_アイコン画像が真っ白なので、背景に同化してしまっています。 _

もちろんアイコン画像を何にしようと、その人の勝手なのですが、
これ、Facebookのメッセンジャーでやられてしまうと既読したのかどうかわかりません。

環境

Google Chrome ver.79

やったこと

この記事などを参考に、chromeのextensionを作ります。

ディレクトリ の構成はこんな感じです

chromeExtension/
　　　　　　┣ img/
　　　　　　　　┗ icon_img.png
          ┣ chrome_changeColor.css
　　　　　　┗ manifest.json

ファイルは以下の通りです

{"name":"iconchnage","version":"1.0.0","manifest_version":2,"description":"iconchnage Chrome Extension","icons":{"32":"img/icon_img.png","48":"img/icon_img.png","128":"img/icon_img.png"},"content_scripts":[{"matches":["https://www.facebook.com/*"],"css":["chrome_changeColor.css"]}]}

._4jzq._jf4{background-color:#111;}

Facebookの既読アイコンは Command+Shift+Cで調べると
"._4jzq._jf4" だったので、cssではこれを指定して、バックグラウンドの色を変更しています。

icon_img.pngには適当な画像を置きます。

結果

これで既読が補足できます(^ ^)

参考

Chrome拡張の作り方 (超概要)