日付のテキストからGoogleカレンダーに予定を登録できるChrome拡張機能を作った

何を作ったか

今回、以下のChrome拡張機能を作成しました。
https://chromewebstore.google.com/detail/google-calendar-quick-add/nfjgfiefpjgdaocehhmegfnokjniemjm?hl=ja

使い方

1. 予定を含むテキストを選択し、右クリック
2. 表示されたメニューから「Googleカレンダーに追加」をクリック
3. Googleカレンダーの予定作成ページが開くので、確認して保存

なぜ作ったか

メールやメッセージの日付から、いちいちGoogleカレンダーに登録するのが面倒に思っていました。
特に転職活動中、企業から来るメールや採用サイトのメッセージから、面談や面接の日程をGoogleカレンダーに登録する作業を何十回とやりました。
一度、時間を間違えて登録してしまい、予定直前になって焦った経験もあります。

テキストから、ワンタッチでカレンダーに登録できないかなあ。。。

まずは、Chromeウェブストアで、誰かが作ったChrome拡張機能がないか探してみました。

実はテキストからGoogleカレンダーに登録するChrome拡張機能はたくさんあります。
https://chromewebstore.google.com/detail/save-to-google-calendar/jpoefccfjpcdglbnjfhomifadledaodm?hl=ja
https://chromewebstore.google.com/detail/add-to-calendar/jnbpajadakhkpcncmbfhkgaaoioofkfd?hl=ja
https://chromewebstore.google.com/detail/rip-quick-add/einookkhlkagdckkngcebldmicpilpmk?hl=ja

しかし、日本語の日付表記（2025/4/1,2025年4月1日,15時...）に対応しているものはほとんどありませんでした。
たしかに日付表記は言語によってかなり違ってやっかいです。
例えば英語だと、Jul 1st 2025, 6/10/2025などのように表記します。

そこで、自分で作ろう！ と思い立ちました。

どうやって作ったか

作成したChrome拡張機能のソースコードは以下に置いています。

https://github.com/koji520/calendar-quick-add

使用したリポジトリテンプレート

chrome-extension-typescript-starterというリポジトリテンプレートを利用しました。
TypeScriptが使え、Jestによるテストも書け、コマンド一つでビルドできるので、大変助かりました。

https://github.com/chibat/chrome-extension-typescript-starter

マニフェストファイル

Chrome拡張機能に欠かせないのが、マニフェストファイル（manifest.json）です。

マニフェストファイルの詳しい説明は以下などを参照ください。

https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja

今回作成したマニフェストファイルは以下です。

https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/public/manifest.json#L1-L21

最低限必須な項目

最低限必須な項目（マニフェストのバージョン、名前、説明、バージョン、アイコン）を書きます。

https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/public/manifest.json#L2-L12

background

contextMenuからアイテムが選択された際のイベントリスナーを記述すべく、js/background.jsを指定しています。
https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/public/manifest.json#L14-L16

permissions

Chrome上のAPIや機能にアクセスするために、拡張機能に権限を付与する必要があります。

右クリックでメニュー（contextMenu）を開きたいので、permissionsにcontextMenusを追加しました。
https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/public/manifest.json#L18-L20

テキストから日付を抽出する処理

昨今だと、AIを使う方法もあると考えられますが、以下のような理由で見送りました。

• サーバーやAI SaaSの利用料を発生させたくない
• アウトプットが安定するか分からない
• フロントエンドでAIモデル動かすのも、重くなりそう

そのため、今回は（トラディショナルな？）正規表現を用いることにしました。

作成した正規表現は以下です。

https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/src/extract.ts#L5-L9

この正規表現によって以下のような日付のテキストをパースすることができます。

2025/03/10 14:30
7/4 18:00
3月10日 9時15分
2024年5月20日

Google カレンダーへ登録するURLを開く処理

Googleカレンダーへの予定登録は、予定登録用URLを開くことで簡単に実施できます。

例えば、

• タイトル：ミーティング
• 日時：2025年4月1日10:00～2025年4月1日11:00

の予定であれば、以下のURLを開けば、Googleカレンダーの予定追加画面に遷移し、初期値がセットされます。

https://calendar.google.com/calendar/r/eventedit?text=ミーティング&dates=20250401T100000/20250401T110000

URLを開くとGoogleカレンダーの予定登録画面に遷移する

タイトルや日時以外も、場所や詳細などをクエリパラメータに追加していくことで初期値としてセットすることができます。
詳しくは、以下などの記事を参考にしてください。
https://qiita.com/yuta_sawamura/items/738732565e2cfd11fb23

今回作成したChrome拡張機能でのコードは以下のあたりです。
https://github.com/koji520/calendar-quick-add/blob/fb1d19bf521383ecab4594bd50429f1cae6ace13/src/background.ts#L18-L27

Chrome ウェブストアへの一般公開

せっかくなのでChromeウェブストアへ一般公開しました。
以下のような手順です。

1. デベロッパー登録をする（登録料$5）
2. ストアの掲載情報を設定する
3. 審査の申請をして待つ
4. 審査が完了したら公開

手順の詳細はネット上に多くの記事を公開されているので、そちらを参照ください。

https://www.endorphinbath.com/chrome-extension-publishing-process/

今後の展望

一番は自分が使うものとして開発したので、自分が使いやすいように改良していきたいです。

例えば、以下を考えています。

• 対応する日付フォーマットを増やす
  • 年号（令和, 平成）
  • 全角数字（２０２５年３月１６日）
  • 英語の日付（Jul 1st 2025, 6/10/2025）
• Outlookカレンダーへ送信できるようにする

おわりに

私は今回はじめてChrome拡張機能を作ってみましたが、Webアプリやスマホアプリと比べ気にすることが少ないので、短い時間で、簡単に作ることができました。

自分が使うために開発しましたが、割と便利だと思うので、よければ皆さんも使ってもらえると嬉しいです。

再度、今回作成したChrome拡張機能を貼っておきます。↓
https://chromewebstore.google.com/detail/google-calendar-quick-add/nfjgfiefpjgdaocehhmegfnokjniemjm?hl=ja