邮件没有从内容脚本发送到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。