javascript - Allow web requests based on document URL -

within extension, i'm trying identify requests loaded part of specifc pages. examples, if page:

https://www.arandomwebsite.com 

loads following resources:

https://www.arandomwebsite.com/js/app.js https://www.arandomwebsite.com/css/style.css 

and makes few api requests to:

https://www.arandomwebsite.com/api/users 

using chrome.webrequest.onbeforerequest, want know www.arandomwebsite.com/js/app.js loaded resource www.arandomwebsite.com.

i've tried using chrome.tabs tab url. chrome.tabs asynchronous i've used onupdated , onremoved track tab changes. however, chrome.webrequest.onbeforerequest can fire before chrome.tabs.onupdated, doesn't work.

var allowedurl = "https://www.arandomwebsite.com/"  var tabs = {};  chrome.tabs.query({}, function(tabs) {     tabs.foreach(function(tab) {         tabs[tab.id] = tab;     }); });  chrome.tabs.onupdated.addlistener(function(tabid, changeinfo, tab) {     tabs[tab.id] = tab; });  chrome.tabs.onremoved.addlistener(function(tabid) {     delete tabs[tabid]; });  chrome.webrequest.onbeforerequest.addlistener(function (details) {     return checkurl(details); }, {     urls: ['<all_urls>'] }, ['blocking']);  function checkurl(details) {     if(details.type === 'main_type') {         if(details.url === allowedurl) {             // allow request             return {                 cancel: false             }         }         else {             // block request             return {                 cancel: true             }         }     }     else {         if(tabs[details.tabid].url === allowedurl) {             // allow request             return {                 cancel: false             }         }         else {             // block request             return {                 cancel: true             }         }     } } 

is there better way this?