Chrome拡張機能のコードを書いたら、実際にChromeへ読み込んで動作確認を行います。開発中は、Chromeの拡張機能管理画面と開発者ツールを使うことで、インストール、更新、デバッグを進められます。
連載第6回では、作成したGoogleカレンダー用ショートカット拡張機能を読み込む手順と、うまく動かないときの確認方法を解説します。
実際に作るときの準備
まず、拡張機能専用のフォルダを1つ作ります。フォルダ名は自由ですが、後から見て分かる名前にしておくと管理しやすくなります。
GoogleCalendarActiveEventFinder/
├─ manifest.json
├─ content.js
└─ styles.css
Windowsで作る場合は、デスクトップやドキュメント内にフォルダを作り、その中に3つのファイルを作成します。拡張子が重要なので、manifest.json.txt のようにならないように注意します。
1. manifest.jsonを作る
最初に、拡張機能の設定ファイルである manifest.json を作ります。ここでは、Googleカレンダーを開いたときだけ content.js と styles.css を読み込むように指定します。
{
"manifest_version": 3,
"name": "Google Calendar Active Event Finder",
"version": "1.0.0",
"description": "Googleカレンダーで z キーを押した時に、直近の予定へフォーカスします。",
"content_scripts": [
{
"matches": [
"*://calendar.google.com/*"
],
"js": [
"content.js"
],
"css": [
"styles.css"
],
"run_at": "document_idle"
}
]
}
この時点で、Chromeは「Googleカレンダーのページでだけ、このJavaScriptとCSSを読み込む」と判断できるようになります。
2. content.jsを作る
次に、実際の処理を書く content.js を作ります。まずは拡張機能が読み込まれているか確認するため、簡単なログから始めると安全です。
(function () {
console.log('Google Calendar Active Event Finder loaded');
window.addEventListener('keydown', function (event) {
if (event.key !== 'z' && event.key !== 'Z') {
return;
}
const activeEl = document.activeElement;
if (
activeEl &&
(
activeEl.tagName === 'INPUT' ||
activeEl.tagName === 'TEXTAREA' ||
activeEl.isContentEditable
)
) {
return;
}
console.log('z key pressed on Google Calendar');
});
})();
ここまで作ると、Googleカレンダー上で z キーを押したときに、開発者ツールのConsoleへログが出るようになります。まずはこの小さな確認を通してから、予定を探す処理を追加していくと原因を切り分けやすくなります。
3. styles.cssを作る
最後に、予定を目立たせるための styles.css を作ります。JavaScript側で対象要素に gcal-shortcut-active-highlight というクラスを付けたとき、枠線や影が表示されるようにします。
.gcal-shortcut-active-highlight {
outline: 3px solid #ff9800 !important;
box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.25) !important;
border-radius: 6px !important;
}
!important は多用しない方がよい指定ですが、Googleカレンダーのように既存のCSSが強いWebアプリでは、拡張機能側のスタイルを確実に当てるために使うことがあります。
拡張機能を読み込む手順
開発中のChrome拡張機能は、Chromeウェブストアに公開しなくても、ローカルフォルダから読み込めます。
- Chromeで
chrome://extensions/を開く - 右上の「デベロッパーモード」をオンにする
- 「パッケージ化されていない拡張機能を読み込む」をクリックする
manifest.jsonが入っているフォルダを選択する- Googleカレンダーを開き、動作を確認する
今回の例では、manifest.json、content.js、styles.css が入っているフォルダを選択します。
コードを変更した後の更新手順
開発中にコードを書き換えた場合、ファイルを保存するだけではChrome側に反映されないことがあります。
変更後は、次の2つを行います。
chrome://extensions/で対象拡張機能の更新ボタンを押す- Googleカレンダーのページを再読み込みする
content.js や styles.css はページに読み込まれるファイルなので、カレンダー側のページ再読み込みも必要です。
開発者ツールで確認する
拡張機能がうまく動かない場合は、Googleカレンダーの画面で開発者ツールを開きます。
Windowsでは F12、または右クリックから「検証」を選択します。その後、「Console」タブを確認します。
content.js に次のようなログを入れておくと、処理がどこまで進んでいるか確認できます。
console.log('Google Calendar Active Event Finder loaded');
console.log('event elements:', eventElements);
console.log('selected target:', target);
予定要素が取得できているか、日付や時刻の解析結果が正しいか、最終的にどの予定が選ばれたかを確認できます。
よくあるトラブル
拡張機能が動かない
まず、manifest.json の matches がGoogleカレンダーのURLに合っているか確認します。
"matches": [
"*://calendar.google.com/*"
]
対象URLが違っていると、content.js 自体が読み込まれません。
変更が反映されない
拡張機能管理画面で更新ボタンを押し、Googleカレンダー側も再読み込みします。どちらか片方だけでは古いコードが残ることがあります。
zキーを押しても反応しない
入力欄や検索ボックスにフォーカスがある場合は、誤作動防止のため処理をスキップしている可能性があります。カレンダーの空白部分をクリックしてから、もう一度 z キーを押して確認します。
予定が見つからない
Googleカレンダーの表示形式や画面状態によって、予定要素の属性や aria-label の内容が変わる場合があります。コンソールに取得した要素やラベルを出力し、正規表現が現在の表示に合っているか確認します。
ローカルフォルダの注意点
デベロッパーモードで読み込んだ拡張機能は、PC上のローカルフォルダを直接参照して動作します。
そのため、拡張機能のフォルダを削除したり移動したりすると、Chromeから読み込めなくなります。フォルダを移動したい場合は、古い拡張機能を一度削除し、移動先のフォルダから再度読み込みます。
公開前に確認したいこと
自分だけで使う拡張機能でも、最低限次の点を確認しておくと安心です。
- 対象サイト以外で動作しないか
- 入力欄でショートカットが誤作動しないか
- コンソールにエラーが出ていないか
- ページ再読み込み後も動作するか
- Googleカレンダーの表示形式を変えても大きく崩れないか
まとめ
第6回では、Chrome拡張機能をローカルから読み込む方法、コード変更後の更新手順、開発者ツールを使ったデバッグ方法を解説しました。
今回の連載では、Googleカレンダー上で z キーを押すと直近の予定へフォーカスする拡張機能を題材に、manifest.json、Content Scripts、DOM解析、予定選択ロジック、インストールとデバッグまでを確認しました。
小さな拡張機能でも、対象URLを絞る、入力中の誤作動を防ぐ、DOM構造の変化に備える、といった考え方を押さえておくと、実用的なChrome拡張機能を作りやすくなります。
