javascript - Chrome 扩展程序 webRequest.onBeforeRequest 取消页面

Question

我正在尝试创建一个 Chrome 扩展程序，该扩展程序查询外部源作为阻止或允许通过特定页面的引用。以下是我的代码的一部分。我是 JavaScript 新手，范围似乎总是让我烦恼。

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {

        var http = new XMLHttpRequest();
        var url = "http://xxx.xx.xxxx";
        var params = "urlCheck="+encodeString_(details.url);
        http.open("POST", url, true);
        //Send the proper header information along with the request
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        http.onreadystatechange = function() {
            if(http.readyState == 4 && http.status == 200) {
                guilt = 0;
                console.log(guilt);
            }else if(http.readyState == 4 && http.status == 404){
                guilt = 1;
                console.log(guilt);
            }
        }
        http.send(params);

    if(guilt == 1){
        return {cancel: true};
        }else{
        return {cancel: false};
        }

    },
    {urls: ["<all_urls>"],
     types:["main_frame"]
    },
    ["blocking"]
    );

任何帮助将不胜感激!谢谢。

Answer 1

你不能这么做。

您的代码无法按预期工作，因为 XHR 是异步的； onreadystatechange 在整个外部函数完成后执行。因此，guilt 将是未定义的，或者更糟糕的是，陈旧的(来自最后一个请求)。

有关更多信息，请参阅此规范问题:Why is my variable unaltered after I modify it inside of a function?

但是，如果您尝试解决此问题，您会发现无法从异步处理程序中返回响应。

这是有意为之:没有任何函数可以传递并稍后调用(例如 Messaging API 中的 sendResponse)，因为 Chrome 不会等待您。您应该以确定且快速的方式响应阻塞调用。

If the optional opt_extraInfoSpec array contains the string 'blocking' (only allowed for specific events), the callback function is handled synchronously. That means that the request is blocked until the callback function returns.

您可以尝试使用同步 XHR 调用来绕过它。一般来说，这不是一个好主意，因为加载远程响应需要很长时间，并且同步 XHR 被认为已被弃用。即使您将查询限制为“main_frame”请求，这仍然会为每次加载增加不确定的延迟。

正确的方法是从服务器加载一组规则并定期更新，当发生请求时，根据规则的本地副本对其进行验证。这就是 AdBlock 等扩展的使用方法。