はじめに

どうも、資格取得に向け日々勉強中のかめのひと歩きです！

集中したいときに便利なポモドーロテクニック。

25分作業して、5分休憩する。シンプルですが、やってみると意外と集中しやすくて、私も作業中によく使っています。

ただ、既存のポモドーロアプリを使っているうちに、「これ、自分で作れたら楽しそうだな」と思うようになりました。

せっかく作るなら、ただのタイマーではなく、

  • Chrome拡張機能として動く
  • 作業履歴を保存できる
  • AWSと連携して少しだけ“ちゃんとしたアプリ感”を出す

    そんな形にしてみることにしました。

    今回は、Chrome拡張機能 × AWS AppSync × DynamoDB で、ポモドーロタイマーを作った話を書いていきます。

    作ったもの

    今回作ったのは、シンプルなポモドーロタイマー拡張機能です。

    • ポップアップでタイマーを開始・リセット
    • 作業中は残り時間を表示
    • 設定画面、詳細画面あり
    • セッション完了時に履歴を保存

    拡張機能の良さは、常にブラウザに置いておけることです。別タブでWebアプリを開くより、ツールバーからすぐ開けるほうが手軽ですし、集中タイマーとの相性もいいです。今回は「ポモドーロタイマーを作る」よりも、Chrome拡張機能としてどう組むかを試したい気持ちのほうが強めでした。

    全体の構成

    ざっくりした構成はこんな感じです。

    [Chrome Extension]
    ├── Popup ← タイマーUI
    ├── Background SW ← タイマー管理
    ├── Details Page ← 履歴・統計表示
    └── Settings Page ← 設定画面

    [AWS]
    ├── AppSync
    └── DynamoDB
    　　　　├── Sessions
    　　　　└── UserSettings

    Popup がタイマーUI、Background が裏側の処理、Details と Settings は補助ページという分け方にしました。

    また、Chrome拡張機能側でタイマーを動かし、セッションが終わったタイミングでAppSync経由でDynamoDBに履歴を保存する形です。

    Chrome拡張機能の土台を作る

    まずは作業用のフォルダを1つ作り、その中に Chrome拡張機能のファイルを配置していきました。

    今回は manifest.json を起点にして、popup.html、popup.js、background.js などを用意しています。

    pomodoro-timer/
　├── manifest.json
　├── popup.html
　├── popup.js
　├── background.js
　├── settings.html
　├── settings.js
　├── details.html
　├── details.js
　└── aws.js
    Chrome拡張機能は、まずこのようなファイル一式をディレクトリにまとめて作っておき、あとから Chrome に読み込ませて動かします。

    そのうえで、manifest.json に action.default_popup や background.service_worker、必要な permissions を定義して、Popup と Background の役割を分けました。全タブに処理を入れるために host_permissions も追加しています。

    {
　"manifest_version": 3,
　"name": "Pomodoro Timer",
　"version": "1.0.0",
　"action": {
　　"default_popup": "popup.html"
　},
　"background": {
　　"service_worker": "background.js"
　}
}

    特にポイントだったのは、background が service worker になることです。

    参考☞https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ja

    タイマーを動かす仕組みを作る

    タイマーの状態管理は background.js 側で行っています。

    ポップアップを閉じてもタイマーが止まらないように、状態は chrome.storage.local に保存し、ポップアップを開いたときに現在状態を読み込んで表示する形にしました。

    この構成にしておくと、Popup は表示と操作に専念できるので、作りがすっきりしました。ポップアップUIも、表示領域が狭いため、残り時間や操作ボタンなど必要な情報だけに絞っています。

    拡張機能らしい機能を追加する

    全タブのタイトルに残り時間を出す機能も入れてみました。

    [23:45] ブログの構成を考えた

    のように表示されるので、別タブを見ていても残り時間を意識しやすくなります。※「実際に試してみた」の項目にのせています。

    ここでは chrome.scripting.executeScript を使っていて、MV3 前提で実装を合わせる必要がありました。

    AWS連携を追加する

    バックエンドは AppSync と DynamoDB の組み合わせにしました。

    個人開発で扱いやすく、サーバーを立てずにデータ保存の流れを作れるのが大きな理由です。今回は GraphQL API → DynamoDB の直結に近い形で、セッション履歴を保存するようにしました。

    Chromeに読み込んで確認する

    最後に、作成したフォルダを Chrome の拡張機能管理画面から読み込んで動作確認しました。

    chrome://extensionsを開いてデベロッパーモードを有効にし、「パッケージ化されていない拡張機能を読み込む」 から対象フォルダを選ぶと、ローカルでそのまま試せます。

    実際に試してみた

    URLバー横の拡張機能ボタンを押して表示してみます。
    いい感じですね！

    実際に使った後、DynamoDBのテーブルを確認すると、セッションデータが実際にクラウドに保存されているかどうかが分かります。

    拡張機能 → AppSync → DynamoDB の連携が正しく動いていることが確認できました！

    まとめ

    今回は、ポモドーロタイマーを Chrome拡張機能として作ってみました。

    作業用フォルダを作って manifest.json を起点に構成を用意し、background.js でタイマーの状態を管理しながら、Popup は表示と操作に絞る形で組み立てました。さらに、タブタイトル更新や AWS 連携も加えることで、シンプルながら拡張機能らしい形にできたと思います。

    特に、Manifest V3 を前提に構成を考えたり、Popup と Background の役割を分けたりと、ただタイマーを作るだけではなく、Chrome拡張機能として実装する流れを一通り試せたのがよかったです。

    おわりに

    最初は小さめのタイマーを作るつもりでしたが、実際に進めてみると、Chrome拡張機能ならではの考え方や作り方が多くあって、思っていた以上に学びが多い題材でした。

    Chrome公式の Hello World を入り口にしながら、自分がほしい機能を少しずつ足していく流れはとても進めやすく、拡張機能の学習用としてもちょうどよかったです。

    今回は実装しませんでしたが、履歴表示や設定まわりをもう少し整えて、さらに使いやすくしていきたいと思っています。

    参考

    Chrome for Developers: Hello World 拡張機能
    https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ja

    AWS Documentation: Amazon Quick ブラウザ拡張機能
    https://docs.aws.amazon.com/ja_jp/quick/latest/userguide/browser-extension-user-guide.html