DOM追加時に処理を発火させる方法

Question

ただ今、拡張機能としてgoogle meetからコメントをした瞬間のテキストをコンソール画面に表示させる方法を考えているのですが、

• 送信ボタン(<dev role="button" />)をクリック
• ENTERキーを押下
• テキストリストが増えた瞬間に処理を発火

の2通りあります。

１つ目の場合だと、addeventlistenerにてクリックリスナーをつけるのかなと思うのですが、２つ目のENTERキーを押下する場合についてがよくわかりません。(変換確立との区別がつかなそうな印象が…)
3つ目に関しては本当に行えるのかさえわかりません、、、

どうか御助力よろしくお願いいたします。

現状のコード

function handleClick() {
    // コメント取得
    var textArr = document.getElementsByClassName('oIy2qc')
    var textArrNum = textArr.length - 1
    if ( textArrNum >= 0 ) {
        var text = textArr[textArrNum].textContent
        console.log(text)
    }
}
  
var t = document.getElementsByClassName('BC4V9b')[0]
if (button) {
    var button = t.getElementsByClassName('uArJ5e')[0]
    button.addEventListener('click', handleClick, false)
}

Comments

[退会済みユーザー]

「コメントをした瞬間」と言うのはどのタイミング&条件であるべきと考えていますか？

submit される直前とか？

[think49]

Enterキーでsubmitされるのは、改行可能なtextarea以外にフォーカスがある時なのでは…。
(念の為、仕様か実機で裏をとって下さい)

[yambejp]

３つ目ってなんでしょう？

[think49]

3つ目は「-テキストリストが増えた瞬間に処理を発火」と思われます。
markdownの記述ミスでしょう。

[konia]

@think49さん
ありがとうございます！おっしゃる通り
「テキストリストが増えた瞬間に処理を発火」が3つ目になります。

[konia]

@SurferOnWwwさん
「コメントをした瞬間」と言うのはどのタイミング&条件であるべきと考えていますか？
submitされた後の操作のつもりで書かせていただきました＞＜

[退会済みユーザー]

> submitされた後の操作のつもりで書かせていただきました

その submit というのをどのようにしているのか分かりませんが、もし jQuery ajax を使っているなら成功した応答が返ってきたときに呼ばれるコールバックで処置してはいかがですか？

[yambejp]

修正ついでに「の2通りあります。 」を「の3通りあります。 」に変えておいてください。
私が勘違いしたのはそこなので

[think49]

> submitされた後の操作のつもりで書かせていただきました＞＜

真に「submitされた後」なら、ページ遷移が発生し、現在のページのスクリプトは破棄されます。
ページ遷移後のURLを検知して、要素を取得する事になりますので、DOM追加検出云々は関係なくなります。

Answer 1

監視対象が詳細不明なので、方法論を示します。

1. DOM追加処理と同じtype,currentTarget,optionsを指定したイベントリスナーを addEventListener で定義する
2. MutationObserverでDOM追加を監視する

Re: konia さん