Question

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

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

问题是，background.js似乎没有收到消息。我在background.js中的onRequest处理程序中有一些console.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"]
}

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

您的代码/设计存在许多缺陷：

内容脚本可以制作跨源AJAX请求，前提是资源URL在清单文件的permissions部分指定。
webRequest API不会捕获在Chrome扩展程序范围内创建的任何请求。

return处理程序中的success语句不会将响应返回给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。

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

1 个答案: