title: how to fix 'Chrome Content Security Policy Directive' in chrome extension
body: <p>I'm making a chrome extension that hits Wikipedia's API through an ajax call using JQuery.  I have included a copy of JQuery in my extension's local js folder.  in the popup I have an input and I take that value and do a get request in the popup.js and I get a "Refused to load the script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."</p>
  
  <p>I have <code>WebRequest and &lt;all_urls&gt;</code> set in the permissions in <code>manifest.json</code> file.  This is what my permissions look like in the manifest: </p>
  
  <pre><code>"permissions": [
      "tabs",
      "webNavigation",
      "webRequest",
      "&lt;all_urls&gt;",
      "https://en.wikipedia.org/*"
    ],
  </code></pre>
  
  <p>I saw that adding a <code>"content_security_policy": "script-src-elem 'self' https://www.wikipedia.org/"</code> would make it easier on it but that didn't solve the problem.  </p>
  
  <pre><code>$('#urlCopyButton').click(function search() {
      var searchWord = document.querySelector('#searchWord').value;
      console.log(searchWord);
      var results = [];
  
  
  $.ajax({
            crossDomain: true,
            header: 'Access-Control-Allow-Origin',
            url:`https://en.wikipedia.org/w/api.php?action=opensearch&amp;format=json&amp;maxlag=5&amp;search=${searchWord}&amp;callback=?`,
            type: 'GET',
            dataType: 'json',
            beforeSend: function(xhr){xhr.setRequestHeader('https://en.wikipedia.org', 'https://en.wikipedia.org');},
            success: (data) =&gt; {
                $("#output").html("");
              var i =0;
              for (var i = 0; i &lt; data[1].length; i++) {
                $("#output").append(`&lt;li&gt;&lt;a href= "${data[3][i]  } "&gt;${data[1][i] + " " + data[2][i]}&lt;a&gt;&lt;/li&gt;`);
              }
              console.log(data);
            },
            error: (err) =&gt;{
              console.log(err.responseJSON);
            }
  
  
        })
  </code></pre>
  
  <p>})</p>
  
  <p>I expect it to be a success and the data to so up in the console but it doesn't it throws this error: </p>
  
  <p>Refused to load the script '<a href="https://en.wikipedia.org/w/api.php?action=opensearch&amp;format=json&amp;maxlag=5&amp;search=dfa&amp;callback=jQuery33108394586597996985_1549655186216&amp;_=1549655186217" rel="nofollow noreferrer">https://en.wikipedia.org/w/api.php?action=opensearch&amp;format=json&amp;maxlag=5&amp;search=dfa&amp;callback=jQuery33108394586597996985_1549655186216&amp;_=1549655186217</a>' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.</p>
  
  <p>send @ jquery.js:2"</p>