title: GAPI Is Not Defined
body: <p>I am having much trouble getting the Google javascript api to load in my chrome extension. Please note I am very new to javascript and even newer to chrome extensions. </p>
  
  <p>I have a background.js file which executes a script</p>
  
  <pre><code>chrome.tabs.executeScript(null, { file: "ChromeExtension.js" });
  </code></pre>
  
  <p>This ChromeExtension.js file then look as follows</p>
  
  <pre><code>//Call Initialize Method
  init();
  
  //Function To Initial Chrome Extension
  function init(){
      var clientID = 'Client ID';
      var apiKey = 'API Key';
      var scopes = 'https://www.googleapis.com/auth/plus.me';
  
      loadGAPIClient();
  
      gapi.client.setApiKey(apiKey);
  
  
  }
  </code></pre>
  
  <p>My problem is that at</p>
  
  <pre><code>gapi.client.setApiKey(apiKey);
  </code></pre>
  
  <p>I get <strong>gapi is not defined</strong> The thing is once my ChromeExtension.js has completed execution, gapi is fully defined and available. </p>
  
  <p>I have tried other suggestions in some stack overflow questions but to no avail. I believe this is due to lack of Javascript knowledge but I would be grateful if anyone would be able to provide some assistance.</p>
  
  <p>Thank you for your time.</p>
  
  <p><strong>EDIT</strong> - Current GAPI Load</p>
  
  <pre><code>function () loadGAPIClient(){
      var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = "https://apis.google.com/js/client.js";
          $("head").append(s);
  }
  </code></pre>
  
  <p>This function is called in my init(), which I have also updated to reflect this.</p>
  
  <p>I have also tried using jQuery.getScript among other ways. </p>
  
  <p>Please understand this is my issue, I cannot find a way to correctly load the GAPI Client</p>