郵件沒有從內容腳本發送到background.js

Question

我試圖使用內容腳本將我自己的JS文件注入頁面。我試圖這樣做的方式是基於名爲dotjs的Chrome擴展使用的系統，該擴展在您的機器上運行一個小型服務器，並使AJAX重新啓動到本地主機以便從該服務器檢索文件。

我相當肯定那些AJAX請求只會通過，如果他們從background.js發送而不是內容腳本，由於同源策略。我還需要使用webRequest，它只能在後臺頁面中使用。但是，因爲我需要將內容注入頁面本身，所以我需要一個內容腳本。所以我的擴展與一個內容腳本一起工作，該腳本將消息發送到後臺頁面，請求它執行所需的所有webRequest和AJAX。

問題是，消息似乎沒有被background.js接收到。正如你所看到的，我在background.js的onRequest處理程序中有一些console.log（），並且它們沒有顯示在我的控制檯中。

的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)); 
     } 
    } 
); 

Answer 1

有在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。