ウェブブラウザGoogle Chromeの拡張機能はウェブストアに公開せずとも、自分のブラウザのみであれば独自に作成したものを利用することができます。
この記事では2つのサンプルを交えてChrome拡張機能の作り方を解説します。
サンプル1（Google検索画面の背景色を変える拡張機能）
必要なファイル
まず適当な名前でディレクトを作ってその中に以下2つのファイルを作成します。
- manifest.json
- style.css
manifest.json
拡張機能の名前や使用するファイルのパス等を記述します。
今回は下記のように作成しました。
{
"name": "Google search redder", // 拡張機能の名前
"version": "1.0", // バージョン
"manifest_version": 3, // マニフェストのバージョン。最新バージョンは3です。
"description": "Google検索画面の背景を赤に変更する", // 説明文
"content_scripts": [
{
"matches": ["https://www.google.com/search*"], // どのURLでファイルを読み込むか。正規表現が使えます。
"css": ["styles.css"] // 読み込むCSSファイルのパス
}
]
}
style.css
bodyの背景色を赤に変更。上書きしたいので!importantを付与しています。
body {
background-color: red !important;
}
以上でファイルの作成は完了です。
拡張機能の読み込み
最後に作成した拡張機能をChromeに読み込みます。
まずブラウザのアドレスバーにchrome://extensions/と打ち込み、拡張機能の管理画面に移動します。
すると右上に「デベロッパーモード」というトグルスイッチがあるのでONにします。
すると今度は左上に「パッケージ化されていない拡張機能を読み込む」というボタンがありますのでそれをクリックして先ほど作成した拡張機能のディレクトリを選択します。
下記のように作成した拡張機能が表示されれば読み込み完了です。
動作確認
最後に拡張機能が動作するか確認するためにGooogleで適当に検索し、背景色が赤に変わっていればOKです。
サンプル2（クリックでアラートを表示する拡張機能）
必要なファイル
サンプル1と同様、適当な名前でディレクトを作ってその中に以下2つのファイルを作成します。
- manifest.json
- background.js
manifest.json
{
"name": "Alert",
"version": "1.0",
"manifest_version": 3,
"description": "iconクリックでアラートを表示する",
"action": {}, // マニフェストバージョン2まではpage_actionとbrowser_actionに分かれていたがバージョン3からactionに統合された。ポップアップでHTMLを表示させたい時などに使用する。
"permissions": ["activeTab", "scripting"], // 使用するAPI
"background": {
"service_worker": "background.js" // jsのパス。manifest.jsonと同じ階層に作成すること。
}
}
background.js
const showAlert = () => {
alert('Hi');
};
chrome.action.onClicked.addListener((tab) => { // クリックイベント
chrome.scripting.executeScript({
target: { tabId: tab.id }, // 現在開いているタブを指定
function: showAlert, // 実行する関数名
});
});
以上でファイルの作成は完了しましたので、サンプル1の時と同様に拡張機能を読み込みましょう。
動作確認
適当なページを開いて右上のExtensionアイコンから作成した拡張機能をクリックします。
Hiとアラートが表示されたら成功です。
