GoogleChromeの拡張機能内のcontent_scriptsでのスコープついて

Question

GoogleChromeの拡張機能の開発をしています。

URL右の拡張機能ボタンをクリックしたら動作するように作成していて、
ボタンをクリックしたら
backgroundの"background.js"から
content_scriptsの"contents.js"へアクション動作を渡すところまでできました。

今回したい内容として"contents.js"の中の動作で
現在表示しているページのJSで作成されたAPIや変数をスコープしたいです。

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

Answer 1

ページの(JSの)コンテキストと拡張機能側(content.js)のコンテキストは別ですので、ページ内JSで定義されたものには直接アクセスすることはできません。

やるとすれば、一応、ページとcontent_sc間でデータのやり取りを行う方法はいくつかありますが(window.postMessageやchrome.runtime.sendMessage等)、私がよく使う方法は、DOMのイベントはページはもちろんですがcontent.js上でもハンドルすることができるので、CustomEventを使い独自のイベントを発行することでページとcontent.js間で連携させるというものです。
ちょっと、冗長的なコードとなりますが、これにより一応、content.jsからページ上の変数や関数の実行を行うことができるようになります。

const script = document.createElement('script');
const code = '(' + function () {
    window.addEventListener('execPageFunc', arg => {
        const res = pageFunc(arg.detail);
        window.dispatchEvent(new CustomEvent('pageFuncResult', { detail: res }));
    });
} + ')()';
script.text = code;
// documentにexecPageFuncイベントハンドラを設定する関数を記述したスクリプト(<script>)を追加。
// documentに追加された<script>はページのコンテキストで実行されるのでページ上のJavaScriptで定義されたものにアクセスできる。
document.head.appendChild(script);

const arg = {
    hoge: 'fuga'
};
// content.jsからexecutePageFuncイベントを発火
window.dispatchEvent(new CustomEvent('execPageFunc', { detail: arg }));
// pageFuncResultイベントハンドラ設定
// このイベントによりpageFunc()実行結果を取得 
window.addEventListener('pageFuncResult', arg => {
    const res = arg.detail;
    console.log(res);
});

Comments

[hirokiono1015]

回答ありがとうございます。
上記方法理解しました。こういった方法があるのですね！！

実際に上記方法で試したところ動作しました！！
ありがとうございます。