【Chromeアドオン】自分独自のちょっとしたアドオン作る

いつも見ているサイトで、ちょっとだけ独自のスクリプトを走らせたい——そんなときがあります。

目に痛い背景色を自分好みに変えたい
邪魔な要素を消したい
毎回手でやっている操作を自動化したい

サイト側に手を入れられない以上、ブラウザ側で何とかするしかありません。Chrome 拡張機能（アドオン）は本格的に作ろうとすると覚えることが多いのですが、「自分だけが使う、特定サイトへのスクリプト差し込み」なら最小構成のファイル2つで動きます。この記事ではその最小構成を紹介します。

作るもの：2ファイルだけの拡張機能

どこかにフォルダを作って、content.js と manifest.json の2ファイルを作成します。

それぞれの中身は下記です。

content.js（差し込むスクリプト本体）

window.onload = function () {
    setTimeout(Process, 5000);
};

function Process() {
    var kaisetsuElem = document.getElementsByClassName('{abcabc}');
    kaisetsuElem[0].style.backgroundColor = '#fffff0';
}

ある要素の背景色を変えるだけのコードです。{abcabc} のところは対象サイトで実際に使われているクラス名に置き換えます（対象の要素は、ページ上で右クリック →「検証」で確認できます）。

5秒待ってから処理しているのは、私が対象にしたサイトがページ読み込み後に JavaScript で要素を生成するタイプだったためです。静的なページなら setTimeout なしで直接呼んで問題ありません（この点は後述のハマりポイントも参照）。

manifest.json（拡張機能の定義ファイル）

{
  "name": "StyleEraser",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "Sample Chrome Extension yukilab",
  "content_scripts": [{
    "matches": ["https://{xyzxyz}/*"],
    "js": [
      "content.js"
    ]
  }]
}

{xyzxyz} のところには適用対象サイトのドメインを入れます。各項目の意味は次のとおりです。

項目	意味
`name` / `version` / `description`	拡張機能の表示名・バージョン・説明（自分用なので適当でよい）
`manifest_version`	マニフェストの形式バージョン。現在は 3 を指定する（2 は廃止済みで読み込めない）
`content_scripts.matches`	スクリプトを差し込む URL のパターン
`content_scripts.js`	差し込むスクリプトのファイル名

matches は "https://example.com/*" のような スキーム＋ホスト＋パスのパターン形式です。サブドメインもまとめて対象にしたい場合は "*://*.example.com/*" のように書けます。

Chrome に読み込む

次に Google Chrome の「︙」ボタンから 拡張機能 > 拡張機能を管理 をクリックします。

拡張機能の管理画面が開いたら、まず右上の**「デベロッパーモード」を ON** にします。これを入れないと次のボタンが表示されません。

**「パッケージ化されていない拡張機能を読み込む」**をクリックします。

フォルダ選択ダイアログが出るので、先ほど2ファイルを入れたフォルダを選択すれば読み込み完了です。対象サイトを開くと、content.js が自動で実行されます。

ハマりポイント

自分が引っかかった順に挙げておきます。

「パッケージ化されていない拡張機能を読み込む」が見つからない → デベロッパーモードが OFF になっています。管理画面右上のスイッチを ON に
要素が取れない（kaisetsuElem[0] が undefined） → ページ読み込み後に JavaScript で要素が生成されるサイトでは、window.onload の時点ではまだ要素が存在しません。今回のように setTimeout で待つのが手軽ですが、確実にやるなら MutationObserver で要素の出現を監視する方法もあります
content.js を編集したのに動きが変わらない → ファイルを保存しただけでは反映されません。拡張機能の管理画面で該当拡張の更新（リロード）ボタンを押してから、対象ページも再読み込みしてください
そもそもスクリプトが実行されない → matches のパターンと実際の URL が合っているかを確認。https と http の違い、www. の有無でもマッチしなくなります

応用：CSS だけ差し込むこともできる

「見た目を変えたいだけ」なら、JavaScript を書かずに CSS ファイルを差し込む方法もあります。manifest.json の content_scripts に css キーを足すだけです。

"content_scripts": [{
  "matches": ["https://{xyzxyz}/*"],
  "css": ["style.css"]
}]

style.css に普通の CSS を書けば、対象サイトに常時適用されます。こちらは要素の生成タイミングを気にしなくてよいので、スタイル変更目的ならむしろ簡単です。

まとめ

特定サイトにスクリプトを差し込むだけなら content.js + manifest.json の2ファイルで拡張機能が作れる
manifest_version は 3 を指定する（2 は廃止済み）
読み込みはデベロッパーモードを ON にして「パッケージ化されていない拡張機能を読み込む」
動的に生成される要素は onload 時点では存在しないので、setTimeout や MutationObserver で待つ
編集後は拡張機能の更新ボタン＋ページ再読み込みを忘れずに

本格的な拡張機能にはポップアップ UI や権限設定など覚えることが色々ありますが、「自分のブラウザでちょっと動かしたい」だけなら最小構成で十分です。同じことをやりたかった方の参考になれば幸いです。