はじめに

Chromeの拡張機能をつくるのは難しそう、という勝手なイメージがあったのですが、ごくシンプルなものであればタイトルに記したスキル程度でも作成できたので記事にすることにしました。
とくに個人的に使用するものであれば案外敷居は高くないので、これを機に何か作成してみてはいかがでしょうか。

今回作る拡張機能

今回は「拡張機能の作り方」に焦点を当てたいので、機能は「Qiitaサイトの背景色を変更する」というシンプルなものにしようかと思います。
ちなみに、本記事ではストアへの登録は行いません。

作成方法

1. 作業ディレクトリの作成

ディレクトリ名はなんでも構いません。今回は「change-qiita-bg」というディレクトリに作成しようと思います。

2. manifest.json の作成

いきなりよくわからないものがでてきましたがまったく問題ありません。以下のようなファイルを作成してchange-qiita-bgディレクトリ直下に保存しましょう。manifest.jsonの詳しい内容については他記事に任せることとします。

change-qiita-bg / manifest.json

{
  "name": "Change Qiita Background",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://qiita.com/*"],
      "js": ["content.js"]
    }
  ]
}

今回書いたもののうち、「name」「version」「manifest_version」は必須ですので必ず含めましょう。
残った"content_scripts"をざっくり説明すると、「mathesにマッチするページでjsで指定したファイルをよみこむ」といったものになります。
今回では「 https://qiita.com/ 〜」のページでcontent.jsを読み込むといった記述になります。

3. 読み込ませたいjsファイルを作成

今回は背景色を変更するだけですので、以下のようなファイルを作成すればOKです。

change-qiita-bg / content.js

document.body.style.backgroundColor = 'red';

4. Chrome拡張機能ページで作成した拡張機能を読み込む

chrome://extensions/ にアクセスすると拡張機能ページを開くことができます。
「パッケージ化されていない拡張機能を読み込む」をクリックし、今作成したchange-qiita-bgディレクトリを指定すると拡張機能が追加されます。

以上が全工程になります。manifest.jsonというあまりみかけないものはでてきましたが、それ以外は案外あっさり、といった感じだったのではなかったでしょうか。

もちろんQiitaのページにアクセスするとしっかり背景色が真っ赤になってくれます。

おわりに

いかがだったでしょうか？
今回のようなごく簡単なものであれば、10分足らずでオリジナルの拡張機能を作成できてしまいます。
これを機に「痒い所に手が届く」ような拡張機能を作成してみてもいいかもしれません。