title: Using https url with ajax in a Chrome extension popup
body: <p>I can't seem to find the solution for this anywhere. I'm making a Chrome extension for submitting data to another service and its functionality is based on a third-party API that is located on a secure url. The problem is that I can't get the https url to work and I'm getting this error instead:</p>
  
  <p><code>Refused to load the script 'http://app.something.com/api/v1/idea/create?apikey=...&amp;summary=test&amp;_=1376649061760' because it violates the following Content Security Policy directive: "script-src 'self' https://app.something.com".</code></p>
  
  <p>Permissions for <code>https</code> urls are added and the <code>content_security_policy</code> is defined in the <code>manifest.json</code>. Although I'm not entirely sure if the latter is defined correctly.</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>"permissions": [
       "contextMenus",
       "tabs",
       "storage",
       "http://*/*",
       "https://*/*",
       "&lt;all_urls&gt;"
   ],
  
  "content_security_policy": "script-src 'self' https://app.something.com; object-src 'self'",
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>$('#save').click(function(event) {
      event.preventDefault();
      var apiUrl = 'https://app.something.com/api/v1/idea/create?apikey=';
      var apiKey = localStorage.getItem('apiKey');
      var summary = document.getElementById('summary');
      var title = document.getElementById('title');
      $.ajax({
          url: apiUrl + apiKey,
          type: 'POST',
          dataType: 'jsonp',
          data: (function(title, summary) {
            var data = {};
            if(title) data["title"] = title;
            if(summary) data["summary"] = summary;
            return data;
          })
          ($("#title").val(),$("#summary").val()),
          success: function (data) { 
              ... 
          }
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;form action="" class="apiform" id="api"&gt;
      &lt;input type="text" id="apikey" placeholder="Please enter your API key ..."&gt;
      &lt;button type="submit" id="saveKey" form="api" disabled&gt;Save&lt;/button&gt;
      &lt;a class="hint" href="#"&gt;Need help generating your API key?&lt;/a&gt;
  &lt;/form&gt;
  
  &lt;form action="" class="idea" id="idea"&gt;
     &lt;p class="label"&gt;Enter idea summary&lt;/p&gt;
      &lt;textarea name="summary" id="summary" rows="5" required&gt;&lt;/textarea&gt;
  
      &lt;p class="label"&gt;Name your idea &lt;span class="hint"&gt;(optional)&lt;/span&gt;&lt;/p&gt;
      &lt;input type="text" name="title" id="title"&gt;
  
      &lt;div class="buttons"&gt;
          &lt;button type="button" class="secondary" id="cancel"&gt;Cancel&lt;/button&gt;
          &lt;button type="submit" class="primary" id="save" disabled&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>My question is:</strong> </p>
  
  <p>Can I get around this using <code>$.ajax</code> or is there another (better) way to avoid this problem?</p>