消息未从内容脚本发送到后台.js

Question

我正在尝试使用内容脚本将我自己的JS文件注入页面。我尝试这样做的方式是基于一个名为dotjs的Chrome扩展程序所使用的系统，该系统在您的机器上运行一个小服务器，并使AJAX重新发送到本地主机以便从该服务器检索文件。

我相当确定这些 AJAX 请求只有在从后台发送时才会通过.js而不是由于同源策略而从内容脚本发送。我还需要使用webRequest，它同样只能在后台页面中使用。但是，由于我需要将内容注入页面本身，因此我需要一个内容脚本。因此，我的扩展使用内容脚本，该脚本将消息发送到后台页面，请求它执行所需的所有 webRequest 和 AJAX。

问题是，消息似乎没有被后台接收.js。如您所见.js我在后台的 onRequest 处理程序中有一些控制台.log((s，它们没有显示在我的控制台中。

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"]
}

多特斯.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); }
);

背景.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

你的代码/设计中有很多缺陷：

1. 内容脚本可以发出跨源 AJAX 请求，前提是在清单文件的permissions部分指定了资源 URL。
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 扩展程序 - 从后台记录.js了解读取后台页面的控制台输出的步骤。