LoginSignup
20
16

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-03-24

命題

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);
20
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
16