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

Question

前提・実現したいこと

YouTubeのチャットの翻訳をするFirefox拡張機能を作っています。
コンテンツスクリプトを走らせることで翻訳をしているのですが、なぜかそもそもコンテンツスクリプトが走らないことがあります。

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

YouTubeの動画再生ページを初めて開いたとき、コンテンツスクリプトが走りません。具体的には以下のような事象が発生します。

前提として、テストのために以下のようなファイルを配置しました。

test.js

console.log("test.js run!")

manifest.json

...
  "content_scripts": [
    {
      "matches": [
        "*://*.youtube.com/live_chat*",
        "*://*.youtube.com/watch*"
      ],
      "js": ["youtube.js", "test.js"]
    }
  ],
...

さらに、翻訳を行うスクリプトの先頭にもログを残すよう書きました。

'use strict';
// 翻訳apiのURL
let translaterUrl = "hogehoge";
// 翻訳する言語
let targetLang;
// 翻訳するノード
let target;
// 翻訳するチャット欄のあるフレーム
let targetFrame;
// 翻訳の監視が走っているかの値
let observerRan = false;

// テスト用のログ
console.log("youtube.js run!");
...

以下はこの環境下での行った操作とログです。
1.YouTubeの再生ページを初めて開いたときのログ

LegacyDataMixin will be applied to all legacy elements.
Set `_legacyUndefinedCheck: true` on element class to enable.
CSI/tbsd_ cb=gapi.loaded_0:404
CSI/_tbnd cb=gapi.loaded_0:404
WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER.

2.そこからさらに別の動画に飛んだ時のログ

LegacyDataMixin will be applied to all legacy elements.
Set `_legacyUndefinedCheck: true` on element class to enable. live_chat_polymer.js:3039
CSI/tbsd_ cb=gapi.loaded_0:404
CSI/_tbnd cb=gapi.loaded_0:404
LegacyDataMixin will be applied to all legacy elements.
Set `_legacyUndefinedCheck: true` on element class to enable. desktop_polymer.js:4234

3.その動画ページでF5を押し、ページをリロードしたときのログ

youtube.js run! //ここでやっとコンテンツスクリプトが走る
test.js run!
2 stopTranslateServiceの多重呼び出しがかかりました。 youtube.js:92 //（内部的にこのログは正常な処理です。）
LegacyDataMixin will be applied to all legacy elements.
Set `_legacyUndefinedCheck: true` on element class to enable. live_chat_polymer.js:3039
CSI/tbsd_ cb=gapi.loaded_0:404
CSI/_tbnd cb=gapi.loaded_0:404

試したこと

ひたすらいろいろな場所にブレークポイントを置いて、ログを出力するコードも書きテストしましたが、どうしても何も引っ掛からないのでそもそもコンテンツスクリプトが走っていないということしかわかりませんでした。

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

開発環境：
Visual Studio Code 1.60.0 + Debugger for Firefox v2.9.4
実行環境：
Windows 10 21H1
Firefox Developer Edition 93.0b3

Answer 1

manifest.json の matches にマッチしないので、youtube のトップページでは実行されません。

次に動画のページに遷移したときですが、youtube では通常のページ遷移が行われていません。
これは、開発者ツールのネットワークタブを開き、ページ遷移してみるとリセットされないことで分かります。
コンテンツスクリプトが実行されるのはページがロードされたときです。
通常の遷移が行われていないのでページがロードされず、コンテンツスクリプトは実行されません。

動画のページを直接開くと URL は matches にマッチし、ページのロードも行われるので実行されます。

Comments

[Chikage_Haruse]

ご回答ありがとうございます。
ページスクリプトが動かない原因はわかりました。しかし、matchesが使えないとなると動画ページにいるのか判定する方法がわかりません。ほかにURLを元に処理を決めることができる方法はないでしょうか。

[neko_daisuki]

URL の変更を感知できれば良いのですが、僕はその方法を知りません。

思いつくのは、matches に *://*.youtube.com/* を指定します。
次に MutationObserver で body 以下の変更を監視します。
翻訳したいノードが追加されたら翻訳します。