Chrome whitelist extension

Question

I am trying to make a whitelist extension in Chrome. I get the following error when I run my extension.

Uncaught Error: Parameter 1 (filter) is required.
    at validate (extensions::schemaUtils:36)
    at validateListenerArguments (extensions::webRequestEvent:19)
    at WebRequestEventImpl.addListener (extensions::webRequestEvent:92)
    at WebRequestEvent.publicClassPrototype.(anonymous function) [as addListener] (extensions::utils:138:26)
    at window.onload (bkg.js:3)

I have looked at several other questions and have been unable to find out what is going on. I also did a Google search for my error and nothing came up.

bkg.js (background script)

window.onload = function(){

    chrome.webRequest.onBeforeRequest.addListener(
        function(details) {
            var allowed = ["*://*.google.com/*", "*://*.nbclearn.com/*"];
            chrome.tabs.getSelected(null, function(tab) {
                var tabUrl = tab.url;
            
                if ($.inArray(tabUrl, allowed) == -1){
                    return {
                        cancel: true
                    }
                }
                else {
                    return {
                        cancel: false
                    }
                }
            },
        {urls: ["*://*/*"]},
        ["blocking"]);
    });
};

I expected that this would allow only websites from the allowed array to load and the others would be blocked. Instead I get the error from above and the extension does nothing. What does the error I am getting mean, and what can I do to fix it?

Answer 1

Here is your code with the indentation corrected:

window.onload = function(){

    chrome.webRequest.onBeforeRequest.addListener(function(details) {
        var allowed = ["*://*.google.com/*", "*://*.nbclearn.com/*"];
        chrome.tabs.getSelected(null, function(tab) {
            var tabUrl = tab.url;

            if ($.inArray(tabUrl, allowed) == -1) {
                return {cancel: true}
            } else {
                return {cancel: false}
            }
        }, {urls: ["*://*/*"]}, ["blocking"]);  // all these are chrome.tabs.getSelected arguments
    });  //chrome.webRequest addListener arguments are missing
};

As you can see, you are passing {urls: ["*://*/*"]}, ["blocking"] as arguments to chrome.tabs.getSelected, instead of chrome.webRequest listener. Following the documentation example, you can do:

window.onload = function(){

    chrome.webRequest.onBeforeRequest.addListener(function(details) {
        return {cancel: (details.url.indexOf("google.com/") == -1 && details.url.indexOf("nbclearn.com/") == -1)} },
        {urls: ["<all_urls>"]},
        ["blocking"]);
};

In order to block all requests except those from those 2 domains.

You can use Array.prototype.every to have the whitelisted domains in an array. For example:

window.onload = function(){

    var allowed = ["chrome.com/", "nbclearn.com/", "example.com/"];

    chrome.webRequest.onBeforeRequest.addListener(function(details) {
        var isForbidden = allowed.every(function(url) {
            return details.url.indexOf(url) == -1;
        });
        return {cancel: isForbidden}
    }, {urls: ["<all_urls>"]}, ["blocking"]);
};