title: Chrome Extension: How to insert CSS conditioned on variable from Chrome storage using insert CSS?
body: <p>I'm somewhat new to Chrome Extensions, so I think I may just be missing something small, but I'm trying to allow users to load an additional page of CSS and a page of JS depending on their options (it's basically a different theme). </p>
  
  <p>I'm storing the variable that should trigger the load as <code>tm</code></p>
  
  <p>Right now, in the JS page, I have: </p>
  
  <pre><code>var Theme;
  function getVars() {
    chrome.storage.sync.get({
      tm: "",
    }, function(items) {
      Theme = items.tm;
      changeTheme();
    });
  }
  </code></pre>
  
  <p>Which triggers the <code>changeTheme</code> function, and—depending on the value of <code>Theme</code>—runs the correct JS functions. </p>
  
  <p>The trouble is that I also need a CSS sheet to load, but I can't figure this part out. Right now, in that same JS file, in the <code>changeTheme</code> function, I'm also calling: </p>
  
  <pre><code>chrome.tabs.insertCSS({file: "starWars.css"});
  </code></pre>
  
  <p>This gives me the error: </p>
  
  <pre><code> Error in response to storage.get: TypeError: Cannot read property 'insertCSS' of undefined
  at changeTheme (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:96:14)
  at Object.callback (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:7:5)
  at getVars (chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:3:23)
  at chrome-extension://ipicalmjapbogbfpaddglpachiijdffn/starWars.js:10:1
  </code></pre>
  
  <p>My manifest version is <code>2</code>, unlike the other StackOverflow posts I've found on this. You can't use background in a version 2 manifest, and I need to stay in this version for other reasons. I do have <code>"tabs"</code> and <code>"activeTab"</code> in my permissions, as well as the page that the extension is for. </p>
  
  <p>Can anyone point me in the right direction from here? Glad to provide more information if needed. </p>