urls are not blocking while working with chrome.webRequest api

Solution 1:

I figured out the problem in my code myself..

Actually the problem here is that chrome.storage.sync 's callback is asynchronous fucntion. Due to which chrome.webRequest 's callback is terminated before chrome.storage.sync 's callback return.

The solution can be,

Put everything inside chrome.storage.sync 's callback, so that every function will return after chrome.storage.sync 's callback executes.

Finally I have fixed this issue with the modified code below....

chrome.storage.sync.get(null,(items)=>{

  function isRequestCancelled(sitesArray, url){
    return sitesArray.includes(url);
  }

  function blockListener (details) {
     var sitesArray = Object.keys(items['sitesToBeBlocked']);
     return { cancel: isRequestCancelled(sitesArray, details.url ) };
  }
  chrome.webRequest.onBeforeRequest.addListener( blockListener ,{ urls: [" 
  <all_urls>"], types: [ 'main_frame' ] }, ['blocking'] ); 

});

Actual clue is got from related query