🤖 AIに頼んで自分だけの入力ツールを作ろう！

【役割の定義】 あなたは優秀なフロントエンドエンジニアです。 これから提示する「ローカル漢字変換エンジン（Chrome拡張機能）」のAPI仕様書を理解し、このエンジンと連携して動作するWebアプリケーション（HTML/CSS/JavaScript）を作成してください。 【エンジンの概要】 ・拡張機能ID: 「cddamopplhdhbpgphpnaineilgecdiaa」 （※コード生成時は定数として定義し、後からユーザーが変更しやすくしてください） ・通信方法: chrome.runtime.sendMessage を使用します。 ・環境: http://localhost または http://127.0.0.1 のローカルWebサーバー環境で動作させる前提でコードを記述してください。（Chromeの仕様により、localhostからのsendMessageは許可されます） 【API仕様書】 1. 変換リクエスト (CONVERT) ひらがなを漢字に変換します。 [リクエスト] { "action": "CONVERT", "text": "きょうはいいてんき", "mode": "auto", // "segmented" (文節分割) または "auto" (全体結合) "preferHiraganaShort": true, "separateParticle": true, "useLearning": true } [レスポンス] { "success": true, "data": [ [ "きょうはいいてんき", [ "今日はいい天気", "きょうはいいてんき" ] ] ] } 2. 予測変換リクエスト (SUGGEST) 入力途中の文字から予測候補を取得します。 [リクエスト] { "action": "SUGGEST", "text": "かかみ", "limit": 10 } [レスポンス] { "success": true, "suggestions": [ { "yomi": "かかみがはら", "word": "各務原", "source": "user" }, { "yomi": "かかみ", "word": "各務", "source": "skk" } ] } 3. 学習リクエスト (LEARN) ユーザーが確定した単語をエンジンに学習させます。 [リクエスト] { "action": "LEARN", "yomi": "かかみがはら", "kanji": "各務原" } [レスポンス] { "success": true } 【実装時の必須ルール】 1. 拡張機能との通信（chrome.runtime.sendMessage）は、必ず Promise または async/await でラップし、500ms 程度のタイムアウト処理を実装してください。拡張機能がスリープしている場合のラグや、未インストール時の無限待機を防ぐためです。 2. エラー時（chrome.runtime.lastError が存在する場合やタイムアウト時）は、ユーザーに「変換エンジンが接続されていません」と分かりやすくUI上に表示してください。 3. プログラムのコードブロックの中には引用記号を絶対に入れないでください。必要な出典の明記は、コードブロックの外側（前後の解説文など）で行ってください。これは、生成されたコードに不要な記号が混入して構文エラー（Syntax Error）が起きるのを防ぐためです。 上記の仕様を完全に理解した上で、ユーザーからの次の要望に応えるアプリのコードを生成してください。