Chrome拡張機能のjavascriptでclassが取得できない

Question

前提・実現したいこと

Chrome拡張機能で、webページ中の特定のclassを持つ部分の削除をしたいです。
そこでgetElementsByClassNameでclassを読み取ったのですが、読み取ったhtmlCollectionを表示させると中身が入っているのにその要素数は0と表示されます。どのように解決したらいいでしょうか。

発生している問題・エラーメッセージ

テキストでうまく表示できないので画像にします。
画像中のcontent1.jsが自分の作ったコードの結果になります。

該当のソースコード

let elements = document.getElementsByClassName("mhy-article-card");
let num = elements.length;

console.log(elements);
console.log("entered = " + num);


for(let i = 0; i < num; i++){//←nunが０だから機能してない
  console.log(i);
  console.log(elements[i]);
}

{
  "name": "Sample",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Sample Chrome Extension",
  "content_scripts": [{
    "matches": ["https://www.hoyolab.com/home*"],
    "js": [
      "content1.js"
    ]
  }]
}

試したこと

querySelectorAllを使てみましたが、同様にうまくいきませんでした。
Array.prototype.slice.call(elements, 0)で配列にした際は、中身が無くなりました。

・追記
window.addEventListener('load', function() { ソースコードの中身 })というようにロードが終わってからコードを実行するようにしたのですが、それでも解決しませんでした。

補足情報（FW/ツールのバージョンなど）

chromeバージョン　:93.0.4577.82（Official Build）
拡張機能はchromeのデベロッパーモードの「パッケージ化されていない拡張機能を読み込む」から使用しています。

Comments

[int32_t]

「let num = elements.length;」と「let num = elements.length;」の間は、実際に空白行だけですか? なにか別のコードを実行していませんか。

[退会済みユーザー]

`manifest.json` はどうなってますか。
`content_scripts` の対象のスクリプトの `run_at` の値は `document_idle` が望ましいのですが、`document_start` とか DOM 構築前のタイミングになっていませんか？

[Suisoniumu]

>>let num.... の間
ほかのスクリプトは実行してないです

[Suisoniumu]

>>"manifest.jsonはどうなってますか
該当のソースコードに追記しました。
javascriptはwebページの読み込み時に実行されるようになっています

[退会済みユーザー]

指定しなければデフォルトで `document_idle` になるのでタイミングの問題じゃないですね。
こちらでもその記載されたサイトでのみ問題の再現を確認できました。HTMLCollection はページの DOM の変動が動的に反映されるのでサイト側の動作によるのかと。同様のコードを例えば teratail で実行すると問題なく要素がとれますし…………。

[Suisoniumu]

回答であったMutation observerを使うと解決できました。考えていただきありがとうございました。

Answer 1

content script の実行時点でそのクラスを持つ要素は描画されていません。

MDN英語版のgetElementsByClassNameに以下の警告があります。

Warning: This is a live HTMLCollection. Changes in the DOM will reflect in the array as the changes occur. If an element selected by this array no longer qualifies for the selector, it will automatically be removed. Be aware of this for iteration purposes.

getElementsByClassName と querySelectorAll で以下のように違いが出ます。

elements = document.getElementsByClassName("a")
elements.length // 5

document.getElementsByClassName("a")[0].remove()
elements.length // 4 変更が反映されてる

elements = document.querySelectorAll(".a")
elements.length // 5

document.querySelectorAll(".a")[0].remove()
elements.length // 5 変更が反映されない

おそらく以下のようなことが起きています

1. content script が走る
2. console.log(elements.length) した時点で 0
3. console.log(elements) は空っぽ
4. .mhy-article-card の要素が作成される
5. console.log(elements) が変化する

動的に追加された要素を削除するには Mutation observer で DOM の変更を監視しし、
ここでは .mhy-article-card が追加されてから処理を実行します。

Comments

[Suisoniumu]

Mutation observer　で document.body全体を監視し、変更があった際に　.mhy-article-card を取得することで解決できました！
回答ありがとうございました。