Chrome拡張がリロードするなど特定の実行タイミングでしか実行されない

Question

前提・実現したいこと

特定のページにアクセスした際に、コンソール上に文字を表示するChrome拡張を作成しようとしています。
対象のページは動的に生成されるWebサイトです。

該当のソースコード

manifest.json

{
  "name": "chrome extension test",
  "manifest_version": 2,
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://example.com"],
      "js": ["content_script.js"]
    }
  ]
}

content_script.js

console.log("hello")

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

<a>タグによるリンクからアクセスした際にはconsole上に文字列が表示されません。
対象ページのURLをアドレスバーに入力した場合と、ページアクセス後にリロードした場合は正常に動作しています。

試したこと

この拡張機能を除くすべての拡張機能を無効にした状態で実行しても結果は変わりませんでした。

---

また、コンソール上では以下のエラー等が表示されています。

拡張機能の実行に失敗した場合

> [Webサイト上の404エラー(エラー文は省略)]

拡張機能の実行に成功した場合

> Unchecked runtime.lastError: The message port closed before a response was received.
> [Webサイト上の404エラー(エラー文は省略)]
> hello [拡張機能からのconsole.log]
> The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

尚、拡張機能を無効にした場合、helloとconsoleに出力されなくなるだけであり、そのほかのエラーは継続して出現します。

何かしらのスクリプトの記述ミスあるいは、Chrome側でなにか設定が必要なのでしょうか。

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

Windows 10(64bit Home)
Google Chrome(93.0.4577.82)
Google Chrome Canary(96.0.4656.0)

Answer 1

ブラウザの開発者ツールのネットワークタブを開きページ遷移してみてください。
遷移すると通常リセットされるはずが、そのサイトでは前の読み込みが残っているはずです。

content script が実行されるのはページが読み込まれたときですので、この場合には実行されません。

そのサイトでリンクをクリックした際に console.log を実行したい場合は、
初回読み込み時に Mutation observer で DOM の変更を監視し、
変化があった場合に console.log すると良いでしょう。

初回読み込み時にコンテンツスクリプトが起動しない。

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

Comments

[Dolphiiiin]

回答ありがとうございます。
確かにネットワークタブ上では前のページの情報が残っていることを確認できました。

以下の変更を行いました
manifest.json
"matches": ["https://example.com"],
を、"matches": ["*://example.com/*"],に変更

content_script.js
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if(location.href =="https://example.com"){ //目的のサイトのURLかを判断
console.log("hello")
}

})
});
observer.observe(
document,
{
characterData: true,
childList: true,
subtree: true
}
);

Mutation observerについてよく調らべてみて、なんとなくでコードを組んだのですが、どうしてもDOMの変更を検知した回数だけconsole.logを実行してしまいます。
どこかで条件分岐等を挟む必要があるのでしょうか。

[neko_daisuki]

はい。
今は document 以下を監視してますが、例えば title タグを監視するとかすれば良いと思います。

本当は URL の変更で発火するイベントがあれば良いのですが、
僕は見つけられませんでした。