Chrome webRequest listening to only user entered URLs

Question

I'm making a Chrome extension that only allows users to access websites that are on a given whitelist. chrome.webRequest.onBeforeRequest is perfect for intercepting and examining the URLs but the problem I am having is that it examines all incoming URLs including when a webpage is trying to load resources. I want it to only examine user entered URLs and if that URL is on the whitelist I want it to allow that webpage to load any resources it needs, regardless of if they are on the whitelist or not.

Here is my code for the listener.

    chrome.webRequest.onBeforeRequest.addListener(
      function(info) {
        console.log("URL: " + info.url);
        var pageURL = info['url'];
        let mngwlst = new ManageWhitelist();
        var whitelist = mngwlst.getWhitelist();
        if(whitelist == null) mngwlst.setWhitelist([]);
        var denyRequest = false;
        var denyRequest = monitor.ExamineWhitelist(pageURL, whitelist);
        console.log(denyRequest);
        return {cancel: denyRequest}
    },

    {
        urls: [
        "<all_urls>"
        ],
    },

    ["blocking"]);

monitor.ExamineWhitelist(pageURL, whitelist) will return true or false depending on if the URL is or isn't on the whitelist.

Answer 1

Trying to filter only 'user entered' URLs is tricky, but what might help you here is webRequest resource types: https://developer.chrome.com/extensions/webRequest#type-ResourceType

Resource types allow you to only filter certain types of requests. 'Main_frame' for example, is the document loaded at the top level frame. This way your onBeforeRequest listener won't fire every time an image or style sheet is requested.

You can filter by types in the same way you can filter by URLs:

chrome.webRequest.onBeforeRequest.addListener(
      function(info) {
        console.log("URL: " + info.url);
        var pageURL = info['url'];
        let mngwlst = new ManageWhitelist();
        var whitelist = mngwlst.getWhitelist();
        if(whitelist == null) mngwlst.setWhitelist([]);
        var denyRequest = false;
        var denyRequest = monitor.ExamineWhitelist(pageURL, whitelist);
        console.log(denyRequest);
        return {cancel: denyRequest}
    },

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

Answer 2

info has an attribute called type that returns the resourceType of the webRequest.

The resource types are listed here: https://developer.chrome.com/extensions/webRequest#type-ResourceType , with "main_frame" being the type you are looking for.

chrome.webRequest.onBeforeRequest.addListener(
  function(info) {
    if(info.type == "main_frame"){
        doMyStuff();
        return {cancel: denyRequest};
    }
},
{
    urls: [
    "<all_urls>"
    ],
},
["blocking"]);