chrome拡張機能 JavaScript DOM操作動かない

プログラミング初学者です。拙い質問かもしれませんが宜しくお願いします。

自分がよく使うサイトにて、下記の様なソースがあるのですが、
あまり必要がない上にご操作の原因になるので、表示しないように変更したいと思います。
自分のサイトではないので、chrome拡張機能を作り、その中のJavascriptを使って実行したいと考えています。

HTML
1<a href="javascript:void(0);" onclick="copyField('title_name','title name_a');" style="color:#0000FF; text-decoration:underline;">※タイトルをコピー</a>

当サイトでいくつか質問をさせていただき、
皆様から頂いた知識をもとにソースコードを書きローカルでは動くことを確認しましたが
該当のサイトでは動作しないことが判明しました。

Javascript
1alert("うごいとるやで!!");
2
3window.addEventListener('DOMContentLoaded', () => {
4document.querySelector(`a[href="javascript:void(0);"][onclick="copyField('title_name','title name_a');"]`).innerHTML="";
5})

このようなcontent.jsを読み込んだ場合
アラートは動作するものの、後述の本題が動作していないような状況です。
chromeのデバッグツールコンソールでは、エラーは見当たりません。

この場合、どの様なミス、状況が考えられるでしょう？
また解決方法など分かりましたら教えていただけると幸いです。

ここまでのご拝読ありがとうございます。
何卒、ご教授宜しくお願いいたします。

yuuyu

2021/05/13 15:11

DOMContentLoadedをloadに変えてみても動きませんか？

sheep0808

2021/05/14 04:10

動きました!! DOMContentLoadedは鵜呑みにして疑わずに使ってしまっていましたが、他にも手段があるんですね、ありがとうございます。よければ、ベストアンサーにしたいので、回答に再投稿頂けたらと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

eventをDOMContentLoadedからloadに変えて実行してみてください。

投稿2021/05/14 07:35

yuuyu

総合スコア1139

yuuyu

2021/05/14 07:40

ちなみにDOMContentLoadedはページの DOM の読み込みが全て終わったタイミングで呼ばれるのに対し、loadは全てのリソースが読み込まれたタイミングで呼ばれるため、呼ばれるタイミングが異なります。今回の場合は拡張機能が読み込んだ時にはDOMの読み込みが全て完了しているために起こったと思われますが、時によってはloadも呼び終えた後に呼ばれる事もあるかもしれないので、その時はDocument.readyStateなども確認する必要があるかもしれません。 https://developer.mozilla.org/ja/docs/Web/API/Window/load_event https://developer.mozilla.org/ja/docs/Web/API/Document/readyState

行動規範の内容に同意します