こんにちは。

先日の記事でも紹介しましたが、
最近、Chrome拡張機能を作ってます。

【Chrome拡張機能】タイマーを作ってみた

タイマーの実装にあたって、いくつかつまづいた点もあったので、記事にしてゆきます！

実装したソースコードがみれればいい！
って方は、

GitHubに、最新のコードがありますので、
そちらもぜひご参照ください。

▼GitHub
https://github.com/cancaodosol/tick-tock-task

この記事で扱うこと（要点）

• Manifest V3 の準備（必要な権限・Service Worker）
• chrome.alarms の使い方（作成・受信・削除）
• アラームと併用する API（通知、UIとの通信）
• よくある落とし穴と回避法

1. なぜ通常の setTimeout ではダメなのか

いきなりですが、地味に解決に時間がかかったポイント。

はじめ開発したときは、setTimeout / setInterval を使ってタイマー実装をしましたが、うまくいきませんでした。
この実装では、設定したタイマーが別ウィンドウで作業をしていると消えてしまうんですよね。

原因は、Chrome拡張（Manifest V3）でのバックグラウンド処理は、ブラウザが非アクティブ時に自動停止されることにありました。

このバックグラウンド処理は、Service Workerと呼ばれるところで行われるのですが、
ここでのwait処理では、長時間のタイマー処理は期待通り動作しません。

そのため、拡張ではブラウザ提供の恒常的なスケジューリングAPIである chrome.alarms を使う必要があります。

これにより、ブラウザ側でアラームを管理し、トリガー時に Service Worker を起動して処理を行えます。

「5分測りたいタイマー」＝「5分後の時刻に鳴るアラーム」としてつくっていきます。

2. Manifest V3 の設定（必須）

まず manifest.json に必要な権限と Service Worker のエントリを用意します。

アラーム・通知・保存を使う場合の最小例は次の通りです。

{
  "manifest_version": 3,
  "name": "My Alarm Extension",
  "version": "1.0",
  "permissions": [
    "alarms",
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

• “alarms” 権限：chrome.alarms を使用するために必須。
• “notifications”：ユーザーへのシステム通知を出すなら必要。

3. アラームの作成（ユーザー操作側）

アラームの作成によって、タイマー機能をつくります。

例：5分後にアラームを作る

// popup.js（UI側）
const minutes = 5; // ユーザー入力
chrome.alarms.create('myAlarm', { when : Date.now() + Number(minutes) * 60000 });

「5分測りたいタイマー」＝「5分後の時刻に鳴るアラーム」として設定を行います。

ユーザーが何分後・何時に通知したいかを指定してアラームを作る処理は、Popup や Side Panel（UI）側で行います。

UI側から Service Worker に直接触らず、API を通じてアラームを作成します。

4. アラーム受信と処理（Service Worker 側）

実行の中心は background.js（Service Worker）です。

アラーム発火時は Service Worker が起動され、chrome.alarms.onAlarm イベントが呼ばれます。

// background.js
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'myAlarm') {
    // 必要な処理：通知、データ更新、外部API呼び出しなど
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icon.png',
      title: 'リマインダー',
      message: 'そろそろタスクの時間です！'
    });
  }
});

ポイント：

• UI（popup/page）のスクリプトは直接アラームイベントを受けられない。必ず Service Worker で受ける。
• Service Worker は短時間で終了するので、重い処理を行う場合は注意（非同期処理は Promise を返す/待つなど）。

5. よくある落とし穴と対処法

6. まとめ

Chrome拡張で安定してアラームを扱うには、chrome.alarms を中心に設計するのが鉄則です。Manifest V3 の Service Worker の性質を踏まえ、通知（chrome.notifications）、UIとのメッセージング（chrome.runtime.sendMessage）を組み合わせることで、堅牢で実用的なアラーム機能を実装できます。