How to use jQuery from jquery.com's CDN into a Chrome Extension

Question

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 web_accessible_resources).

_{^{note: I agree with Zig Mandel 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 why this doesn't work.}}

Why doesn't this work:

manifest.json

  "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"],

the error I receive when loading my extension is:

--------------------------- Extension error
--------------------------- Could not load extension from 'C:\Users\[me]\Documents\GitHub\foo'. Could not load
javascript '' for content script.
--------------------------- OK   
---------------------------

_{^{and when do I need jQuery (or some custom debug library, etc) in web_accessible_resources versus when in content_scripts ?}}

Console use answered by ExpertSystem

You must both include a javascript file such as jQuery in the web_accessible_resources and then inject it. Including jQuery in the content_scripts is only for use by the other content scripts in the extension. An example of how to inject the code (whether local or not):

content script

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.

Answer 1

You need to read more about web accesible resources, they are not for that at all. The recommended way is to include it as part of your extension source. The help pages show you how to do that. Now if for some odd reason you really want to import it from cdn, it's possible. You already added the necessary 'self' modify permissions. Now you need to modify the content page html and manually inject the script in the page. Not worth it as you gain nothing except w slightly smaller and slower extension .