Chrome Extention で navigator 以下の内容を hook(割り込み) したい

Question

Google Meet にて配信する映像を変更するChrome拡張機能を作ろうとしていて，前段階として，navigator.mediaDevices.getUserMediaをhookしようとしています。

以下のコードを検証ツールのコンソールに貼り付けたらちゃんと消えるのに，content_script.jsに記述しているコードが反映されません。

    navigator.mediaDevices.getUserMedia = null;

やったこと

タイミングの問題かなと思って，MutationObserverなどを使って完全に読み込まれてからコードを実行するようにしてみたりしました。
content_script.jsが機能していることはbodyのスタイルが変わることによって確認しています。

なぜできないのか仕組みが全くわかりません。コード上でconsole.logなどして代入先の値を確認してみたりしましたが，代入もちゃんとされているみたいなのに，どうしてブラウザ上ではhookされていないんでしょうか？

なお，参考にしようとしているこちらではcontent_script.js上でhookされているようです。

上記のgithubにあるloader.jsはうまくいかなかったので作ってないです。
また，ダウンロードしてローカルで上記のgithubのコードを拡張機能として読み込んでみたところ，うまくできず，なんでだ？？と頭を抱えております。

ご回答お待ちしております。よろしくおねがいします。

Answer 1

以下の内容は間違っているかもしれません。検証して更新します。

---

もともとのページのスクリプトが使っているAPIのフックはできません。

公式のドキュメント Work in isolated worldsが説明になっていて、もともとのページのスクリプトが動いているJavaScript環境とコンテントスクリプトが動いているJavaScript環境は別世界なので、JavaScriptのレベルではお互いに干渉することはできません。

たとえば、DOMオブジェクトなどは共有されていますが、DOMオブジェクトにアクセスするためのJavaScriptオブジェクトは別々に作られます。

Comments

[simaenaga_mk2]

お早い回答ありがとうございます！
疑問なのですが，つい先程追記した参考Githubのコードではなぜhookが実現されているのでしょうか？
loader.jsを使ってるからでしょうか…？

[int32_t]

あれ? できるようなことが書いてありますね。ちょっといま時間がないので、後で確認してみます。

[simaenaga_mk2]

ありがとうございます！！
何卒よろしくお願いいたします(_ _;)

[simaenaga_mk2]

すみません自己解決しました！わかりやすいご説明ありがとうございます。

Answer 2

int32_tさんの回答を受け，content_script.js上に記述するのではなく，loader.jsを追加し，直接HTMLにscriptタグをinsertしsrcを指定することにより，解決しました！

変更点

manifest.json

"content_scripts": [
  {
    "matches": ["https://meet.google.com/*"],
    "run_at": "document_idle",
    "js": ["loader.js"]
  }
],
"web_accessible_resources": [
  {
    "resources": ["cs.js"],
    "matches": ["https://meet.google.com/*"]
  }
]

loader.js

function load () {
  const url = chrome.runtime.getURL('cs.js')
  const script = document.createElement('script')
  script.src = url
  document.body.insertAdjacentElement('beforeend' ,script)
}

load()

Comments

[int32_t]

そうそう、<script>を注入することで介入するのでした。