Chrome Extension + On Demand JavaScript

extensionにおいて、content scriptは唯一表示中のコンテンツ(要するにDOM)を参照/更新することが可能なコンポーネントである。

しかし、content scriptはDOMへのアクセスは可能だが、windowオブジェクトは共有しない。
例えば、extension側のcontent scriptに下記を書いたとして、

SomeContent.js

var hoge = "hoge";

現在表示しているページ内のスクリプトに下記が仮に書いてあったとしても、上記で定義したhogeは表示されない。

Original.js

console.log(hoge) // ->undefined

extensionで自作のJavaScriptと表示中のページのjsソースにて、windowオブジェクトを共有するには、下記のようにする。

manifest.json

"content_scripts":[{
  "js":["loader.js"], // 読み込み用のjs
  "mathces":"http://example.com/*",
  "run_at":"document_start"
}],
"web_accessible_resources":[
  "loadee.js" //グローバル変数を共有する.js
]

以下のloader.jsで、読み込み対象のjs(ここではloadee.js)を読み込む(所謂 On Demand JavaScriptの方法)。

loader.js

var targets = ['loadee.js'];

targets.forEach(function(js){
    var scriptElement = document.createElement('script');
    scriptElement.setAttribute('src', chrome.extension.getURL(js));
    document.documentElement.appendChild(scriptElement);
});

なお、exstension内の.jsをページからロードさせるためには、manifest.jsonのweb_accessible_resourcesに名称を記載しておく必要がある(loader.jsとmanifest.jsonの両方に'loadee.js'が登場するのはイケてないが。。。)。

また、複数のjsファイルをこの方法でロードさせても、1つ1つのscript読み込み処理が非同期で進行されるため、ロード完了の順序性が保証されない点に注意。

Chrome ExtensionとOn Demand JavaScript

Chrome Extension + On Demand JavaScript