title: Insert CSS to <head> before DOM ready?
body: <p><strong>Question:</strong> how can I apply CSS styles BEFORE dom ready, so that the DOM loads already applied with them , <strong>IF</strong> <em>chrome.storage.sync.get('gacMakeup')</em> is equal to 1?</p>
  
  <p>I've been using <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en" rel="nofollow">Stylish</a> 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.</p>
  
  <p>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.</p>
  
  <p>I have an <em>eventpage.js</em> to set a <strong>var</strong> called <strong>gacMakeup</strong> 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:</p>
  
  <pre><code>chrome.storage.sync.get('gacMakeup', function(checkMakeup){
      if (checkMakeup.gacMakeup == undefined) {
          chrome.storage.sync.set({'gacMakeup': '1'});
      };  
  });
  </code></pre>
  
  <p>This is the CSS code inside makeup.css that I'd like to apply if gacMakeup == 1:</p>
  
  <pre><code>'.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;}
  </code></pre>
  
  <p>This is my manifest file:</p>
  
  <pre><code>{
    "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": [ "&lt;all_urls&gt;" ],
        "css": ["css/menu.css"],
        "js": ["js/jquery-1.12.4.min.js" ,"js/menu.js"]
      }
    ]
  }
  </code></pre>