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

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

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

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"
    ]
  }]
}

chrome_changeColor.css

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

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

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

結果

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

参考

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

追記(2019年12月22日)

スマホのメッセンジャーアプリで、ダークモードで見ればよかったということに気づいてしまいました(完)