title: Resolve "No 'Access-Control-Allow-Origin' header is present" issue with Chrome Extension
body: <p>I am developing a <strong>Chrome Extension</strong> that pre-populates fields then submits the form on an external website when I visit it.</p>
  
  <p>It works perfectly when the data is hard-coded into my <code>script.js</code> file.
  However, I'd like to grab the username from an element in my Intranet home page &amp; use this in the script instead of hard coding it.</p>
  
  <p>I have made a simple <code>script.js</code> to test this works:</p>
  
  <p><strong>script.js:</strong></p>
  
  <pre><code>$.get('https://intranet/index.php', function(data){ 
      alert('test');
  });
  </code></pre>
  
  <p>When I try to use this in my Extension and reload the page, I get the error:</p>
  
  <p><code>XMLHttpRequest cannot load https://intranet/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://eecikfibchjhmochelhmhlimbcjglldf' is therefore not allowed access. The response had HTTP status code 401.</code></p>
  
  <hr>
  
  <p>When this same code is run at <a href="https://intranet/test.html" rel="nofollow">https://intranet/test.html</a> it works perfectly.</p>
  
  <p><strong>test.html:</strong></p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;script type="text/javascript"&gt;
  $.get('https://intranet/index.php', function(data){ 
      $(document.body).load('https://intranet/ #username');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>index.php:</strong></p>
  
  <pre><code>&lt;?php
  header("Access-Control-Allow-Origin: *");
  echo '&lt;div id="username"&gt;username&lt;/div&gt;';
  ?&gt;
  </code></pre>
  
  <p>I have read that some use <code>JSONP</code> to resolve this issue. Does anyone have experience of this?</p>
  
  <p>Can anyone provide help/advice on this issue?</p>
  
  <p>Thank you for any guidance.</p>