Google Chrome拡張機能の作り方

2021.08.11

ウェブブラウザGoogle Chromeの拡張機能はウェブストアに公開せずとも、自分のブラウザのみであれば独自に作成したものを利用することができます。

この記事では2つのサンプルを交えてChrome拡張機能の作り方を解説します。

サンプル1（Google検索画面の背景色を変える拡張機能）

まず適当な名前でディレクトを作ってその中に以下2つのファイルを作成します。

拡張機能の名前や使用するファイルのパス等を記述します。今回は下記のように作成しました。

bodyの背景色を赤に変更。上書きしたいので!importantを付与しています。

以上でファイルの作成は完了です。

最後に作成した拡張機能をChromeに読み込みます。

まずブラウザのアドレスバーにchrome://extensions/と打ち込み、拡張機能の管理画面に移動します。すると右上に「デベロッパーモード」というトグルスイッチがあるのでONにします。

すると今度は左上に「パッケージ化されていない拡張機能を読み込む」というボタンがありますのでそれをクリックして先ほど作成した拡張機能のディレクトリを選択します。

下記のように作成した拡張機能が表示されれば読み込み完了です。

最後に拡張機能が動作するか確認するためにGooogleで適当に検索し、背景色が赤に変わっていればOKです。

サンプル1と同様、適当な名前でディレクトを作ってその中に以下2つのファイルを作成します。

以上でファイルの作成は完了しましたので、サンプル1の時と同様に拡張機能を読み込みましょう。

適当なページを開いて右上のExtensionアイコンから作成した拡張機能をクリックします。

Hiとアラートが表示されたら成功です。