2012-05-01 19 views
0

コンテンツスクリプトを使用して、自分のJSファイルをページに挿入しようとしています。私がこれをやろうとしているのは、あなたのマシン上に小さなサーバーを走らせているdotjsというChromeエクステンションで使われているシステムに基づいており、そのサーバーからファイルを取得するためにAJAXをlocalhostにreuestします。コンテンツスクリプトからbackground.jsにメッセージが送信されない

同じAJAXリクエストは、同じ原産地規則のためにコンテンツスクリプトではなくbackground.jsから送信された場合にのみ処理されます。私はまた、バックグラウンドページでのみ動作するwebRequestを使用する必要があります。しかし、私はページ自体に物を注入する必要があるので、私はコンテンツスクリプトが必要です。だから私の拡張機能は、必要なWebRequestとAJAXをすべて要求するように、バックグラウンドページにメッセージを送信するコンテンツスクリプトで動作します。

問題は、メッセージがbackground.jsによって受信されていないように見えることです。 console.log()はbackground.jsのonRequestハンドラにありますが、私のコンソールには表示されません。

manifest.jsonを

{ 
    "name": "dotjs", 
    "version": "1.5", 
    "description": "~/.js", 
    "icons": { "48": "icon48.png", 
      "128": "icon128.png" }, 
    "content_scripts": [{ 
    "all_frames": true, 
    "run_at":  "document_start", 
    "matches": ["[censored]"], 
    "js":   ["dotjs.js"] 
    }], 
    "background": { 
    "scripts": ["jquery.js", "background.js"] 
    }, 
    "permissions": ["tabs", "webRequest", "extension"] 
} 

dotjs.js

console.log("dotjs.js running"); 

var requestFilter = 
    { 
     url: "[censored]" 
    }; 

var blockingResponse = 
    { 
     redirectUrl: "http://localhost:2262/Pigman/ips.chat.js" 
    }; 

function requestInterceptor(details) 
{ 
    return blockingResponse; 
} 

chrome.extension.sendRequest(
    { 
     type: "setListener", 
     func: requestInterceptor, 
     filter: requestFilter 
    } 
); 

chrome.extension.sendRequest(
    { 
     type: "loadJS", 
     filename: "Elizabot/elizabot.js" 
    }, 
    function (response) { eval(response); } 
); 

chrome.extension.sendRequest(
    { 
     type: "loadJS", 
     filename: "Elizabot/elizadata.js" 
    }, 
    function (response) { eval(response); } 
); 

background.js

function loadJSFile(filename) 
{ 
    $.ajax({ 
     url: 'http://localhost:2262/Pigman/' + filename + '.js', 
     dataType: 'text', 
     success: function(d){ 
      return d; 
     }, 
     error: function(){ 
      console.log('no file found at localhost:2262/' + filename + '.js') 
     } 
    }); 
} 

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) 
    { 
     console.log("background.js received request:"); 
     console.log(request); 
     if (request.type == "setListener") 
     { 
      chrome.webRequest.onBeforeRequest.addListener(request.func, request.filter); 
     } 
     if (request.type == "loadJS") 
     { 
      sendResponse(loadJSFile(request.filename)); 
     } 
    } 
); 

答えて

2

yの多くの欠陥があります。我々のコード/デザイン:

  1. コンテンツスクリプトクロスオリジンAJAX要求を行うことができますが、リソースのURLがマニフェストファイルのpermissionsセクションで指定されていることを条件とします。
  2. webRequest APIは、Chrome拡張機能のスコープ内で作成されたリクエストをキャプチャしません。
  3. successハンドラでreturn文がloadJSFileの呼び出し元に応答を返さない:

    sendResponse(loadJSFile(request.filename)); 
    ... 
    function loadJSFile(filename) { 
        $.ajax({ 
         ... 
         success: function(d){ 
          return d; 
         } ... 
    

    少なくとも使用:デバッグの

    loadJSFile(request.filename, sendResponse); 
    function loadJSFile(filename, sendResponse) { 
        $.ajax({ 
         url: 'http://localhost:2262/Pigman/' + filename + '.js', 
         dataType: 'text', 
         success: sendResponse, /// <--- Now it works! 
    

最後の注意:私はかなりメッセージがコンソールに記録されていると確信しています。あなたはちょうど間違った場所を見ているだけです。バックグラウンドページのコンソール出力を読み込む手順については、Google chrome extension - logging from background.jsを参照してください。

+0

おかげさまで、コンソール出力が見えるようになりました。私は良いチュートリアルを見つけることができなかったので、Chromeの拡張機能の世界では非常に迷っています。正式なドキュメントは非常にスパルタムなアプローチです。 –

+0

[公式ドキュメント](http://code.google.com/chrome/extensions/devguide.html)はまともな参考書です。ヒントやヒント、例が必要な場合は、[google-chrome-extensionタグの[my answers](http://stackoverflow.com/search?tab=relevance&q=user%3a938089%20 [google-クロム伸長])。私は通常、自分の答えにデモを追加し、常に関連する参考文献を含めます。 –

関連する問題