CODEWITHSUNDEEP
jquerygoogle-chrome-extension
SoMeGoD
SoMeGoD

Reputation: 145

Insert CSS to <head> before DOM ready?

Question: how can I apply CSS styles BEFORE dom ready, so that the DOM loads already applied with them , IF chrome.storage.sync.get('gacMakeup') is equal to 1?

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've tried appending the css code using jQuery, but since I've used $('head').append(); obviously it didn't work because it loads after the dom is ready.

I have an eventpage.js to set a var called gacMakeup using chrome.storage.sync that will be used for on/off toggles. In this case, I'm using the code below to set var to 1 on first opening:

chrome.storage.sync.get('gacMakeup', function(checkMakeup){
    if (checkMakeup.gacMakeup == undefined) {
        chrome.storage.sync.set({'gacMakeup': '1'});
    };  
});

This is the CSS code inside makeup.css that I'd like to apply if gacMakeup == 1:

'.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;}

This is my manifest file:

{
  "manifest_version": 2,
  "name": "__MSG_appName__",
  "description": "__MSG_appDescription__",
  "version": "1.0",
  "author": "Autor",
  "permissions": ["tabs", "activeTab", "storage", "notifications", "https://ajax.googleapis.com/"],
  "options_page": "options.html",
  "background": {"scripts": ["js/eventpage.js"],"persistent": false},
  "web_accessible_resources": ["menu.html"],
  "default_locale": "en",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "styles"
  },

  "icons": {"48": "icon.png"},

  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "css": ["css/menu.css"],
      "js": ["js/jquery-1.12.4.min.js" ,"js/menu.js"]
    }
  ]
}

Upvotes: 0

Views: 252

Answers (2)

Daniel Herr
Daniel Herr

Reputation: 20498

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>" ]
 } ]

You can also only apply the styles if some condition is met via the background page.

chrome.tabs.onUpdated.addListener(function(tabid) {
 if(true) {
  chrome.tabs.insertCSS(tabid, { file: "styles.css" })
} })

Documentation: https://developer.chrome.com/extensions/content_scripts, https://developer.chrome.com/extensions/tabs#method-insertCSS

Upvotes: 1

Vedran Jukic
Vedran Jukic

Reputation: 851

You don't need to use jquery for that.

Try this:

var styleEl = document.createElement('style');

styleEl.innerText = '.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;}';

document.head.appendChild(styleEl);

Upvotes: 0

Related Questions