Chrome拡張機能で作ったチェックボックスを押して、ChatGPTのテキストエリアに入力を行いたい

// チェックボックスを置くdivの作成
const toggleDiv = document.createElement("div");
toggleDiv.id = "floatingDiv";
// divの装飾
toggleDiv.style.position = "fixed";//GPTと干渉しないようにする
toggleDiv.style.display = "flex";
toggleDiv.style.top = "0px";//GPTに合わせる
toggleDiv.style.right = "12%";
toggleDiv.style.width = "50px";
toggleDiv.style.height = "56px";//GPTに合わせる
toggleDiv.style.backgroundColor = "rgba(255, 255, 255)";//GPTに合わせる
toggleDiv.style.color = "#5D5D5D";//GPTに合わせる
toggleDiv.style.padding = "12px";//GPTに合わせる
toggleDiv.style.borderRadius = "5rem";//GPTに合わせる
toggleDiv.style.alignItems = "center";//GPTに合わせる
toggleDiv.style.zIndex = "1000"; // 他の要素より前面に表示

// チェックボックスをinnerHTMLで作成
toggleDiv.innerHTML = `
  <input type="checkbox" id="toggleSwitch" />
  <label for="toggleSwitch" style="cursor: pointer;"></label>
`;

// チェックボックスをクリックしたら入力を行う
toggleDiv.querySelector("#toggleSwitch").addEventListener("change", (event) => {
    if (event.target.checked) {
        // ChatGPTの入力欄を特定し、「チェック」と入力する
        const inputField = document.getElementById("prompt-textarea") || document.querySelector(".ProseMirror"); // idまたはclassで取得
        if (inputField) {
            inputField.value = "チェック"; // 入力欄に値を設定
            inputField.dispatchEvent(new Event("input", { bubbles: true })); // 入力イベントを発火
        }
    }
});
}

// divをページに追加
document.body.appendChild(toggleDiv);

// 浮かせるdiv要素を作成
const toggleDiv = document.createElement("div");
toggleDiv.id = "floatingDiv";
toggleDiv.style.position = "fixed";//GPTと干渉しないようにする
toggleDiv.style.display = "flex";
toggleDiv.style.top = "0px";//GPTに合わせる
toggleDiv.style.right = "12%";
toggleDiv.style.width = "50px";
toggleDiv.style.height = "56px";//GPTに合わせる
toggleDiv.style.backgroundColor = "rgba(255, 255, 255)";//GPTに合わせる
toggleDiv.style.color = "#5D5D5D";//GPTに合わせる
toggleDiv.style.padding = "12px";//GPTに合わせる
toggleDiv.style.borderRadius = "5rem";//GPTに合わせる
toggleDiv.style.alignItems = "center";//GPTに合わせる
toggleDiv.style.zIndex = "1000"; // 他の要素より前面に表示

// トグルスイッチをinnerHTMLで追加
toggleDiv.innerHTML = `
  <input type="checkbox" id="toggleSwitch" />
  <label for="toggleSwitch" style="cursor: pointer;"></label>
`;

// チェックボックスのクリックイベントを追加
const toggleSwitch = toggleDiv.querySelector("#toggleSwitch");
if (toggleSwitch) {
    toggleSwitch.addEventListener("change", (event) => {
        try {
            if (event && event.target && typeof event.target.checked !== "undefined") {
                // チェック状態が取得できる場合
                if (event.target.checked) {
                    console.log("チェックボックスがオンになりました。入力欄を探しています...");

                    // ChatGPTの入力欄を特定
                    const inputField = document.getElementById("prompt-textarea") || document.querySelector(".ProseMirror");

                    if (inputField) {
                        console.log("入力欄が見つかりました。テキストを入力します...");

                        // フォーカスを設定し、既存の内容をクリア
                        inputField.focus();
                        inputField.value = ""; // 既存のテキストをクリア

                        // 値を設定し、Reactが認識するようにイベントを発火
                        inputField.value = "チェック";
                        inputField.dispatchEvent(new Event("input", { bubbles: true }));
                    } else {
                        console.log("入力欄が見つかりませんでした。idやclassが正しいか確認してください。");
                    }
                } else {
                    console.log("チェックボックスがオフになりました。");
                }
            } else {
                console.error("チェック状態の取得に失敗しました。イベントオブジェクトを確認してください。");
            }
        } catch (error) {
            console.error("エラーが発生しました:", error);
        }
    });
} else {
    console.error("チェックボックスが見つかりませんでした。トグルスイッチのIDが正しいか確認してください。");
}

// divをページに追加
document.body.appendChild(toggleDiv);