投稿日
Chrome拡張機能「New Tab Countdown Timer」開発記
2026年は「Webアプリやサイトを10個作る！」という目標を掲げ、AIとともに開発を続けています。6つ目は以前から作ってみたかったChrome拡張です！新しいタブを開くたびに目標日へのカウントダウンが表示される「New Tab Countdown Timer」を開発しました。Claudeと協力して仕様策定からコーディング、デザイン、ストア審査までを2週間で完結。予期せぬアカウントトラブルなどの失敗談や教訓を交えつつ、AIを活用したスピーディで楽しい開発のプロセスと、ストア公開の手順を紹介します。
作ったもの
Chrome拡張機能「New Tab Countdown Timer」
Chrome Web Store ｜ GitHubリポジトリー
新しいタブを開くたびに、カウントダウンタイマーが表示される Chrome 拡張機能です。目標日を設定して、テーマを選んで、毎日のモチベーションを高められるはず！
New Tab Countdown Timer の使い方
- Chrome Web Store から拡張機能をインストール
- 新しいタブの右上にある歯車アイコン（⚙）をクリック
- イベントタイトル・目標日・時間（任意）を入力
- テーマを選択
- 保存ボタンを押せばカウントダウン開始
アイデア
5月は5つ目のアプリの開発に挑戦しましたが、派手に挫折！残り2週間くらいで作れるもの、何かないかなーと考えていました。そこで、手軽にできそう、かつ以前から作ってみたかったChrome拡張機能を作ることに。
「もういくつ寝ると〜」と思いながら、イベントを待つのが好き。わくわくするよね！そんなカウントダウンされる画面が毎日新しいタブを開くたびに表示されると嬉しいなーと思って、イベントまでの日数を数える拡張に決定しました。
さっそくClaudeに相談してみたら、ロードマップを描画してくれました！全体図が視覚化されてめちゃくちゃわかりやすい！
クリックしたら詳細を教えてくれます。こんな機能があるんですね…！
ちなみに、未だに最初のアイデア段階だと、私は紙とペンでスケッチスケッチ。やっぱりラフ画を描く時間は楽しいものです。
最初の指示
ざっくりとした仕様書をClaudeに渡し、他に補足する必要はないか添削してもらいます。
最初に用意したプロンプト
# New Tab Countdown Timer
## 画面構成
画面中央にタイトル、残り日数・時間、プログレスバーの順に3段で表示。
- タイトル： font-wight 400, font-size 32px（Default: Your Event in）「in」 は固定。「Your Event」部分がユーザーによって変更可能
- 残り日数・時間：数字は font-wight 600, font-size 120px。 days, hours, minutes を数字に下に配置し、 font-weight 400, font-size 24px
- プログレスバー：コンテンツ幅にあわせて、設定日が0%（左端）、残り時間ゼロで100%（右端いっぱいに広がる）。バーの色は #ddd , 進行中の色は #666
## タイポグラフィ
### Rubik — <https://fonts.google.com/specimen/Rubik>
- Substitute: system-ui, sans-serif
- Weights: 400, 600
- Sizes: 14px, 18px, 24px, 32px, 120px
## 配色
### Light (default)
- background color: #fff
- text color: #333
### Dark
- background color: #000
- text color: #ddd
## 言語
英語
## 設定画面
ユーザーがカウントダウンしたい「目標日」や「タイトル」を自由に変更できるように、設定画面（Optionsページ）を作ります。
入力されたデータを chrome.storage.local（拡張機能用の保存領域）に保存し、新しいタブを開いたときにそのデータを読み込む処理を実装。
### 項目
- Title
- Date
- Time (Optional, default is 0:00)
- Theme (Light or Dark)
このプロンプトを投げたところ、Claudeがブラッシュアップしてより強固で美しい仕様書を作ってくれました！これをそのまま自律型AIコーディングツールの「Claude Code」に投入します。
Claudeが最適化してくれた仕様書
# New Tab Countdown Timer — Chrome Extension
## プロジェクト構成
以下のフォルダ・ファイル構成で実装すること。
countdown-extension/
├── manifest.json
├── background.js
├── newtab/
│ ├── newtab.html
│ ├── newtab.js
│ └── newtab.css
├── options/
│ ├── options.html
│ ├── options.js
│ └── options.css
├── themes/
│ └── themes.css
└── icons/
├── 16.png
├── 48.png
└── 128.png
## manifest.json の設定
- manifest_version: 3
- chrome_url_overrides: newtab → newtab/newtab.html
- options_ui: options/options.html（open_in_tab: false）
- permissions: ["storage"]
- action.default_popup: options/options.html
## 画面構成
画面中央（水平・垂直ともにセンタリング）にタイトル、残り日数・時間、
プログレスバーの順に縦3段で表示。
### タイトル
- 表示形式: "[Your Event] in"（"in" は固定テキスト）
- "Your Event" の部分がユーザー設定で変更可能
- font-weight: 400, font-size: 32px
### 残り日数・時間
- Days / Hours / Minutes の3列を横並びで表示
- 数字: font-weight: 600, font-size: 120px
- ラベル（days, hours, minutes）: 数字の直下、font-weight: 400, font-size: 24px
- Seconds は表示しない
### プログレスバー
- 幅はコンテンツ幅（数字3列の合計幅）に合わせる
- 開始点（0%）: ユーザーが設定を保存した日時
- 終了点（100%）: イベント当日の 0:00（または指定時刻）
- バー背景色: #ddd、進行バー色: #666
- イベント当日を過ぎたら 100% のまま固定表示
### カウントダウン終了後の表示
- タイトル部分を "[Your Event] is here!" に変更
- 数字エリアは非表示
- プログレスバーは 100% のまま表示
## タイポグラフィ
- Font: Rubik（Google Fonts: <https://fonts.google.com/specimen/Rubik）>
- Fallback: system-ui, sans-serif
- Weights: 400, 600
- Sizes: 14px, 18px, 24px, 32px, 120px
## 配色
### Light（デフォルト）
- background-color: #fff
- color: #333
### Dark
- background-color: #000
- color: #ddd
テーマは <body data-theme="light"> / <body data-theme="dark"> で切り替える。
## 言語
すべてのテキストは英語。
## 設定画面（Options ページ）
ツールバーアイコンのクリックでポップアップ表示。
### 入力項目
| 項目 | 型 | 備考 |
|-------|---------|-----------------------------|
| Title | text | プレースホルダー: "Your Event" |
| Date | date | |
| Time | time | 任意。未入力時のデフォルト: 00:00 |
| Theme | radio | Light / Dark |
### データ保存
- chrome.storage.local を使用
- 保存キー: { title, date, time, theme, savedAt }
- savedAt: 設定を保存した日時（ISO 8601 形式）。プログレスバーの起点に使用
- 保存後はすぐに newtab に反映されること（storage.onChanged で監視）
### バリデーション
- Title と Date は必須。空欄では保存できない
- Date は今日以降のみ選択可能（past dates を disabled にする）
## アイコン
icons/ フォルダに 16px・48px・128px のプレースホルダー PNG を生成すること
（単色の正方形で可）
Chrome への読み込み手順
指示を出して少し待つだけで、最初のバージョンがあっという間に完成！さっそくローカル環境で動かしてみます。
- Chrome を開き、アドレスバーに
chrome://extensionsと入力して Enter - 右上の 「デベロッパーモード」 トグルをオンにする
- 左上の 「パッケージ化されていない拡張機能を読み込む」 をクリック
/Users/mana/Projects/countdown-extensionフォルダを選択して 「選択」- 拡張機能が一覧に追加されたことを確認
- 新しいタブを開くと画面が表示される
- ツールバーのアイコンをクリックして設定（タイトル・日付・テーマ）を入力し Save
設定画面からタイトルや日時を選択。
設定した内容なってます！
プログレスバーも動作してる！やったね！
その後、使いやすさを考慮して、設定パネルを画面右上のアイコンからサクッと開けるように仕様を変更しました。 それにしても、久しぶりに生のCSSファイルを見かけた気がします。最近はずっとTailwindCSSばかり使っていたので、逆に新鮮でちょっと楽しかったです。
テーマを追加してデザインをブラッシュアップ
最初は白・黒の2択でしたが、OSの設定にあわせて自動で切り替わる「OS Default」を追加して、こちらをデフォルトに設定しました。
JavaScriptの window.matchMedia('(prefers-color-scheme: dark)').matches でOSのテーマを取得し、Darkなら data-theme="dark"、Lightなら data-theme="light" を body に適用する仕組みです。
さらに、デザイナー心がうずいたのでグラデーションの背景画像も3つ作成！Photoshopでお絵かき感覚で綺麗な色をのせ、仕上げに軽くノイズを加えただけですが、一気に今っぽい雰囲気になりました。設定画面でテーマを選択できます。
ストアに必要な素材を揃える
ここからは公開に向けた準備です。Webデザイナーを目指すみなさんも、ストア公開時のアセット作りはデザインの腕の見せ所ですよ！
アイコン
16x16px、48x48px、128x128px のサイズが必要です。
スクリーンショット
- サイズ：1280×800px（推奨）または 640×400px
- 枚数：最低1枚、最大5枚（できれば5枚用意するのがベスト）
- ファイル形式：JPG または PNG
ストア掲載用画像
任意ですが、検索結果画面に表示する画像も用意しておくと良いですね。
- プロモーション タイル（小）：440x280px
- マーキー プロモーション タイル：1400x560px
スクリーンショットなどのアセット類は、拡張機能の zip ファイルに含める必要はありません。ストアへのアップロード時にブラウザから直接提出するものです。プロジェクトフォルダの混同を避けるため、外側に store-assets/ のような別フォルダを作って管理するのがおすすめ。
プライバシーポリシー
プライバシーポリシーは chrome.storage しか使わないなら簡易なものでよさそう。ファイルを用意するのではなく、Web上で公開している必要があるみたいなので、リポジトリをすでに GitHub に置いているため、同じリポジトリに privacy-policy.md を置いて公開することに。
審査登録
開発者アカウント（$5 の一回払い）を作成し、zip を提出します。…が、ここで今回最大のトラブルが発生しました。みなさんには絶対に同じ踏み台を踏んでほしくないので、注意喚起として共有します！
1. zip ファイルを作る
Chrome拡張に必要なフォルダだけを zip 化します。スクリーンショット画像など、機能に不要なファイルは含めない方がいいみたい。
2. 開発者アカウントを登録する
Chrome Web Store Developer Dashboard にアクセスし、一回限りの $5 の登録料を支払って開発者プロフィールを登録します。
注意！！！本人確認だと思った携帯電話番号の登録は、な、な、なんと！Web Store上にそのまま一般公開されます！！！！！なんだその罠！！！！！法人として登録するなら公開用の固定電話で良いですが、個人開発者の場合は必ず「非取引業者（非トレーダー）アカウント」として登録してください。そうすれば電話番号は公開されません。怖い。やり直しにも時間がかかるみたいなので、本当に気をつけて！！！
私はこの過程で自分の普段使っている携帯電話番号を登録しちゃったため、「一旦アカウントを消してやり直そう♪」と安易に消してしまい、再度登録できなくなっちゃう罠にかかりましたよ…。サポートに問い合わせして、数回のメールでのやり取りの後、5日後にアカウント復旧してもらいました。。ただ、それでも登録した携帯電話番号はそのままなので、前述のとおり「非取引業者アカウント」に設定することでなんとか非表示にできました。
3. zip をアップロードする
ダッシュボードで「新しいアイテム」をクリックし、zip ファイルを選択してアップロードします。manifest と zip の内容が正しければ、次のページで詳細を編集できます。
4. ストア掲載情報を入力する
ダッシュボードにアップロードした拡張機能の情報が表示されます。用意したスクリーンショット、説明文、プライバシーポリシーのURLなどを丁寧に入力していきます。
5. 審査に提出する
すべて入力したら「審査のため送信」をクリック！
ダッシュボードの通知をONにしておくと、ステータスが変わった時にメールが届きます。
審査期間は通常 1〜3営業日。通過すれば自動で公開されます。
もし審査が通らなかった場合
拒否された場合はメールで違反内容と修正方法が通知されます。修正して新しいバージョンをアップロードすれば再申請できます。
よくある却下理由は、権限の過剰申請・説明文が曖昧・プライバシーポリシーのリンク切れの3つだそうです。
無事公開！
私の場合土日含めて3日後に公開されました！ちゃんとインストールできる！嬉しい！よかったら使ってみてくださいね！
時間があれば背景色や画像、文字色をカスタマイズできるようにしたいなぁと思っているところ。
当初作ろうと思っていたTTSがうまくいかなくて、急遽別のものを2週間で作ることにしたので、とってもシンプルなものになりました。が、期限が決まっているからこそ、機能を絞って新しいことに挑戦できたのはいい経験でした。すでに作ったことのあるもの、似ているものを量産するのではなく、常に初めての挑戦を小さく続けていきたいですね。
もしこの記事が「参考になった！」「Chrome拡張作ってみようかな！」と思 absentee の刺激になったら、ぜひ Buy me a coffee からサポートをお願いします！ いただいたコーヒー代は、次なる「Webアプリ10個作るチャレンジ」の作業用エネルギーとして大切に使わせていただきます！ありがとうございます！