AI Homepageの仕組み
AI Homepageは、ChromeまたはChromiumの新しいタブページを、実際に閲覧したウェブサイトをもとに生成したホームページへ置き換えます。エージェントは閲覧履歴のランキング概要を確認し、ログイン済みのブラウザで関連性の高いページを最大8件開いて内容を分析し、新しいReactベースのページを作成します。
生成されるページは、朝刊、落ち着いた読書リスト、情報量の多い仕事用ダッシュボードなど、指定したほぼあらゆるスタイルにできます。ホームページはバックグラウンドで再構築されるため、新しいタブを開くと最近読んだ内容を反映できます。
生成されたリンクはすべて、エージェントが実際に読んだページに由来します。エージェントにはURLを捏造しないよう指示されており、開けないページは黙って省略せず、その旨を報告します。
始める前に
以下が必要です。
- ChromeまたはChromiumベースのブラウザ
- Node.js 20以降
- Anthropic APIキー
AI Homepageは、独自のAPIキーで実行することを想定した初期段階の実験的プロジェクトです。インストールする前に、プライバシーとセキュリティへの影響を確認してください。
拡張機能をインストールする
- リポジトリをクローンして、そのディレクトリに移動します。
git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab- 依存関係をインストールし、指定されたpnpmバージョンで拡張機能をビルドします。
npx pnpm@10.11.1 install
npx pnpm@10.11.1 buildpnpmがすでにインストールされている場合は、次のコマンドでも実行できます。
pnpm install
pnpm build- Chromeで
chrome://extensionsを開きます。 - 右上のスイッチでデベロッパーモードを有効にします。
- パッケージ化されていない拡張機能を読み込むをクリックし、
apps/extension/.output/chrome-mv3を選択します。 - 変更された新しいタブページを保持するかChromeに尋ねられたら、保持を選択します。
最初のホームページを作成する
- 新しいタブを開きます。
- 求められたらAnthropic APIキーを貼り付けます。
- 今日のホームページを作成をクリックします。
進捗画面には、エージェントの準備、閲覧履歴の読み取り、ブラウザでのページの表示、ページの分析、ホームページの作成というビルドの各段階が表示されます。初回のビルドには数分かかる場合があります。
ビルド中にタブを閉じても問題ありません。拡張機能はバックグラウンドワーカーでビルドを実行するため、結果や進捗は新しいタブから確認できます。ビルド中にChromeを閉じた場合、次に開く新しいタブに中断したビルドを再開が表示されます。
コンテンツとデザインをカスタマイズする
新しいタブページで⚙️ 設定を開きます。指示フィールドの内容はすべてのビルドに含まれ、エージェントのデフォルト指示より優先されます。ページのコンテンツと視覚的な方向性の両方を設定できます。
たとえば、次のような指示を使えます。
- 朝刊。セリフ体、大きな題字、トップ記事、短い記事の一覧。
- 落ち着いた1列レイアウト。画像なし。読む価値のある5つの項目と、それぞれの理由を1行で。
- 情報量の多いダッシュボード。まずGitHubのPRとIssue、次にHacker News、その後にその他すべて。
- 1980年代のBBSのような、緑文字の黒いターミナル。等幅フォント。
- スポーツと政治は除外。天気と、次のカレンダー予定3件は必ず表示。
保存して再構築をクリックすると、新しい指示がすぐに適用されます。
Claudeモデルを選択する
モデル設定では、ホームページの作成に使用するClaudeモデルを指定します。
- Claude Sonnet 5.5：品質とコストのバランスに優れたデフォルト。
- Claude Haiku 5.5：最も高速で、最も低コストな選択肢。
- Claude Opus 5.5：最も慎重な編集者で、最も高コストな選択肢。
変更したモデルは次回のビルドから適用されます。各ビルドはAnthropic APIキーに請求される1回のエージェントセッションで、総費用は選択したモデルとエージェントが読み取るコンテンツ量によって変わります。
自動再構築を管理する
自動再構築はデフォルトで有効です。手動ビルドを1回完了すると、拡張機能は選択した間隔（6、12、24、または48時間）を超えたホームページをバックグラウンドで静かに再構築できます。
自動再構築では、失敗したビルドを次の間隔まで再試行しないため、無限の再試行ループを防げます。すぐに再構築するには、右上の↻ 再構築をクリックします。自動再構築を無効にし、必要なときだけビルドしてAPIの使用量を管理することもできます。
拡張機能がアクセスできる情報を確認する
各ビルドで、拡張機能は閲覧履歴内のサイトをランキングし、最大8ページを開きます。検索エンジン、ウェブメール、銀行サイト、ログアウト状態のマーケティングページは除外されます。ページを開けない場合は、その制限が結果に報告されます。
プライバシーに関する警告：この拡張機能は、上位ドメイン、訪問回数、一部のページタイトルを含む閲覧履歴の概要と、最大8ページ分の整理済みHTMLをAnthropic APIに送信します。ページはログイン済みのブラウザで読み込まれるため、非公開のコンテンツが含まれる場合があります。
このビルドでは独自のAPIキーを使用し、そのキーは拡張機能のローカルストレージに保持されます。各ビルドが終了すると、エージェントのセッションとアップロードされたページは削除されます。プライバシーに関する追加情報はARCHITECTURE.mdを参照してください。また、ブラウザプロファイルにアクセスできる人が保存されたAPIキーを読み取れる可能性があるため、プロジェクトではこのまま拡張機能ストアに公開しないよう警告しています。
ビルドの仕組み
getHistoryが、最も頻繁に訪問したドメインのランキング概要を提供します。getPageHtmlが最大8ページを選択します。拡張機能はそれらをバックグラウンドウィンドウで開き、HTMLを整理して、結果をエージェントのサンドボックス内のファイルとしてマウントします。grepとreadが、それらのファイルから見出し、投稿、リンクを抽出します。writeが、新しいタブページでレンダリングされるReactコンポーネントを作成します。
拡張機能のバックグラウンドワーカーは、中間サーバーを介さずにClaude Managed Agentsのセッションを直接駆動します。2つのカスタムツールはchrome.historyとchrome.tabsを必要とするため、拡張機能内で実行されます。その他の処理はエージェントのサンドボックス内で行われます。スクレイピングしたページは信頼できない入力として扱われるため、シェルアクセスは無効になっています。
プロジェクトの開発とテスト
リポジトリは主に次の3つの領域で構成されています。
packages/agent-core:chrome.*やnode:*を含まない、ホスト環境に依存しないエージェントループ。apps/extension: WXTとReactによるMV3拡張機能。harness: Chromeの外部でエージェントコアを実行し、ビルド済み拡張機能をテストするBunスクリプト。
便利な開発コマンドは次のとおりです。
pnpm dev # ホットリロード対応のWXT
pnpm typecheck # すべてのパッケージ
pnpm test # ユニットテスト。API呼び出しなし、Bunが必要
pnpm extension:test # ヘッドレスChrome拡張機能テスト。API呼び出しなしフィクスチャ履歴を使って実際のAPIに対する完全なエージェントビルドを実行するには、環境ファイルを作成してキーを指定します。
cp .env.example .env
pnpm agent:run
pnpm agent:verify検証コマンドは、生成された出力が実際にレンダリングされることを確認します。
拡張機能の更新
新しいリポジトリの変更を取得したら、拡張機能を再ビルドします。
npx pnpm@10.11.1 build次にchrome://extensionsを開き、AI Homepageの更新アイコンをクリックします。以降の新しいタブでは、更新されたビルドが使用されます。
まとめ
AI Homepageは、最近のブラウジング履歴をパーソナライズされ、継続的に更新される新しいタブ体験へと変えます。Chromium拡張機能をローカルでビルドしてインストールし、Anthropicのキーを指定したうえで、希望するレイアウトと閲覧の優先順位を説明してください。使用する前に、APIコスト、ビルド中にアップロードされる可能性のある非公開コンテンツ、そしてプロジェクトが実験段階であることを考慮してください。