ページの見た目を変える拡張機能なら簡単に作れる

Chrome 拡張機能を自作しようと調べると、機能によって３つに分類されるとかJavaScriptファイルを作る必要があるとかいろいろ出てきて尻込みしてしまいますが、ページの見た目をちょっと変えるだけの拡張機能ならCSSの知識があれば簡単に作れます。

サイトの一部を隠したり背景色を変えたりするための最小限の手順をまとめてみました。

ブラウザ：Google Chrome、Microsoft Edge

1. マニフェストファイルを作る（ほぼコピペ）

manifest.jsonという名前のファイルを作成し、メモ帳などで開いて以下を貼り付けます。

{
  "name": "サンプル拡張機能",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "サンプル拡張機能の説明",
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/*"
      ],
      "css": [
        "sample.css"
      ]
    }
  ]
}

以下の部分を適当に変えて保存します。

name : 拡張機能の名前
description : 拡張機能の説明
matches : 拡張機能を適用するサイト。例だとhttps://www.google.com/で始まるすべてのページ（=すべてのGoogle検索結果ページ）に適用される。
css : CSSのファイル名（これから作ります）

CSSファイルを作る

CSSファイルを作ります。
例：Google検索結果ページのGoogleロゴを非表示にし、背景を少し暗くする。
○○○.css

/*非表示*/
.logo,
.sfbg {
  display: none !important;
}

/*背景を優しい色に*/
.main,
.UK95Uc {
  background-color: rgb(248, 248, 248) !important;
}

セレクタはブラウザのデベロッパーツールで調べるのが楽です。
非表示にしたい要素はセレクタで指定してdisplay: none !important;、
背景色を変えたい要素はセレクタで指定してbackground-color: rgb(○○○, ○○○, ○○○) !important;で変えられます。
もちろん他のCSSも適用できます。
!importantをつけることでそのページの本来のCSSよりも優先されます。