ファイルアップロードボタンを探す

HTMLでデフォルトで実装されているフォームタグは使い勝手が悪いので、ある程度の規模のコードだと独自で作っている。たとえばGoogle Formは全部の入力欄に<input>を使ってないし、zennでもそうだが<textarea>なんて使ってない。
拡張機能でフォーム入力を自動化するのに面倒だから隠されたフォームを探す必要がある。そこで便利なのがCSSセレクタ。DevToolsの要素パネルではinput[type="file"]と検索すると、ソースコードのどこかに隠されているファイルアップロードのタグを見つけることができる。

KeyboardEvent について調べる

背景

ChatGPTでEnterを押すと送信されてしまうのが嫌だった。そこでEnterを押したら改行し、Ctrl + Enter や Cmd + Enter を押したときのみ送信するようにしたかった。GitHubにコードが公開された拡張機能があったのでそれを元に挙動を見ていく。

メモ

実装の概要

生成AIのサイトではEnterを押したらテキストエリアの内容が送信するように実装されている。よってサイトが実装している

keyboardEvent

ブラウザがキーボードKeyboardEventだ。ブラウザはユーザーがキーボードで入力したKeyboardEvent

今回KeyborEventを利用するにあたって、次の4つのプロパティを使う。

• code (入力したキー)
• ctrlKey(同時にControlを押しているかどうか)
• metaKey(同時にCommandやWindowsキーを押しているかどうか)
• target(イベントが発生したターゲット要素)
  またEnterを押したときに送信処理が行われるのを防ぐため次のメソッドも用いる。
• stopPropagation()

preventdefault の挙動

拡張機能のメイン処理は次のコード。引数にeventを受け取っており、

function handleCtrlEnter(event) {
  if (event.target.tagName !== "TEXTAREA") {
    return;
  }

  const isOnlyEnter = event.code == "Enter" && !(event.ctrlKey || event.metaKey);

  if (isOnlyEnter) {
    // stopPropagation for both Windows and Mac
    event.stopPropagation();
  }
}