はじめに

結論から言うと完璧を目指すならbrowser-useを使えって感じですが、
料金を抑えつつ、ある程度カジュアルに作るならこれでいい気がします。

前提

Chrome拡張の作り方の説明はしない
拡張機能のインストール方法の説明はしない

各ファイル

全てディレクトリ直下に格納してます。

manifest.json

manifest.json

{
  "manifest_version": 2,
  "name": "AIフォーム自動入力",
  "version": "1.0",
  "description": "AI支援によるフォーム自動入力機能を持つChrome拡張機能",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png", // iconは適当に準備してください。
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "storage", 
    "tabs", 
    "activeTab",
    "<all_urls>",
    "https://api.openai.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"],
      "run_at": "document_idle"
    }
  ],
  "web_accessible_resources": [
    "content-script.js"
  ]
}

popup.html

ポップアップの見た目部分です。

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AIフォーム自動入力</title>
  <style>
    body {
      width: 350px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    .form-group {
      margin-bottom: 10px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input, textarea, select {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    textarea {
      min-height: 80px;
      resize: vertical;
    }
    small {
      color: #666;
      display: block;
      margin-top: 3px;
      font-size: 0.8em;
    }
    button {
      background-color: #4285F4;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
      margin-right: 5px;
    }
    button:hover {
      background-color: #3367D6;
    }
    .saved-message {
      color: green;
      margin-top: 10px;
      display: none;
    }
    h2 {
      margin-top: 0;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    .container {
      padding: 6px 12px;
    }
    .checkbox-group {
      display: flex;
      align-items: center;
      margin-top: 5px;
    }
    .checkbox-group input[type="checkbox"] {
      width: auto;
      margin-right: 8px;
    }
    .checkbox-group label {
      display: inline;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <h2>AIフォーム自動入力</h2>
  
  <div class="container">
    <div class="form-group">
      <label for="apiKey">OpenAI APIキー:</label>
      <input type="password" id="apiKey" placeholder="sk-..." autocomplete="off">
      <small>APIキーは安全に保存され、フォーム自動入力のために使用されます</small>
    </div>
    
    <div class="form-group">
      <label for="model">AIモデル:</label>
      <select id="model">
        <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
        <option value="gpt-4">GPT-4</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="formContext">フォームコンテキスト情報:</label>
      <textarea id="formContext" placeholder="フォームの目的や必要な入力情報について説明してください。例: 「これは求人応募フォームで、エンジニアのポジションに応募したいです」"></textarea>
      <small>AIがフォームをより適切に理解し、最適な値を入力するための補助情報を入力します</small>
    </div>
    
    <button id="saveSettingsButton">設定を保存</button>
    <button id="autoFillButton">フォームを自動入力</button>
    <p id="settingsSavedMessage" class="saved-message">設定を保存しました！</p>
    <p id="autoFillMessage" class="saved-message">自動入力を開始しました！</p>
  </div>

  <script src="popup.js"></script>
</body>
</html>

popup.js

入力やボタン押下時の制御周りの処理です。

popup.js

document.addEventListener('DOMContentLoaded', function() {
  // DOM要素の取得
  const apiKeyInput = document.getElementById('apiKey');
  const modelSelect = document.getElementById('model');
  const formContextInput = document.getElementById('formContext');
  const saveSettingsButton = document.getElementById('saveSettingsButton');
  const settingsSavedMessage = document.getElementById('settingsSavedMessage');
  const autoFillButton = document.getElementById('autoFillButton');
  const autoFillMessage = document.getElementById('autoFillMessage');
  
  // 保存されたAPIキー設定を読み込む
  chrome.storage.sync.get(['apiSettings'], function(result) {
    if (result.apiSettings) {
      apiKeyInput.value = result.apiSettings.apiKey || '';
      modelSelect.value = result.apiSettings.model || 'gpt-3.5-turbo';
      if (formContextInput) {
        formContextInput.value = result.apiSettings.formContext || '';
      }
    }
  });
  
  // APIキー設定保存ボタンのクリックイベント
  saveSettingsButton.addEventListener('click', function() {
    // APIキー設定を取得
    const apiSettings = {
      apiKey: apiKeyInput.value,
      model: modelSelect.value,
      formContext: formContextInput ? formContextInput.value : ''
    };
    
    // データを保存
    chrome.storage.sync.set({apiSettings: apiSettings}, function() {
      // 保存完了メッセージを表示
      settingsSavedMessage.style.display = 'block';
      
      // 3秒後にメッセージを非表示にする
      setTimeout(function() {
        settingsSavedMessage.style.display = 'none';
      }, 3000);
    });
  });
  
  // フォーム自動入力ボタンのクリックイベント
  autoFillButton.addEventListener('click', function() {
    console.log('自動入力ボタンがクリックされました');
    // APIキー設定を取得
    chrome.storage.sync.get(['apiSettings'], function(result) {
      console.log('APIキー設定を取得しました:', result.apiSettings ? 'あり' : 'なし');
      if (!result.apiSettings || !result.apiSettings.apiKey) {
        alert('OpenAI APIキーを設定してください');
        return;
      }
      
      // 現在のタブにメッセージを送信
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        if (!tabs || tabs.length === 0) {
          console.error('アクティブなタブが見つかりません');
          autoFillMessage.textContent = 'エラー: アクティブなタブが見つかりません';
          autoFillMessage.style.color = 'red';
          autoFillMessage.style.display = 'block';
          return;
        }
        
        const activeTab = tabs[0];
        console.log('アクティブなタブ:', activeTab.id);
        
        // 代替アプローチ: 直接フォーム自動入力を実行する
        autoFillMessage.textContent = 'フォーム分析中...';
        autoFillMessage.style.color = 'blue';
        autoFillMessage.style.display = 'block';
        
        // まずcontent-scriptを強制的に挿入
        chrome.tabs.executeScript(
          activeTab.id,
          { file: 'content-script.js' },
          function(injectionResults) {
            if (chrome.runtime.lastError) {
              console.error('スクリプト注入エラー:', chrome.runtime.lastError);
              autoFillMessage.textContent = `エラー: ${chrome.runtime.lastError.message}`;
              autoFillMessage.style.color = 'red';
              autoFillMessage.style.display = 'block';
              return;
            }
            
            console.log('content-scriptを注入または再読み込みしました');
            
            // 少し待ってからメッセージを送信してみる
            setTimeout(function() {
              try {
                chrome.tabs.sendMessage(
                  activeTab.id,
                  {
                    action: 'autoFillForms',
                    apiKey: result.apiSettings.apiKey,
                    model: result.apiSettings.model || 'gpt-3.5-turbo',
                    formContext: result.apiSettings.formContext || ''
                  },
                  function(response) {
                    console.log('content-scriptからのレスポンス:', response);
                    
                    if (chrome.runtime.lastError) {
                      console.warn('メッセージ送信エラー (フォールバック実行を試みます):', chrome.runtime.lastError);
                      
                      // フォールバック: 直接executeScriptで実行
                      executeDirectFill(activeTab.id, result.apiSettings, autoFillMessage);
                      return;
                    }
                    
                    if (response && response.success) {
                      // 成功メッセージを表示
                      autoFillMessage.textContent = response.message;
                      autoFillMessage.style.color = 'green';
                      autoFillMessage.style.display = 'block';
                      
                      // 3秒後にメッセージを非表示にする
                      setTimeout(function() {
                        autoFillMessage.style.display = 'none';
                      }, 3000);
                    } else {
                      // エラーメッセージを表示
                      autoFillMessage.textContent = response ? response.message : 'フォーム自動入力中にエラーが発生しました';
                      autoFillMessage.style.color = 'red';
                      autoFillMessage.style.display = 'block';
                    }
                  }
                );
              } catch (error) {
                console.error('メッセージ送信エラー:', error);
                
                // エラーの場合も直接実行を試みる
                executeDirectFill(activeTab.id, result.apiSettings, autoFillMessage);
              }
            }, 500);
          }
        );
      });
    });
  });
});

// 直接実行関数
function executeDirectFill(tabId, apiSettings, messageElement) {
  console.log('直接実行を試みます', apiSettings);
  
  // フォームコンテキストをエスケープして安全に扱う
  const safeFormContext = apiSettings.formContext ? 
    apiSettings.formContext.replace(/'/g, "\\'").replace(/\n/g, "\\n") : '';
  
  chrome.tabs.executeScript(
    tabId,
    {
      code: `
        // content-scriptの関数を直接呼び出す
        if (typeof window.directExecute === 'function') {
          console.log('directExecuteを実行します');
          window.directExecute('autoFillForms', '${apiSettings.apiKey}', '${apiSettings.model || 'gpt-3.5-turbo'}', { 
            formContext: '${safeFormContext}'
          });
        } else if (typeof window.detectForms === 'function') {
          console.log('content-scriptの関数は存在しますが、directExecuteがありません');
          { success: false, message: 'バージョンの不一致: 拡張機能を再読み込みしてください' };
        } else {
          console.error('content-scriptの関数が見つかりません');
          { success: false, message: 'content-scriptが正しく読み込まれていません' };
        }
      `
    },
    function(results) {
      console.log('直接実行結果:', results);
      
      if (chrome.runtime.lastError) {
        console.error('直接実行エラー:', chrome.runtime.lastError);
        messageElement.textContent = `エラー: ${chrome.runtime.lastError.message}`;
        messageElement.style.color = 'red';
        messageElement.style.display = 'block';
        return;
      }
      
      // 直接実行では正確な結果が取得できないため、処理中メッセージを表示
      messageElement.textContent = 'フォーム処理中...完了まで少々お待ちください';
      messageElement.style.color = 'blue';
      
      // 5秒後に完了メッセージを表示（非同期処理なので厳密な完了確認はできない）
      setTimeout(function() {
        messageElement.textContent = 'フォーム処理が完了しました（自動推測）';
        messageElement.style.color = 'green';
        
        // さらに3秒後に非表示
        setTimeout(function() {
          messageElement.style.display = 'none';
        }, 3000);
      }, 5000);
    }
  );
}

background.js

スクリプトの読み込みなどの準備

background.js

// Chrome拡張機能のインストール/更新時に実行
chrome.runtime.onInstalled.addListener(function() {
  console.log('AI フォーム自動入力拡張機能がインストールされました');
});

// エラーを検出するリスナー
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.type === 'error') {
    console.error('エラーが報告されました:', message.error);
  }
  
  if (message.type === 'debug') {
    console.log('デバッグメッセージ:', message.data);
  }
  
  // sendResponseが使われる可能性があるので、trueを返す
  return true;
});

// コンテンツスクリプトとの接続確認
chrome.runtime.onConnect.addListener(function(port) {
  console.log('新しい接続:', port.name);
  
  port.onMessage.addListener(function(message) {
    console.log('ポートメッセージ:', message);
  });
  
  port.onDisconnect.addListener(function() {
    console.log('ポート接続が終了しました:', port.name);
  });
});

// コンテンツスクリプトが読み込まれたときのメッセージリスナー
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.action === 'contentScriptLoaded') {
    console.log('Content Scriptが読み込まれました:', sender.tab ? sender.tab.url : 'unknown');
    // 応答を返す
    sendResponse({status: 'confirmed'});
  }
  
  // 非同期レスポンスのためにtrueを返す
  return true;
});

content-script.js

アクティブなタブ上にあるフォームを検出して自動入力するコア機能

content-script.js

// フォーム要素を検出する関数
function detectForms() {
  // まず標準的な<form>要素を探す
  const forms = document.querySelectorAll('form');
  if (forms.length > 0) {
    console.log('フォームが検出されました:', forms.length, '件');
    return forms;
  }
  
  // フォームが見つからない場合、入力フィールドの集まりを探す
  // 入力フィールドを集めて仮想的なフォームを作成
  console.log('標準フォームが見つからないため、入力フィールドを探します');
  
  const inputElements = document.querySelectorAll('input, textarea, select');
  if (inputElements.length > 0) {
    console.log('入力フィールドが見つかりました:', inputElements.length, '件');
    
    // 仮想フォーム（div要素）を作成
    const virtualForm = document.createElement('div');
    virtualForm.setAttribute('data-virtual-form', 'true');
    
    // 入力要素の参照を保持（実際にDOM操作はしない）
    virtualForm.inputElements = inputElements;
    
    // 仮想フォーム用のquerySelectorAll関数をオーバーライド
    virtualForm.querySelectorAll = function(selector) {
      if (selector === 'input, textarea, select') {
        return this.inputElements;
      } 
      return [];
    };
    
    return [virtualForm];
  }
  
  console.log('フォームも入力フィールドも見つかりませんでした');
  return [];
}

// OpenAIのAPIを使ってフォームフィールドを解析する関数
async function analyzeFormWithAI(formElement, apiKey, model, formContext = '') {
  // フォーム内の入力要素を取得
  const inputElements = formElement.querySelectorAll('input, textarea, select');
  if (!inputElements || inputElements.length === 0) {
    throw new Error('フォーム内に入力要素が見つかりません');
  }
  
  console.log('入力要素数:', inputElements.length);
  
  const formFields = Array.from(inputElements).map(element => {
    // 基本的なラベル検出
    let label = findLabelForElement(element);
    
    return {
      id: element.id,
      name: element.name,
      type: element.type,
      placeholder: element.placeholder,
      label: label,
      required: element.required
    };
  });

  console.log('解析するフォームフィールド:', formFields);
  
  // 入力可能な要素のみをフィルタリング
  const editableFields = formFields.filter(field => {
    const type = field.type.toLowerCase();
    return type !== 'submit' && type !== 'button' && type !== 'reset' && 
           type !== 'hidden' && type !== 'file' && type !== 'image';
  });
  
  if (editableFields.length === 0) {
    throw new Error('フォーム内に入力可能な要素が見つかりません');
  }

  // OpenAI APIへのリクエスト
  try {
    console.log(`OpenAI API (${model})にリクエストを送信中...`);
    
    const systemMessage = `
あなたはウェブフォームの自動入力を支援するAIアシスタントです。
以下のフォームフィールド情報に基づいて、各フィールドに適切な値を入力してください。
必ず、以下の形式でJSON形式で回答してください:

{
  "フィールドID1": "入力値1",
  "フィールドID2": "入力値2",
  ...
}

注意:
- フィールドIDがない場合は、nameまたはlabelを使用してください
- 実際の値のみを含め、説明やコメントは含めないでください
- 妥当な日本語の値を使用してください（例: 名前なら「山田太郎」など）
- メールアドレスには有効な形式を使用してください（例: user@example.com）
- パスワードには複雑なパスワードを使用してください
- checkboxやradioボタンには "true"/"false" または "1"/"0" で応答してください
`;
    
    let userMessage = `
このウェブフォームに適切な値を入力してください。以下はフォームフィールドの詳細情報です:
${JSON.stringify(editableFields, null, 2)}

各フィールドに適切な値を割り当てたJSONオブジェクトで回答してください。
フィールドIDまたは名前をキーとして使用してください。
`;

    // ユーザーが提供したコンテキスト情報があれば追加
    if (formContext && formContext.trim() !== '') {
      userMessage += `

フォームに関する追加コンテキスト情報:
${formContext}
この情報に基づいて、フォームフィールドに適切な値を入力してください。
`;
    }

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: model,
        messages: [
          {
            role: 'system',
            content: systemMessage
          },
          {
            role: 'user',
            content: userMessage
          }
        ],
        temperature: 0.2,  // より決定論的な結果を得るために低い値を設定
        ...(model.includes('gpt-4') ? {} : { response_format: { type: "json_object" } })  // JSON形式の応答を要求
      })
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => null);
      console.error('API応答エラー:', response.status, errorData);
      throw new Error(`APIエラー: ${response.status} - ${errorData?.error?.message || '不明なエラー'}`);
    }

    const data = await response.json();
    console.log('AIレスポンス:', data);
    
    if (data.choices && data.choices.length > 0) {
      const contentResult = parseAIResponse(data.choices[0].message.content, editableFields);
      if (Object.keys(contentResult).length === 0) {
        console.warn('AIレスポンスのパースに失敗しました。レスポンス:', data.choices[0].message.content);
        return null;
      }
      return contentResult;
    } else {
      throw new Error('AIからの有効なレスポンスがありません');
    }
  } catch (error) {
    console.error('AI APIエラー:', error);
    throw error; // 上位の関数でキャッチできるようにエラーを再スロー
  }
}

// AIのレスポンスをパースする関数
function parseAIResponse(responseText, formFields) {
  console.log('AIレスポンスのパース開始:', responseText.substring(0, 100) + '...');
  
  // この関数はAIのレスポンスをパースして、各フォームフィールドの値を返す
  const result = {};
  
  try {
    // ステップ1: JSONとして解析を試みる
    let parsedJson = null;
    
    if (responseText.includes('{') && responseText.includes('}')) {
      try {
        // JSON部分を抽出する試み
        const jsonRegex = /{[\s\S]*?}/g;
        const jsonMatches = responseText.match(jsonRegex);
        
        if (jsonMatches && jsonMatches.length > 0) {
          // 最も長いJSONを試す
          const sortedMatches = [...jsonMatches].sort((a, b) => b.length - a.length);
          
          for (const jsonString of sortedMatches) {
            try {
              parsedJson = JSON.parse(jsonString);
              console.log('JSONとして解析成功:', parsedJson);
              break;
            } catch (e) {
              console.log('JSONパース失敗、次の候補を試します');
            }
          }
        }
      } catch (jsonError) {
        console.log('JSON抽出エラー:', jsonError);
      }
    }
    
    // ステップ2: 解析したJSONから値を抽出
    if (parsedJson) {
      console.log('JSONからフィールド値を抽出します');
      
      for (const field of formFields) {
        const fieldId = field.id || field.name;
        const fieldLabel = field.label ? field.label.toLowerCase() : '';
        
        if (!fieldId && !fieldLabel) continue;
        
        // プロパティを直接検索
        if (fieldId && parsedJson[fieldId] !== undefined) {
          result[fieldId] = parsedJson[fieldId];
          continue;
        }
        
        // ラベルで検索
        if (fieldLabel && parsedJson[fieldLabel] !== undefined) {
          result[fieldId || fieldLabel] = parsedJson[fieldLabel];
          continue;
        }
        
        // プロパティ名の一部一致での検索
        for (const key in parsedJson) {
          const keyLower = key.toLowerCase();
          
          if (fieldId && keyLower.includes(fieldId.toLowerCase())) {
            result[fieldId] = parsedJson[key];
            break;
          }
          if (fieldLabel && keyLower.includes(fieldLabel)) {
            result[fieldId || fieldLabel] = parsedJson[key];
            break;
          }
        }
      }
    }
    
    // ステップ3: 行ごとの解析（JSON解析が失敗した場合、または結果が不十分な場合）
    if (Object.keys(result).length < formFields.length / 2) {
      console.log('行ごとの解析を実行します');
      
      const lines = responseText.split('\n');
      for (const line of lines) {
        if (line.includes(':')) {
          // フォーマット例: "フィールド名: 値" または "フィールドID: 値"
          const parts = line.split(':', 2);
          if (parts.length === 2) {
            const key = parts[0].trim().toLowerCase();
            const value = parts[1].trim();
            
            // 対応するフィールドを検索
            for (const field of formFields) {
              const fieldId = field.id || field.name;
              const fieldLabel = field.label ? field.label.toLowerCase() : '';
              
              if (!fieldId && !fieldLabel) continue;
              
              // 完全一致
              if ((fieldId && key === fieldId.toLowerCase()) || 
                  (fieldLabel && key === fieldLabel)) {
                result[fieldId || fieldLabel] = value;
                break;
              }
              
              // 部分一致
              if ((fieldId && key.includes(fieldId.toLowerCase())) || 
                  (fieldLabel && key.includes(fieldLabel)) ||
                  (fieldId && fieldId.toLowerCase().includes(key)) ||
                  (fieldLabel && fieldLabel.includes(key))) {
                result[fieldId || fieldLabel] = value;
                break;
              }
            }
          }
        }
      }
    }
    
    // ステップ4: プレースホルダーやフィールドタイプに基づく推測
    if (Object.keys(result).length < formFields.length) {
      console.log('デフォルト値の推測を実行します');
      
      for (const field of formFields) {
        const fieldId = field.id || field.name || field.label;
        if (!fieldId || result[fieldId]) continue;
        
        // 既に値が設定されていなければデフォルト値を設定
        if (field.type === 'email') {
          result[fieldId] = 'user@example.com';
        } else if (field.type === 'password') {
          result[fieldId] = 'SecurePassword123!';
        } else if (field.type === 'tel') {
          result[fieldId] = '090-1234-5678';
        } else if (field.type === 'number') {
          result[fieldId] = '123';
        } else if (field.name && field.name.toLowerCase().includes('name')) {
          result[fieldId] = '山田太郎';
        } else if (field.placeholder) {
          // プレースホルダーから推測
          if (field.placeholder.toLowerCase().includes('email')) {
            result[fieldId] = 'user@example.com';
          } else if (field.placeholder.toLowerCase().includes('name')) {
            result[fieldId] = '山田太郎';
          }
        }
      }
    }
    
    console.log('パース結果:', result);
    return result;
  } catch (error) {
    console.error('AIレスポンスのパースエラー:', error);
    // エラーがあっても部分的な結果を返す
    return result;
  }
}

// 要素に関連するラベルを見つける関数
function findLabelForElement(element) {
  // idがある場合、そのidを参照するlabelを探す
  if (element.id) {
    const label = document.querySelector(`label[for="${element.id}"]`);
    if (label) {
      return label.textContent.trim();
    }
  }
  
  // 親要素内のラベルを探す
  const parentElement = element.parentElement;
  if (parentElement) {
    const label = parentElement.querySelector('label');
    if (label) {
      return label.textContent.trim();
    }
  }
  
  return '';
}

// フォームフィールドに値を入力する関数
function fillFormFields(form, fieldValues) {
  const inputElements = form.querySelectorAll('input, textarea, select');
  
  inputElements.forEach(element => {
    const fieldId = element.id || element.name;
    if (fieldId && fieldValues[fieldId]) {
      if (element.type === 'checkbox' || element.type === 'radio') {
        if (fieldValues[fieldId].toLowerCase() === 'true' || 
            fieldValues[fieldId].toLowerCase() === 'yes' ||
            fieldValues[fieldId] === '1') {
          element.checked = true;
        }
      } else {
        element.value = fieldValues[fieldId];
      }
    } else if (!fieldId && element.labels && element.labels.length > 0) {
      // ラベルを使用して値を入力
      const labelText = element.labels[0].textContent.trim();
      if (labelText && fieldValues[labelText]) {
        if (element.type === 'checkbox' || element.type === 'radio') {
          if (fieldValues[labelText].toLowerCase() === 'true' || 
              fieldValues[labelText].toLowerCase() === 'yes' ||
              fieldValues[labelText] === '1') {
            element.checked = true;
          }
        } else {
          element.value = fieldValues[labelText];
        }
      }
    }
  });
}

// グローバルスコープで関数を定義（executeScriptから呼び出せるようにするため）
window.detectForms = detectForms;

// 直接実行用のグローバル関数
window.directExecute = function(action, apiKey, model, options = {}) {
  console.log('directExecuteが呼び出されました:', action, options);
  
  if (action === 'autoFillForms') {
    // フォームコンテキスト情報
    const formContext = options.formContext || '';
    
    // 非同期処理を即時実行関数で実行
    (async () => {
      try {
        // フォーム検出
        console.log('フォーム検出を実行します');
        const forms = detectForms();
          
        if (forms.length === 0) {
          console.error('フォームが見つかりませんでした');
          return { 
            success: false, 
            message: 'ページ内にフォームまたは入力フィールドが見つかりませんでした' 
          };
        }
        
        // 最初のフォームに対して処理を実行
        const fieldValues = await analyzeFormWithAI(forms[0], apiKey, model, formContext);
        if (fieldValues && Object.keys(fieldValues).length > 0) {
          fillFormFields(forms[0], fieldValues);
          return { 
            success: true, 
            message: 'フォームを自動入力しました',
            fields: Object.keys(fieldValues).length
          };
        } else {
          return { 
            success: false, 
            message: 'フォームの解析に失敗しました' 
          };
        }
      } catch (error) {
        console.error('フォーム処理エラー:', error);
        return { 
          success: false, 
          message: `エラー: ${error.message}` 
        };
      }
    })();
      
    return { status: 'processing' };
  }
  
  return { success: false, message: '不明なアクション' };
};

// メイン処理
console.log('content-script が読み込まれました');

// バックグラウンドスクリプトに読み込みを通知
try {
  chrome.runtime.sendMessage({action: 'contentScriptLoaded'}, function(response) {
    console.log('バックグラウンドスクリプトからの応答:', response);
  });
} catch (err) {
  console.error('バックグラウンドスクリプトへの通知エラー:', err);
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log('メッセージを受信しました:', message);
  
  // バックグラウンドスクリプトにデバッグメッセージを送信
  try {
    chrome.runtime.sendMessage({
      type: 'debug',
      data: { message: 'content-scriptがメッセージを受信', details: message }
    });
  } catch (err) {
    console.error('デバッグメッセージ送信エラー:', err);
  }
  
  if (message.action === 'autoFillForms') {
    const { apiKey, model, formContext } = message;
    
    if (!apiKey) {
      console.error('APIキーがありません');
      sendResponse({ success: false, message: 'APIキーが設定されていません' });
      return true;
    }
    
    // 非同期処理を開始
    (async () => {
      try {
        // フォーム検出
        console.log('フォーム検出を実行します');
        const forms = detectForms();
        
        if (forms.length === 0) {
          console.error('フォームが見つかりませんでした');
          sendResponse({ 
            success: false, 
            message: 'ページ内にフォームまたは入力フィールドが見つかりませんでした' 
          });
          return;
        }
        
        console.log('フォーム解析を開始します');
        
        // 検出された最初のフォームを処理
        const fieldValues = await analyzeFormWithAI(
          forms[0], 
          apiKey, 
          model, 
          formContext
        );
        console.log('解析結果:', fieldValues);
        
        if (fieldValues && Object.keys(fieldValues).length > 0) {
          fillFormFields(forms[0], fieldValues);
          sendResponse({ 
            success: true, 
            message: 'フォームを自動入力しました',
            fields: Object.keys(fieldValues).length
          });
        } else {
          sendResponse({ 
            success: false, 
            message: 'フォームの解析に失敗しました。入力フィールドに適切な値を見つけられませんでした。'
          });
        }
      } catch (error) {
        console.error('フォーム処理エラー:', error);
        
        // エラーメッセージの詳細化
        let errorMsg = error.message;
        if (errorMsg.includes('API')) {
          errorMsg = `OpenAI API エラー: ${errorMsg}`;
        }
        
        sendResponse({ 
          success: false, 
          message: `エラー: ${errorMsg}`
        });
        
        // バックグラウンドスクリプトにエラーを報告
        try {
          chrome.runtime.sendMessage({
            type: 'error',
            error: {
              message: errorMsg,
              stack: error.stack
            }
          });
        } catch (e) {
          console.error('エラー報告中のエラー:', e);
        }
      }
    })();
    
    return true; // 非同期レスポンスのために true を返す
  }
  
  // デフォルトのレスポンス
  sendResponse({ success: false, message: '不明なアクション' });
  return true;
});

実際に動かしてみる

こちらのサイトにフォームの事例が載っているので、入力できるか試してみましょう。
下記がちょうど良さそうなのでやってみます。

こんな感じの設定にしました。

少し待つとこんな感じで入力できました。
生年月日も適当に入ってくれているのでそこそこ良さそうです