GoogleChrome拡張機能content_scriptsからサイト側のjavascriptを呼び出す方法について

Question

content_scriptsの中の動作で
現在表示しているページのJSで作成されたAPIや変数をスコープしたいです。

manifest v3対応に当たってscriptをappendChild等で埋め込む方法を使用していたのですが対応方法を変える必要が出てきたためご教授いただければと思います。

"contents.js"の中でページ側の変数を参照しようとしてもundifinedと出て参照できませんでした。
参照方法を知っている方いますでしょうか。

Answer 1

web_accessible_resourcesで拡張機能中のjsファイル(例: js/embed.js)を参照できるように指定し、content_scriptでそのjsファイルをsrcに持つscriptタグをDOMに挿入することで、グローバルwindowオブジェクトを共有する状態でスクリプトを動作させることができます。
web_accessible_resourcesのurlはchrome.runtime.getURL('js/embed.js') のように取得できます。

さらにcontent_scriptからグローバルの情報を参照したい場合はpostMessageとmessageイベントでembed.jsと情報をやり取りすることで実現できます。
もちろん特に拡張機能のAPIを使う必要がなければembed.js内で機能を完結させるほうが楽です。

Comments

[hirokiono1015]

ありがとうございます！上記回答で実装ができました。