目次
Chrome拡張機能とは？
Chrome拡張機能は、Google Chromeの機能を拡張・自動化できる小さなプログラムです。たとえば、広告ブロック、ページ翻訳、タブの整理、自作の便利ツールなどが該当します。自分で作ることで、作業効率の向上や自分好みのブラウジング体験が可能になります。
開発に必要なもの
初心者でも簡単に始められます。以下が最低限必要なものです。
- Google Chrome（最新版）
- テキストエディタ（VS Code など）
- HTML / CSS / JavaScript の基礎知識
拡張機能のフォルダ構成
以下のような構成にします。
cssコピーする編集するmy-extension/
├── manifest.json
├── popup.html
├── popup.js
├── background.js
└── icon.png（任意）
manifest.jsonの作成
拡張機能の基本設定を記述するファイルです。
jsonコピーする編集する{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "これは最初のChrome拡張機能です。",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png"
}
},
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"icons": {
"16": "icon.png"
}
}
重要なのは、manifest_version を「3」に設定することです。これは最新のChrome拡張機能の仕様に対応しています。
popup.htmlの作成
ポップアップ画面のHTMLを作成します。以下のように構成します。
htmlコピーする編集する<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Extension</title>
<script src="popup.js" defer></script>
</head>
<body>
<h1>こんにちは！</h1>
<button id="click-me">クリック</button>
</body>
</html>
文字化けを防ぐため、<meta charset="UTF-8"> を必ず <head> に含めましょう。
popup.jsの作成
JavaScriptでボタンに動きをつけます。
javascriptコピーする編集するdocument.getElementById("click-me").addEventListener("click", () => {
alert("ボタンがクリックされました！");
});
background.jsの作成
拡張機能のインストール時やバックグラウンド処理を行うためのファイルです。
javascriptコピーする編集するchrome.runtime.onInstalled.addListener(() => {
console.log("拡張機能がインストールされました！");
});
Chromeに拡張機能を読み込む方法
- Chromeで「chrome://extensions/」にアクセス
- 右上の「デベロッパーモード」をONにする
- 「パッケージ化されていない拡張機能を読み込む」をクリック
- 作成したフォルダを選択する
その後、拡張機能アイコンをクリックし、ポップアップが表示されれば成功です。
よくあるトラブルと対策
ポップアップが表示されない場合は、以下を確認しましょう。
- manifest.json に
"default_popup"が正しく書かれているか - popup.html のファイル名が一致しているか
- popup.html に
<meta charset="UTF-8">を記述しているか - HTMLファイルが UTF-8 で保存されているか（エディタで確認）
次にやると良いこと
拡張機能の基礎が理解できたら、以下の機能を追加してみましょう。
- chrome.tabs を使って現在のページURLを取得
- chrome.storage を使ってデータを保存
- content_scripts でページ上に要素を追加
- 複数のパーミッションを組み合わせて高機能化
まとめ
Chrome拡張機能は、自分の作業を便利にしたり、ブラウザを自分仕様にカスタマイズしたりできるとても強力なツールです。最初は簡単なポップアップから始めて、徐々に機能を追加していきましょう。
「自分だけのツールを作れる」って、とても楽しいですよ！
