14

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.
Community
  • 1
  • 1
roberto tomás
  • 4,435
  • 5
  • 42
  • 71
  • Please elaborate on what you mean by _"add jQuery [...] into a Chrome Extension"_. I.e. where do you want to add it (background page, content script, popup) and how do you want to use it ? – gkalpak Nov 29 '13 at 14:38
  • I'd like to have it 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`). RENAMED for clarity – roberto tomás Nov 29 '13 at 14:40
  • Content scripts "live" in an isolated world. Thus, the content scripts JS context and the webpages JS context are separate. Web-accessible resources can be injected in the web-pages context (you don't need to declare a resource "web-accessible" if you only want to use it as content script). If you insist on injecting jQuery into the JS context of the web-page (not just as content script), please make sure you understand the implications (e.g. what happens when the web-page already includes a different jQuery version). – gkalpak Nov 29 '13 at 15:13
  • @ExpertSystem - that's very good. Now how can I resolve the error that is being generated? If you know then combine your comment here with that and post an answer please. – roberto tomás Nov 29 '13 at 15:23
  • If you just want to use the jQuery from your content script in the console, then there's no need of injecting it in the page context, see this answer: http://stackoverflow.com/a/20286152/1507998 – rsanchez Nov 29 '13 at 16:06
  • As to why your manifest doesn't work, it's simple. Content scripts have to be files included in your extension. You can't put a url inside the `js` array. http://developer.chrome.com/extensions/content_scripts.html – rsanchez Nov 29 '13 at 16:12

1 Answers1

2

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 .

Vered R
  • 45
  • 8
Zig Mandel
  • 19,571
  • 5
  • 26
  • 36
  • 3
    I tell you , I have read it, but I find the documentation ambiguous on basics. Another example is when you are looking at for example a content script, and the documentation says something like "for foo to be accessible to your extension" — well, the content script _is_ the extension.. or a part of it. what _part_ did they mean? You'd never know by reading the documentation. Your comment here has the same ambiguity: "The recommended way is to include it as part of your extension source." what _it_ am I to include? In which file? `include` is not part of javascript so what do you really mean? – roberto tomás Nov 29 '13 at 15:15
  • by "include" I dont mean an include commant, but to include it as part of your source files, just like its one more source file. See this other S.O. question http://stackoverflow.com/questions/4947510/load-jquery-into-a-chrome-extension – Zig Mandel Nov 29 '13 at 15:25
  • just for the record, like I said in my answer its possible to also inject it from an external source, but in your case you dont want that with jquery because there is no benefit. Other libraries like Google analytics you do need to have the very latest, and here explains how to do that by injecting it yourself into the DOM: https://developer.chrome.com/extensions/tut_analytics.html – Zig Mandel Nov 29 '13 at 15:28
  • I agree with you that I probably don't want to get jQuery as a content script from the CDN. I also have my extension working using a local jQuery, but I tried to get this method to work from there. I'd still like to know how I _could_ use jQuery as a content script from the CDN .. it seems like, from what I understand, my extension shouldn't generate that error when I load the extension. I'll clarify my question here to reflect that detail better. – roberto tomás Nov 29 '13 at 15:32
  • I answered that last concern in my last comment with a complete example on how to do it with the google analytics libraries. just replace the jquery cdn url in there. Im putting an analytics example instead of jquery because it does make sense to do it for analytics but not at all for jquery. – Zig Mandel Nov 29 '13 at 15:41
  • ooh wait I think I see, you meant the _third answer_ .. sorry, that post had three answers and the first two answers use a local jQuery! :P The last one says how to _inject_ a remote javascript into the page nicely, but not how to load it as a `content_script`. The error I am getting is with the content script. – roberto tomás Nov 29 '13 at 15:54
  • no, I meant this: developer.chrome.com/extensions/tut_analytics.html , it does make the external script available from your content script. – Zig Mandel Nov 29 '13 at 16:09
  • rsanchez gave a comment that describes why your answer is a correct one. Thank you. And thank you rsanchez. – roberto tomás Dec 01 '13 at 14:28