javascript - How should Urls from User Options be matched in Content_Script? -

this question has answer here:

• optionally inject content script 1 answer

i writing extension has options let users decide sites want extension run on.

say user has site in options

site                          action stackoverflow.com/*           change background css blue google.com/*                  change background css green 

i store these string in options. when content_script runs should retrieve these strings options, loop through each one, parse urlparser parts, turn each part regex (escaping *), , compare document.url? read kind of user options validation urls should done through background script i'm not sure way go or if there's more obvious way it.

i think extensions adblocker , vimium seem have functionality deciding sites not run on. want figure out how decide sites to run on.

update question: since content_script needs run @ document_start (before page loaded since deals editting page appearance) content_script, background page able execute content_script before webpage loaded @ all?

validated web page's url should "validated" via background page because user's options hosted in local storage in context of background page. here do... (although it's more of suggestion answer).

i not sure how actions on right column of list factor question, sorry.

(also note, need incorporate library (external or self-written) can parse globs regex.)

manifest.json

permissions: ["tabs", "storage", "webrequest", "<all_urls>"]  

background.js

//allow webrequest run on urls var filter = { urls: "<all_urls>" };  //receives url information webrequest listener function listen(details) {     getuseropts()         .then(function(arrayofwhitelisturls) {             //you can't use globs here, need use more powerful filtering mechanisms             if (arrayofwhitelisturls.indexof(details.url) > -1) {                 message();             }         }); }  //returns promise containing user defined whitelist urls background local storage function getuseropts() {     return new promise(function(res, rej) {         chrome.storage.get("whitelist", function(data) {             //you saving localhost data string, need parse first             res(json.parse(data));         });     }); }  //messages content script , allows execution function message() {     chrome.tabs.query({active: true}, function(tabs) {         chrome.tabs.sendmessage(tabs[0].id, {permission: true});     }); }  chrome.webrequest.onbeforerequest.addlistener(listen, filter) 

contentscript.js

function listen(message) {             if (message.permission) {         if (message.permission === true) {             init();         }     } }  //listen message chrome.runtime.onmessage.addeventlistener(listen); 

so order in things run like:

• 1. background page listens each web request
• 2. on each web request, background page asynchronously fetches user options local storage
• 3. if url of current tab passes filter, message content script
• 4. the content script receives message , runs

there might easier way this; downside method need include permission gateway in every content script have.