CSS injection using chrome extension -

so have been redesigning websites own usage using chrome extension.

my goal inject css website using main css or replace main css's codes.

what have fallowing:

js:

var style = document.createelement('link'); style.rel = 'stylesheet'; style.type = 'text/css'; style.href = chrome.extension.geturl('styles.css'); (document.head||document.documentelement).appendchild(style); 

manifest file:

{   "name": "extension",   "version": "0",   "description": "",   "manifest_version": 2,   "permissions": ["tabs", "https://www.youtube.com/*"],     "content_scripts": [     {         "matches": [ "https://www.youtube.com/*"],         "js": ["inject.js"],         "all_frames": true     }   ],   "web_accessible_resources": ["styles.css"] } 

and of course css file named styles.css

the problem having once load page, loads in old style , before finished loading custom css hits road , styles changed of website. how can make styles website changed starts loading content changes not seen whatsoever.

there gif image show mean that:

you don't need programmatic injection (which happens, default, at "run_at": "document_idle", , problem).

just change manifest this:

{   "name": "extension",   "version": "0",   "description": "",   "manifest_version": 2,   "permissions": ["tabs", "https://www.youtube.com/*"],   "content_scripts": [     {         "matches": [ "https://www.youtube.com/*"],         "css": ["styles.css"],         "all_frames": true     }   ] } 

if still need programmatically, need add "run_at": "document_start"