右クリックメニューに「カレンダーに登録」という項目を追加し、クリックされた際に選択中のテキストを取得してGoogleカレンダーの予定作成画面を素早く開く仕組みを構築します。
コード量はわずか20行足らずで、初心者の方でも1行ずつの役割を理解しながら進められます。
連載目次：右クリックでGoogleカレンダー登録するChrome拡張機能の自作
background.jsにおけるイベント処理とURL生成フロー
background.jsの全コード
manifest.json と同じフォルダ内に、background.js というファイルを作成し、以下のコードを記述します。
// 1. 拡張機能の初回読み込み・更新時に右クリックメニューを作成
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "addToGoogleCalendar",
title: "Googleカレンダーに登録: 「%s」",
contexts: ["selection"]
});
});
// 2. 右クリックメニューがクリックされたときの処理
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "addToGoogleCalendar" && info.selectionText) {
const title = encodeURIComponent(info.selectionText.trim());
const calendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}`;
// 新規タブでカレンダー作成画面を開く
chrome.tabs.create({ url: calendarUrl });
}
});コードの詳しい解説
1. 右クリックメニューの登録
chrome.runtime.onInstalled.addListener() は、拡張機能がインストールされたときや、ブラウザの再読み込み時に呼び出されます。
chrome.contextMenus.create の設定ポイント
id：メニュー項目を識別する一意の名前です。title：メニューに表示されるテキストです。%sを含めると、ユーザーが選択している文字列が動的にプレビュー表示されます。contexts: ["selection"]：ここが大きなポイントです。テキストを選択しているときだけ右クリックメニューに表示させます。画像やリンクだけの右クリックでは邪魔にならないスマートな挙動になります。
2. クリックイベントの検知とURL生成
ユーザーが右クリックメニューをクリックすると、chrome.contextMenus.onClicked.addListener が発火します。
クリック処理の流れ
info.selectionTextから、ユーザーが選択したテキストを直接取得します。encodeURIComponent()で日本語やスペース、記号を安全なURL形式に変換します。- Googleカレンダーのイベント作成専用URL（
TEMPLATEアクション）に結合します。 chrome.tabs.create()を呼び出すことで、新しいタブとしてカレンダー画面を瞬時に立ち上げます。
素早い登録を可能にするGoogleカレンダーのURL構造
Googleカレンダーには、Web連携用に以下のようなURLパラメータ仕様が用意されています。
- ベースURL：
https://calendar.google.com/calendar/render?action=TEMPLATE text=：予定のタイトル（件名）
このURLにパラメータを渡して開くだけで、Googleカレンダーの新規予定作成モーダルがすでにタイトル入力済みの状態で開くため、ユーザーは内容を確認して「保存」を押すだけで完了します。
まとめと次回の内容
これで拡張機能に必要なコードの記述がすべて完了しました。ファイルは manifest.json と background.js の2つだけです。
次回は、この自作拡張機能を実際にGoogle Chromeに読み込んで動作確認テストを行う手順と、うまく動かない場合のデバッグ手法を解説します。
