content scriptでパッケージ内のjsライブラリを動的に読み込みたい

1,422 views
Skip to first unread message

yamaji

unread,
Aug 6, 2013, 12:43:08 AM8/6/13
to chrome-api-d...@googlegroups.com
お世話になります。yamajiと申します。

jQueryのようなライブラリを必要になった時に動的に読み込む
ということをcontent scriptでやりたいのですが
方法が分からず困っています。

■やってみたこと1
  1. 拡張機能ディレクトリにlib.jsを配置
    (lib.jsの内容)
    Lib = {"test": function(){}};
  2. manifest.jsonのweb_accessible_resourcesフィールドにlib.jsを記述
  3. content scriptにて、chrome.extension.getURL('lib.js')でurlを取得し
    <script>タグで読み込む
(結果)
DevToolで確認すると<page context>のグローバルにLibが
定義されていて、拡張機能のコンテキストからは見えない。

■やってみたこと2
  1. 拡張機能ディレクトリにlib.jsを配置
    (lib.jsの内容)
    {"test": function(){}}
  2. manifest.jsonのweb_accessible_resourcesフィールドにlib.jsを記述
  3. content scriptにて、chrome.extension.getURL('lib.js')でurlを取得し
    xhrでGET、responseTextをJSON.parseでパース
(結果)
パースエラー: Uncaught SyntaxError: Unexpected token u
#JSONの仕様の為という認識でいます

やり方がおかしいところや、他の方法があれば教えてください。


Toru Yoshikawa

unread,
Aug 6, 2013, 3:15:06 AM8/6/13
to chrome-api-d...@googlegroups.com
yamajiさん

吉川です。

chrome.tabs.executeScript()ではダメでしょうか?
ドキュメントは以下のURLにあります。

http://developer.chrome.com/extensions/content_scripts.html#pi

ご確認ください。 :)

以上

2013年8月6日 13:43 yamaji <yamayam...@gmail.com>:
> --
> --
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループに投稿するには、chrome-api-d...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chrome-api-develop...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/chrome-api-developers-jp?hl=ja
> からこのグループにアクセスしてください。
>
> ---
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループから退会し、メールの受信を停止するには、chrome-api-develop...@googlegroups.com
> にメールを送信します。
> その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。
>
>



--
Toru Yoshikawa
mail: pikotea[at]gmail.com
twitter: yoshikawa_t
blog: http://d.hatena.ne.jp/pikotea/
Message has been deleted

Toru Yoshikawa

unread,
Aug 7, 2013, 3:03:47 AM8/7/13
to chrome-api-d...@googlegroups.com
yamajiさん

吉川です。

すみません、Content Scriptsオンリーの拡張機能ということですね。
それだと、evalを使う方法しかないですね。
例えば、jQueryを読み込む場合、以下のようなコードで動作するかと思います。

var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL('jquery-2.0.3.min.js'), true);
xhr.onload = function(e){
if ( xhr.status === 200 ) {
console.log(1);
eval(xhr.responseText);

console.log(jQuery);
}
};
xhr.send();

もちろん、web_accessible_resourcesの設定は必要になります。
evalは、バックグラウンドページでは、CSPに引っかかりますがContent Scriptsでは大丈夫なようです。

>あと、<script>タグで読み込むやり方で、コードがweb pageの
>コンテキストで実行されるのって変じゃないでしょうか。
scriptタグで読み込まれるのは、あくまで元のページのコンテンツなので、
個人的には正しい動きかと思います。
(元のページのコンテンツにscript要素があるのにそれが元のページで動いてないということになりますし)

以上


2013年8月6日 19:50 yamaji <yamayam...@gmail.com>:
> 吉川さん、毎度ありがとうございます。
>
> 試してみたのですがcontent scriptからはchrome.tabsが使えないようで
> この方法では無理でした。
> content scriptからはchrome.extension.*以外のAPIが使えないんでしたよね。
>
> 説明が足りなかったようですみません。
>
> 拡張機能の本体はcontent script(content.js)だけになります。
> このcontent.jsからパッケージに同梱してあるライブラリlib.jsを
> 動的に読み込んで、content scriptのコンテキストで使いたい
> と思っています。
>
> あと、<script>タグで読み込むやり方で、コードがweb pageの
> コンテキストで実行されるのって変じゃないでしょうか。
>
>
>
> 2013年8月6日火曜日 16時15分06秒 UTC+9 Toru Yoshikawa:
>>
>> yamajiさん
>>
>> 吉川です。
>>
>> chrome.tabs.executeScript()ではダメでしょうか?
>> ドキュメントは以下のURLにあります。
>>
>> http://developer.chrome.com/extensions/content_scripts.html#pi
>>
>> ご確認ください。 :)
>>
>> 以上
>>
>>

yamaji

unread,
Aug 7, 2013, 8:11:23 AM8/7/13
to chrome-api-d...@googlegroups.com
吉川さん、ありがとうございます。
ばっちり動きました!

なんと、evalが使えたんですね。
使えなくなったと思い込んで試してませんでした^^;

>scriptタグで読み込まれるのは、あくまで元のページのコンテンツなので、 
>個人的には正しい動きかと思います。 
>(元のページのコンテンツにscript要素があるのにそれが元のページで動いてないということになりますし) 

そうなんですよね。
ただ、元のページのスクリプトのグローバルにcontent scriptからアクセスというか
読んだり操作できたりしてしまうことになるけど大丈夫なのかなと疑問に思いました。



2013年8月7日水曜日 16時03分47秒 UTC+9 Toru Yoshikawa:
> このグループに投稿するには、chrome-api-develo...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chrome-api-developers-jp+unsubscribe@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/chrome-api-developers-jp?hl=ja
> からこのグループにアクセスしてください。
>
> ---
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループから退会し、メールの受信を停止するには、chrome-api-developers-jp+unsub...@googlegroups.com

yamaji

unread,
Aug 7, 2013, 8:16:01 AM8/7/13
to chrome-api-d...@googlegroups.com
あれ、前回のメッセージを間違って消してしまったようです。。

Toru Yoshikawa

unread,
Aug 7, 2013, 9:59:29 PM8/7/13
to chrome-api-d...@googlegroups.com
うまく動いたようで何よりです。 :)
Reply all
Reply to author
Forward
0 new messages