JavaScript
chrome-extension

Google Chrome拡張で外部ライブラリをCDNから取り込めないか?

More than 3 years have passed since last update.


命題

jQueryなどのメジャーなライブラリをCDNのパスを指定して使えないでしょうか?


結論

「取り込めない」

また、最近はbrowserify + babelを使うことが多いです。CDNを使いたい欲求があまりありません。


クロスドメインセキュリティ

chrome拡張はブラウザで動作します。ブラウザと同様のセキュリティ問題があります。

chrome拡張からのクロスドメイン通信は、デフォルト禁止です。

Only local script and and object resources are loaded

manifest.jsoncontent_security_policyに記述すると、

この制限を回避できます。

例えば

"content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'",

指定できるschemeはサーバー認証が可能なhttpsだけです。


外部スクリプトの取り込み方法

manifest.jsonに記述して取り込めません。

実行スクリプト中でscriptタグを生成してHTMLに埋め込むことはできます。

例えば

var script = document.createElement('script');

script.src = 'https://code.jquery.com/jquery-2.1.1.min.js';
document.body.appendChild(script);

ページ内に外部スクリプトを読み込みます。

開発ツールのコンソールからjQueryを呼び出せます。


根本的な制限

Chrome拡張のスクリプトはページ内のJavaScriptを参照できません。

(詳細はExecution environmentを参照してください。)

このため上記の方法でページ内に取り込んだ外部ライブラリを参照できません。


逆はできる

たとえば、このGoogle Chrome拡張では、以下のようにscriptタグを生成して、実行するスクリプトをページ内に埋め込んでいます。

ページ内のjQueryが使えます。

var script = document.createElement('script');

script.appendChild(document.createTextNode('('+patch+')();'));
document.body.appendChild(script);