title: How to use jQuery from jquery.com's CDN into a Chrome Extension
body: <p>I'd like to have jQuery accessible both in content scripts and in the console (ie, from the web page -- I believe, but am not sure, this is why you use <code>web_accessible_resources</code>).</p>
  
  <p><sub><sup>note: I agree with <a href="https://stackoverflow.com/users/2213940/zig-mandel">Zig Mandel</a> below, who states you shouldnt use CDN to load jquery, because it only saves a small amount of space and leaves open the possibility that the CDN might be down. At this point, I just want to know <em>why</em> this doesn't work.</sup></sub></p>
  
  <p>Why doesn't this work:</p>
  
  <h2>manifest.json</h2>
  
  <pre><code>  "content_scripts": [
      {
    ...
        "js": ["foo.js", "https://code.jquery.com/jquery-1.10.1.min.js", "https://code.jquery.com/jquery-1.10.1.min.map"],
        "run_at": "document_idle",
        "all_frames": true
      }
    ],
    "content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'",
    "web_accessible_resources": [ "https://code.jquery.com/jquery-1.10.1.min.js", "https://code.jquery.com/jquery-1.10.1.min.map"],
  </code></pre>
  
  <p>the error I receive when loading my extension is:</p>
  
  <pre><code>--------------------------- Extension error
  --------------------------- Could not load extension from 'C:\Users\[me]\Documents\GitHub\foo'. Could not load
  javascript '' for content script.
  --------------------------- OK   
  ---------------------------
  </code></pre>
  
  <p><sub><sup><s>and when do I need jQuery (or some custom debug library, etc) in <code>web_accessible_resources</code> versus when in <code>content_scripts</code> ?</s></sup></sub></p>
  
  <h3>Console use answered by <a href="https://stackoverflow.com/users/2341938/expertsystem">ExpertSystem</a></h3>
  
  <p>You must both include a javascript file such as jQuery in the <code>web_accessible_resources</code> and then inject it. Including jQuery in the <code>content_scripts</code> is only for use by the other <em>content scripts</em> in the extension. An example of how to inject the code (whether local or not):</p>
  
  <h2>content script</h2>
  
  <pre><code>function inject(script) {
      if (script.match(/^http\:\/\//)){
          var ssrc = document.createElement("script");
          ssrc.setAttribute("src", script);
          ssrc.addEventListener('load', function() {
              var ssrc = document.createElement("script");
              ssrc.textContent = "(" + callback.toString() + ")();";
              document.body.appendChild(script);
          }, false);
          document.body.appendChild(script);
      }
      else {
          var s = document.createElement('script');
          s.src = chrome.extension.getURL(script);
          s.onload = function () {
              this.parentNode.removeChild(this);
          };
          (document.head || document.documentElement).appendChild(s);
      }
  }
  
  [path_to_javascript, ...].forEach(inject) // put the javascript filename you'd like to inject in this array.
  </code></pre>