私の夢の Google Chrome 拡張機能は存在しなかったので、Claude でバイブコーディングしました

私は自分自身を先延ばしの専門家だと思っています。長年にわたり、私はこの問題を解決するために不足のないツールやテクニックを試してきました。ポモドーロ タイマー、気が散るブロッカー、ミニマリストのライティング アプリ。それらのほとんどは適切に設計されており、主張どおりの機能を果たします。時間を追跡し、集中力を高めるのに役立ちます。彼らがしないのはそれを強制することです。

これらのツールのほぼすべては、一度タイマーを開始したら必ず実行するという同じ前提に基づいています。新しいタブを開いたり、通知を確認したり、「もう 1 つだけ」という罠に陥ったりすることがなくなります。実際には、それははるかに困難です。注意が逸れた瞬間、ツールは対応することができません。そこで、既存の生産性向上ツールを使い続ける代わりに、欠けていると感じた 1 つの機能を構築することにしました。

集中力を高めるポモドーロタイマー

もはや単なるタイマーではなく、フォーカスアシスタントです

クレジット: Adam Davidson / How-To Geek |チャットGPT

コンセプトは単純です。ポモドーロ タイマーは、フォーカス セッションを測定するだけでなく、フォーカス セッション中のブラウザの動作も制御します。

この拡張機能では、すべてのセッションを同じように扱うのではなく、異なる「集中レベル」が導入されます。各レベルはセッションがどの程度厳密であるべきかを反映し、ブラウザはそれに応じて応答します。より緩和されたモードでは、タブの切り替えが制限なく許可される場合があります。より厳密なモードでは、現在のタブから離れようとしたときに拡張機能が警告を発したり、アクションを完全に阻止したりすることができます。

自分の意志の力がいかに「大きい」かが分かります。したがって、重要なアイデアは、気を散らす瞬間から規律の負担を移すことです。セッション中に意志の力に頼るのではなく、どの程度の柔軟性が必要かについて事前に決定し、延長によってその決定が強制されます。

プロジェクトの範囲を定義する

機能をマインドマップする

このようなプロジェクトで犯しやすい間違いの 1 つは、最初からオーバーエンジニアリングしてしまうことです。使用状況分析、デバイス間同期、またはより複雑なインターフェイスなどの機能を追加するのは簡単です。その代わりに、意図的に範囲を狭くしました。

最初のバージョンの目標は、単にアイデアを検証することです。つまり、機能するポモドーロ タイマー、集中レベルの選択方法、タブの切り替えを検出する機能、およびこれらのルールの基本的な適用など、コア機能の小さなセットに焦点を当てることを意味します。これらの部分が確実に連携すれば、拡張機能はすでに役に立ちます。それ以上のものは後で重ねて追加できます。

Claude とのバイブコーディング

信頼できるプログラミング仲間が活躍中

クレジット: Anthropic

拡張機能全体を手動で記述するのではなく、AI 支援開発の実験としてこれに取り組みました。

ワークフローは意図的にシンプルになっています。私はプロジェクトを明確に定義された小さなステップに分割し、クロードに各部分のコードを生成するよう促します。その後、コードをローカルで実行し、動作をテストし、必要に応じて調整を加えます。

基本から始める

タイマーやフォーカス ルールを追加する前に、最初のステップは Chrome 拡張機能を実行することです。つまり、有効なマニフェスト ファイルを設定し、ブラウザに拡張機能をロードし、基本的なインターフェイスを表示できることを確認します。それは小さな一歩ですが、重要な一歩です。基盤が整ったら、実際の機能の階層化を開始できます。

物事を予測しやすくするために、私はクロードに非常に具体的なプロンプトを与えました。適切に作成されたプロンプトを作成することは、バイブコーディングにとって重要な知識です。

Create a minimal Chrome extension using Manifest V3.

Requirements:
- Include a valid manifest.json file
- Add a simple popup UI (popup.html)
- The popup should display a title: "Pomodoro Tab"
- Include a short placeholder text below the title: "Extension loaded successfully"
- Keep the structure simple and clean
- No external libraries or frameworks
- Use plain HTML, CSS, and JavaScript only
- Organize files clearly (manifest.json, popup.html, optional popup.js)

Make sure the extension can be loaded into Chrome without errors.

予想どおり、クロードは 3 つの異なるファイルを私にくれました。最も驚いたのはポップアップ UI です。クロードは、必要最小限の HTML ファイルの代わりに、カスタム フォント、カラー パレット、微妙なアニメーション、小さな視覚的アイデンティティ (トマトのアイコンを含む) を備えた、完全にスタイル設定されたインターフェイスを生成しました。

ポモドーロタイマーの追加

拡張機能が正しく読み込まれたら、次のステップはそれを機能させることです。

この段階での目標は、完全なエクスペリエンスを構築することではなく、核となるメカニズム、つまり動作するポモドーロ タイマーを導入することです。つまり、カウントダウン、基本的なコントロール、および作業セッションと休憩セッションを切り替える方法が追加されます。

すでにポップアップ UI があるので、ここでの作業は、既存のものを壊さずにそれを拡張することです。今回は、プロンプトをより慎重にする必要があります。クロードにタイマーを「作成」するよう依頼するのではなく、次のことを依頼しています。

• 既存のファイルを操作する

• 慎重に変更してください

• 現在の UI をそのまま維持する

• 上部のレイヤー機能

プロンプトは次のとおりです。

You are working on an existing Chrome extension project called "Pomodoro Tab".

The project already includes:
- manifest.json (Manifest V3, correctly configured)
- popup.html (UI already styled and working)
- popup.js (basic script with a small animation)

Your task is to EXTEND the existing codebase by adding a basic Pomodoro timer.

Do NOT rewrite everything from scratch. Modify and build on top of the existing files.

Requirements:

1. Timer functionality:
- Add a countdown timer (default: 25 minutes for work, 5 minutes for break)
- Display the remaining time clearly in the popup (MM:SS format)
- Include a "Start" button and a "Reset" button
- When the timer ends, automatically switch between work and break sessions

2. UI updates:
- Integrate the timer display into the existing popup.html
- Keep the current design and styling intact as much as possible
- Add buttons in a clean and minimal way (no heavy redesign)

3. JavaScript logic:
- Add timer logic inside popup.js (or split into a new file if clearly needed)
- Use setInterval or similar approach for countdown
- Ensure the timer updates the UI in real time
- Handle start, reset, and session switching cleanly

4. Code quality:
- Keep the code simple and readable
- Do not introduce unnecessary complexity
- No external libraries or frameworks

5. Output format:
- Show the FULL updated code for:
  - popup.html
  - popup.js
- Only include manifest.json if changes are required (otherwise leave it unchanged)

The result should be a working Pomodoro timer inside the existing extension popup.

クロードは素晴らしい出力を生成しました。これで、25 分のタイマーで開始し、一時停止し、リセットできる機能的なポモドーロ タイマーができました。タイマーを開始した後、拡張機能を閉じたりタブを切り替えたりするとタイマーが停止し、再起動する必要があるという問題がありました。フォローアップのプロンプトを表示してこのことをクロードに説明したところ、問題は解決されました。

タブ切り替えの検出

信頼性の高いタイマーを設定したら、次のステップはユーザーの行動を観察することです。具体的には、ユーザーがいつタブを切り替えたかを知る必要があります。動作は単純です。

• タイマー動作中、ハードモード有効時

• タブを切り替えようとすると

• ブラウザはすぐに元のタブに強制的に戻されます

私が使用したプロンプトは次のとおりです。

You are working on an existing Chrome extension called "Pomodoro Tab".

Current architecture:
- background.js handles all timer logic and state using chrome.storage and chrome.alarms
- popup.js is a UI layer that communicates with background.js
- Timer persists correctly even when popup is closed

Your task is to EXTEND the project by adding a "Hard Mode" that prevents tab switching during an active session.

Do NOT rewrite existing code. Build on top of it.

Requirements:

1. Hard Mode Toggle (UI):
- Add a checkbox or toggle in popup.html labeled "Hard Mode"
- When enabled, store this setting in chrome.storage
- Default should be OFF

2. Track the active "focus tab":
- When the user starts the timer, store the current active tab ID as the "locked" tab

3. Enforce tab locking:
- In background.js, listen to chrome.tabs.onActivated
- If:
  - timer is running AND
  - hard mode is enabled AND
  - user switches to a different tab
- Then immediately switch them back to the locked tab using chrome.tabs.update

4. Edge cases:
- If the locked tab is closed, disable enforcement gracefully
- Do not crash or spam errors

5. Code structure:
- Keep logic inside background.js
- Keep popup.js focused on UI and messaging
- Use chrome.storage for persistence

6. Permissions:
- Add only necessary permissions (e.g., "tabs")

7. Output:
- Show updated:
  - popup.html
  - popup.js (if changed)
  - background.js
  - manifest.json (if changed)

Goal:
When Hard Mode is enabled and the timer is running, the user should not be able to leave the original tab.

ハード モードの実装は、予想よりも簡単ではないことが判明しました。机上では、アイデアは単純です。タブの切り替えを検出し、すぐに元に戻ります。実際には、状態管理、タブのコンテキスト、タイミングなど、いくつかの変動部分があります。すべてが正しく並ぶ必要があります。

クロードが生成した最初のバージョンはまったく機能しませんでした。 2 番目の動作は一貫性がありませんでした。数回繰り返した後でのみ、確実に動作するようになりました。

シンプルかつ強力な生産性向上ツール

生産性向上ツールのほとんどは、集中力を維持できるように設計されています。しかし、この製品をバイブコーディングしたとき、私はそうしないだろうと思っていました。クロードを使用して構築すると、全体的にはうまくいきましたが、途中でいくつかの落とし穴がありました。完全なコードは私の GitHub にあります。