質問: GoogleChromeの拡張機能の開発をしています。 URL右の拡張機能ボタンをクリックしたら動作するように作成していて、 ボタンをクリックしたら backgroundの"background.js"から content_scriptsの"contents.js"へアクション動作を渡すところまでできました。 今回したい内容として"contents.js"の中の動作で 現在表示しているページのJSで作成されたAPIや変数をスコープしたいです。 "contents.js"の中でページ側の変数を参照しようとしてもundifinedと出て参照できませんでした。 参照方法を知っている方いますでしょうか。
回答: ページの(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イベントハンドラを設定する関数を記述したスクリプト(