0

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

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

问题是，background.js 似乎没有收到这些消息。如您所见，我在 background.js 的 onRequest 处理程序中有一些 console.log()，它们没有出现在我的控制台中。

清单.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); }
);

背景.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));
        }
    }
);
4

1 回答 1

2

您的代码/设计中有许多缺陷：

  1. 内容脚本可以发出跨域 AJAX 请求，前提是资源 URLpermissions在清单文件的部分中指定。
  2. webRequestAPI 不会捕获在 Chrome 扩展范围内创建的任何请求。

  3. 处理程序中的return语句不会将响应返回给调用者：successloadJSFile

        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 扩展 - 从 background.js 记录。

于 2012-05-01T20:27:45.483 回答