Chrome拡張機能でChatGPTの送信ボタンのクリック検知ができない
拡張機能内でChatGPTの送信ボタンがクリックできない
できないこと）GoogleChromeの拡張機能を作っているのですが、クリックの検知ができません。
ChatGPTのサイト(https://chat.openai.com/chat) でのみ機能する拡張機能なのですが、
１．入力した内容を
２．送信ボタンを押した段階で取得する
ということができません。
(画像お借りしました：https://ai-gptopia.com/howto-chatgpt/)
そのあとにOpenAIAPIに通していろいろやる...ということをしたいのですがその前段階で詰まっています。
まずは送信ボタンを押したらコンソールに文章("送信"等)を表示させたいです。
どうしたら送信ボタンのクリック検知を行えるでしょうか？
manifest.json
{
"name": "exsample",
"version": "1.0.0",
"manifest_version": 3,
"description": "example",
"permissions": ["activeTab", "scripting"],
"content_scripts":
[
{
"matches": ["https://chatgpt.com/*"],
"js": ["content.js"]
}
]
}
content.js
document.getElementById("submitButton").addEventListener("click", () => {
console.log("送信");
});
自分で試したこと（ChatGPTに助けてもらいつつ）
０．フォームの構造はどうなっているのか調べた
デベロッパーモードを見たところ
<form class="w-full" type="button" ...</form>
(divがたくさんあって)
.
.
.
<button data-testid="send-button" ...</button>
となっていた。構造自体はtype="button"のformの中にあるbuttonのようらしいです。
１．buttonのidを調べた
まずは
document.getElementById("Button_id").addEventListener("click", () => {
console.log("送信");
});
のように書くのが一般的だと思ったので、デベロッパーツールでbuttonのidを調べました。
するとidは無く、代わりに
<button data-testid="send-button"....
とありました。そこでコードを
document.querySelector('[data-testid="send-button"]').addEventListener("click", () => {
console.log("送信");
});
のように変更しましたが、これではコンソールにログは表示されませんでした。
２．そもそも送信ボタンは何をクリックしているのか
もしかしたらbuttonではなく他の何かかもしれないと思いました。以下のコードで、調べたところ
// ページ全体でクリックイベントを監視
document.addEventListener('click', function(event) {
// クリックされた要素を取得
const clickedElement = event.target;
// クリックされた要素の詳細をコンソールに表示
console.log('Clicked element:', clickedElement);
});
コンソール内容
Clicked element: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon-2xl"><path fill="currentColor" fill-rule="evenodd" d="M15.192 8.906a1.143 1.143 0 0 1 1.616 0l5.143 5.143a1.143 1.143 0 0 1-1.616 1.616l-3.192-3.192v9.813a1.143 1.143 0 0 1-2.286 0v-9.813l-3.192 3.192a1.143 1.143 0 1 1-1.616-1.616z" clip-rule="evenodd"></path></svg>
どうやらクリックしているもの自体はsvgらしいようです...？？？
３．SVG要素に直接イベントリスナーを設定する
効果なし
// SVG要素を取得
const svgElement = document.querySelector('svg');
// SVG要素にクリックイベントリスナーを追加
svgElement.addEventListener('click', () => {
console.log('SVG element clicked');
});
４．SVG要素のクリックイベントを親要素で処理する
効果なし
// 親要素（例えばボタン）を取得
const parentButton = document.querySelector('[data-testid="send-button"]');
// 親要素にクリックイベントリスナーを追加
parentButton.addEventListener('click', () => {
console.log('Parent button clicked, triggered by SVG');
});
この後もいろいろやったがどうにもうまくいかず。何時間も使ってしまったので助けていただきたい次第です。
もし何かわかる方いらっしゃいましたら宜しくお願いいたします。
0
