SoMeGoD SoMeGoD - 10 months ago 61
jQuery Question

Insert CSS to <head> before DOM ready?

I've been using Stylish chrome extension to create custom css styles to some of my company internal pages, and now I'm trying to create a chrome extension of my own to apply and share those styles with my colleagues.

While using the Stylish extension, the DOM loads perfectly already with the styles applied and I'd like to have this same effect on my extension. I'm using this code below, but since it uses $() for document ready, the page loads with it's default value and then flicks to my new styles.

$('head').append('<style>' +
'.lia-stats-area {display: none !important;}' +
'#lia-body td, #lia-body th {padding: 14px 25px !important;} ' +
'thead#columns {display: none !important;}' +
'div#pager, div#pager_0 {padding-top: 18px !important;}' +
'.message-subject-body.wrapper-hide-overflow.message-body.justify {font-size: 13px !important;}' +
'.lia-info-area {font-size: 11px !important;}' +
'.lia-list-row.lia-row-odd:hover, .lia-list-row.lia-row-even:hover {background-color: #E3F2FD !important;}' +

Question: how can I apply those styles BEFORE dom ready, so that the DOM loads already with them while using chrome extension content scripts?


You can set the script to be executed before the page is loaded.

"content_scripts": [ {
 "js": [ "styles.js" ],
 "run_at": "document_start",
 "matches": [ "<all_urls>" ]
 } ]

Alternatively, since you are only injecting styles, you can apply them using a css file.

"content_scripts": [ {
 "css": [ "styles.css" ],
 "matches": [ "<all_urls>" ]
 } ]