Google Chrome Built-in AI Challenge 2025 に応募してみるぞ！

Chrome拡張機能仕様設計書：AI Guardian for Kids

1. プロジェクト概要

1.1. プロダクト名

AI Guardian for Kids

1.2. コンセプト

「親子のコミュニケーションをChromeで拡張する」インテリジェントなペアレンタルコントロールツール。
一方的なサイトブロックではなく、AIとの対話を通じて子どもの思考を可視化し、保護者との対話のきっかけを創出する。

1.3. ターゲットユーザー

• 子ども: 小学生〜中学生
• 保護者: 子どものインターネット利用に不安を感じつつも、一方的な制限には抵抗がある層

2. 機能仕様

2.1. コア機能：多層的コンテンツフィルタリング

ユーザーがウェブサイトにアクセスしようとした際、以下の優先順位でフィルタリング処理を実行する。

2.1.1. レイヤー1：絶対ブロックリスト（保護者設定）

• 概要: 保護者が設定したURLリスト。このリストに含まれるサイトは、AIの判断を介さず即時ブロックされる。
• データソース: 保護者のGoogleスプレッドシート。
• 動作: アクセス試行 → URLがリストに一致 → 即時ブロックし、専用のブロックページを表示。

2.1.2. レイヤー2：緊急ブレーキリスト（開発者設定）

• 概要: 詐欺、ヘイトスピーチ、自傷行為など、議論の余地なく有害なキーワードやドメインを含むサイトをブロックするリスト。
• データソース: 拡張機能内にハードコードされたリスト。
• 動作: アクセス試行 → URLがリストに一致 → 即時ブロックし、専用のブロックページを表示。保護者への緊急通知も検討。

2.1.3. レイヤー3：AI対話型フィルタリング

• 概要: 上記リストに該当しないグレーゾーンのサイトに対し、AIが子どもと対話し、アクセスの可否を判断する。
• 使用API: Prompt API
• 動作:
    1. アクセスを一時停止し、専用の対話ページ（warning.html）に転送。
    2. ページ上で「なぜこのサイトを見たいの？」と問いかけ、子どもに入力を促す。
    3. 子どもが入力した理由をPrompt APIに送信し、「許可」「拒否」の判断を仰ぐ。
    - プロンプト設計: AIが「賢明なデジタルガーディアン」として振る舞うよう、教育的価値、緊急性、安全性などの判断基準を詳細に指示する。
    4. AIの判断に基づき、サイトへのアクセスを許可、または拒否する。
    5. （オプション） 拒否した場合はWriter APIを使い、理由や代替案をAIに生成させて表示する。

2.2. 保護者向け機能

2.2.1. 設定・ログ管理ダッシュボード

• 概要: 保護者が各種設定や子どもの利用状況を確認するためのUI。
• データソース: 保護者のGoogleスプレッドシートと連携。
• 機能:
    - 絶対ブロックリストの編集: URLの追加・削除。
    - AIとの対話ログの閲覧: 子どもが入力した理由と、AIの判断結果を時系列で確認。
    - 通知設定: 週次サマリーレポートのメール通知ON/OFF設定。

2.2.2. 通知機能

• 概要: 保護者の負担を増やさずに、子どもの活動への関心を促す。
• トリガー: 週に一度、または特定のイベント（例：AIが初めてアクセスを許可した時など）。
• 内容: 「今週、お子さんはAIとの対話を通してX個のサイトへのアクセスを許可されました。会話の記録を見てみませんか？」といったサマリーをメールで送信。

3. 技術仕様

3.1. クライアントサイド（Chrome拡張機能）

• 言語: HTML, CSS, JavaScript
• 主要Chrome API:
    - chrome.webNavigation: サイトアクセスを検知。
    - chrome.tabs: タブのURLを操作（リダイレクト）。
    - chrome.identity: Googleアカウント認証（OAuth 2.0）に使用。
• 主要Google AI API:
    - Prompt API: AI対話型フィルタリングのコア。
    - Writer API (オプション): AIからのメッセージ生成。

3.2. バックエンド・データストレージ

• アーキテクチャ: サーバーレス構成
• データストレージ: Googleスプレッドシート
    - 保護者のGoogleアカウントに紐づくスプレッドシートをデータベースとして利用。
    - 絶対ブロックリスト、AI対話ログ などをシートに記録。
• 認証: Google Identity Services (OAuth 2.0)
    - 拡張機能が保護者の代理でスプレッドシートを読み書きするための権限を取得。
• 通知（メール送信）:
    - Google Apps Script を使用。
    - スプレッドシートの更新をトリガーに、または時間ベースのトリガーで起動し、保護者へメールを送信する。これにより外部サーバーが不要になる。

4. プライバシーとセキュリティ設計

4.1. データ管理

• ゼロ知識アーキテクチャ: 開発者はユーザーデータ（閲覧履歴、対話ログ等）を一切保持しない。全てのデータはユーザー自身のGoogleアカウント内のスプレッドシートに保存される。
• 透明性: 保護者はいつでもスプレッドシートに直接アクセスし、全てのデータを確認・編集できる。

4.2. AIの脆弱性対策

• 多層防御: プロンプトインジェクション等によるAIの悪用リスクを考慮し、AIの判断だけに依存しない多層的なフィルタリング構造を採用する。
• リスク管理: 真に危険なサイトはAIの判断を介さずブロックすることで、思想的な柔軟性と現実的な安全性を両立させる。

5. 開発ロードマップ (Development Roadmap)

フェーズ1：基本機能の実装 (Phase 1: Basic Feature Implementation)

• 目標: ユーザーのウェブアクセスを検知し、すべてのサイトを一時停止させて警告ページ (warning.html) にリダイレクトする、拡張機能の基本的な土台を構築する。
• タスク:
  • Chrome拡張機能の基本構造のセットアップ
  • Webアクセスを検知し、warning.htmlへリダイレクトするロジックの実装
• 技術的アプローチ:
  • manifest.json: manifest_version 3 を使用。permissionsにはwebNavigation, tabs, identity, storage を含める。background.service_worker として background.js を指定。
  • background.js: chrome.webNavigation.onBeforeNavigate イベントリスナーを使用し、すべてのトップレベルフレームのナビゲーションを監視 (frameId: 0)。
  • chrome.tabs.update() を使用して、検知したタブを chrome.runtime.getURL("warning.html") で取得した内部URLにリダイレクトする。元のURLはクエリパラメータとして warning.html に渡す (?originalUrl=...)。

フェーズ2：フィルタリング機能の実装 (Phase 2: Filtering Feature Implementation)

• 目標: 3層のフィルタリングロジックを実装する。
• タスク:
  • レイヤー2（緊急ブレーキリスト）の実装
  • レイヤー1（絶対ブロックリスト）の実装
  • レイヤー3（AI対話型フィルタリング）の準備
• 技術的アプローチ:
  • 緊急ブレーキリスト: background.js 内に有害なキーワードやドメインの配列をハードコードする。onBeforeNavigate で取得したURLと照合し、一致した場合は即時ブロックページ（専用のHTMLページ、またはwarning.htmlにブロック理由を表示）にリダイレクトする。
  • 絶対ブロックリスト:
    • 認証: chrome.identity.getAuthToken() を使用して、保護者のGoogleアカウントのOAuth 2.0トークンを取得する。スコープは https://www.googleapis.com/auth/spreadsheets.readonly を要求する。
    • データ取得: 取得したトークンを使い、Google Sheets API (v4) を fetch API経由で呼び出す。保護者が設定したスプレッドシートIDと範囲（例: 'Blocklist!A'）からURLリストを取得する。
    • キャッシュ: パフォーマンス向上のため、取得したリストは chrome.storage.local に一定期間（例: 15分）キャッシュする。onBeforeNavigate ではまずキャッシュを参照し、キャッシュが古ければAPIを再コールする。
  • フィルタリング順序: background.js 内で、1. 絶対ブロックリスト、2. 緊急ブレーキリストの順でURLをチェックし、いずれにも該当しない場合のみ warning.html にリダイレクトするロジックを組む。

フェーズ3：AI連携 (Phase 3: AI Integration)

• 目標: AI (Prompt API) との連携を実装する。
• タスク:
  • Prompt API へのリクエスト送信
  • APIレスポンスの処理
• 技術的アプローチ:
  • warning.html / warning.js: ユーザーが理由を入力し「送信」ボタンを押すと、chrome.runtime.sendMessage を使って入力された理由と元のURLをバックグラウンドスクリプト (background.js) に送信する。
  • background.js: chrome.runtime.onMessage でメッセージを受信。Prompt API のエンドポイントに対して fetch APIでPOSTリクエストを送信する。リクエストボディには、プロンプト（「賢明なデジタルガーディアンとして...」という指示）、ユーザーの理由、対象URLなどを含む。APIキーは安全に管理する必要があるが、クライアントサイドでの完全な秘匿は困難なため、バックエンドを介さない本アーキテクチャでは、難読化やサーバーレスファンクション経由でのコールも検討する。
  • レスポンス処理: AIの「許可」「拒否」の判断に基づき、chrome.tabs.update() で元のURLへのアクセスを許可するか、chrome.tabs.remove() で警告ページを閉じる（またはブロック完了ページに遷移）。結果は chrome.storage.session に保存し、タブのリロード時などに判断が維持されるようにする。

フェーズ4：保護者向け機能の実装 (Phase 4: Parent-facing Feature Implementation)

• 目標: 保護者が設定とログを確認できる機能を提供する。
• タスク:
  • 対話ログの記録
  • 設定ダッシュボードの作成
  • メール通知機能の実装
• 技術的アプローチ:
  • 対話ログ記録: AIとの対話が発生した際 (Phase 3)、background.js からGoogle Sheets API (v4) の spreadsheets.values.append メソッドを呼び出し、タイムスタンプ、対象URL、子どもが入力した理由、AIの判断結果をスプレッドシートに追記する。ここでも chrome.identity で取得したOAuthトークンを使用し、スコープには https://www.googleapis.com/auth/spreadsheets (書き込み権限) が必要になる。
  • 設定ダッシュボード: 拡張機能のoptions_pageとしてdashboard.htmlをmanifest.jsonに定義する。このページでは、Google Sheets APIを直接呼び出してブロックリストの読み書きや、対話ログの表示を行う。ReactやVue.jsなどのフレームワークを導入し、UIを構築することも検討する。
  • メール通知: Googleスプレッドシートのスクリプトエディタで Google Apps Script を記述。onEdit トリガーや時間ベースのトリガー（例: 毎週日曜日の夜）を設定する。スクリプト内で MailApp.sendEmail() を使用し、スプレッドシートのデータを集計したサマリーメールを保護者のアドレスに送信する。

フェーズ5：テストとリリース準備 (Phase 5: Testing and Release Preparation)

• 目標: 製品としてリリースできる品質を確保する。
• タスク:
  • 総合的な機能テスト
  • セキュリティとプライバシーのレビュー
  • Chromeウェブストアへの登録準備
  • リリース
• 技術的アプローチ:
  • テスト: Jest などのフレームワークで background.js のロジック部分の単体テストを作成する。E2Eテストには、Puppeteer や Selenium を利用して、実際のブラウザ操作を自動化し、リダイレクトやUIの動作を確認する。
  • ストア登録: manifest.json に name, description, icons などの必須項目をすべて記述する。プライバシーポリシーのページを作成し、そのURLをマニフェストに記載する。

これを完成させて応募します！