自作のChrome拡張機能が動きません

Question

実現したいこと

メルカリで、ショップスかどうか判別する拡張機能を作りたいです

発生している問題・分からないこと

HTMLの書き換えすらしたことがなく、原因も分からず、初心者の私には手詰まりになってしまいました。

該当のソースコード

{
  "name": "ショップス",
  "version": "3.0.0",
  "manifest_version": 3,
  "description": "ショップスに表示します",
  "content_scripts": [
    {
      "matches": [
        "https://jp.mercari.com/*"
      ],
      "js": [
        "script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

window.addEventListener("load", main, false);
let after = document.createElement("p"); // <p></p> タグ作成

function main(e) {
    const jsInitCheckTimer = setInterval(jsLoaded, 1000);
    function jsLoaded() {
        if (document.querySelectorAll('html body') != null) {
            clearInterval(jsInitCheckTimer);
            let target = document.querySelectorAll("div[itemtype='ITEM_TYPE_BEYOND']"); // 追加したい要素を見つけてくる
            for (let i = 0; i < target.length; i++) {       // 追加したい要素ごとに繰り返し
                after.textContent = "これはメルカリShops";               // <p>Push Me!</p> タグに文字を追加
                target.appendChild(after); // 子タグとして追加
            };
        };
    };
};

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

https://zenn.dev/ukkz/articles/69cda7047f23c9
非常に重くなり、エラーも出ず、タグの追加もされませんでした。
Twitterでは動きました。

https://qiita.com/3mc/items/c3c580ca5de4a2d3990d
エラーもでず、タグの追加もされませんでした。

補足

何卒、よろしくお願いいたします。

Comments

[int32_t]

このコードで、具体的にどういう結果になるはずが、具体的にどういう結果になってしまうのでしょうか。

[kannnna]

ありがとうございます！
説明不足で申し訳ありません。
商品の一覧ページで、商品名の下に「これはメルカリShops」と表示させたいですが、表示されません。
よろしくお願いします。

[int32_t]

変数targetに値を入れるところまでコードが実行されているかどうか確認しましたか?
DevToolsのコンソールに何かエラーが出ていませんか?

[Lhankor_Mhy]

Chrome拡張は全く分からないので回答欄ではなくここに書きます。

まず、ご提示のコードですと、loadイベントが起きたときに html body がないということは考えにくいので、これは動作しないのではありませんか？　動的なコンテンツの待ち合わせをするなら、もっと動的なコンテンツの中からDOM要素を選ぶべきでは？

また、for ループのなかで target.appendChild(after) を繰り返し実行すると、after はクローンされていないのでどんどん移動して、結果的には最後の商品名だけに「これはメルカリShops」が表示されることになりませんか？

[kannnna]

皆様ありがとうございます！
pythonしか触ったことがないため、試すのに時間がかかってしまいました。
無事、解決いたしました。ありがとうございました！

Answer 1

メルカリでは動的にDOMを生成していますので、bodyがnullでないからといって、対象の要素div[itemtype='ITEM_TYPE_BEYOND']が既に出現してるとは限りません。

次のように修正します:

main()
async function main(){
    let targets = await waitTargetElements() //対象の要素が出現するまで待機し、出現したらそれを代入する
    targets.forEach(target => {
        //insertAdjacentHTMLを使用すればより簡潔に書ける
        target.insertAdjacentHTML("beforeend", "<p>これはメルカリShops</p>")
    })
}

function waitTargetElements(){
    return new Promise(resolve => {
        let waitElement = setInterval(() => {
            let targets = document.querySelectorAll("div[itemtype='ITEM_TYPE_BEYOND']")
            //監視対象の要素はbodyではなく、対象の要素自身にする
            //対象の要素数が0ではないとき、このif文はtrueになる
            if(targets.length){
                resolve(targets)
                clearInterval(waitElement)
            }
        },1000)
    })
}

実行結果

Comments

[kannnna]

回答ありがとうございます。
試したところ問題が解決しました！
本当にありがとうございました！

Answer 2

変数targetの初期化まで実行できていると仮定すると、その次の target.appendChild(...) でエラーが発生するはずです。target は要素ではなく要素のリストだからです。

また、createElement() の結果の使いまわしはできないので、ループ内で毎回 createElement() する必要があります。

for (let e of target) {
    const after = document.createElement('p');
    e.appendChild(after).textContent = "これはメルカリShops";
}

注: 対象サイトの作りによっては target の初期化まで辿り着かない可能性もあります。

Comments

[kannnna]

回答ありがとうございます！
無事、解決いたしました。
ありがとうございました！