16

I'm trying my first step into the magical world of Chrome Extensions. Now i've build up my manifest trying to load jquery.

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "description": "First try",
    "options_page": "options.html",
    "content_scripts": [{
        "matches": ["chrome-extension://*/*"],
        "js": ["jquery.js", "popup.js"],
        "run_at": "document_end"
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

Actually trying to reload the extension tell me that the "matches" do not match a valid schema.

But that's not all. To get over it, i've tried just changing the "matches" value to *://*/* and reload. Well, the extension seems to load correctly but seems like the jquery is not loaded due to the error i can get from the popup.js that just tell me

Uncaught ReferenceError: $ is not defined

Actually the HTML is just:

<!doctype html>
<html>
<head>
    <title>Test Extension</title>
    <link rel="stylesheet" style="text/css" src="style.css">
</head>
<body>
    <div id="test"></div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

The popup.js code just do this:

$("#test").html("Foo!");
Claudio
  • 496
  • 2
  • 9
  • 35
  • 1
    did you mean `$("#test").html("Foo!");` instead of `$.('#test')`? – CD.. Aug 20 '12 at 09:33
  • Yes. That was a distraction error. I'm going to edit the question. Shame on me. Of course the error is now a more indicative "$ is not defined" – Claudio Aug 20 '12 at 09:43

2 Answers2

17

Content scripts will never run in the context of an extension. The correct way to load scripts in your browser action popup is by including it in your code. Let your manifest file be:

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "options_page": "options.html",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

And popup.html:

...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 2
    Changing like you suggest, give me the following error: Refused to execute inline script because it violates the following `Content Security Policy directive: "script-src 'self' chrome-extension-resource:".` – Claudio Aug 20 '12 at 09:48
  • @theCrius Your real code contains inline scripts (either `` or event listeners, these are explicitly forbidden by the [Content security policy](http://code.google.com/chrome/extensions/contentSecurityPolicy.html) - see http://stackoverflow.com/a/10417745/938089. To solve it, move the code to an external file. – Rob W Aug 20 '12 at 09:51
  • Correction to my previous comment: By "event listener", I mean "inline event listener", eg. `` or ` – Rob W Aug 20 '12 at 10:00
  • That's weird because actually i've just edited the popup.html as you suggest and the error is still here. There is nothing in the html page. except the empty `
    ` Anyway, now i can see both the js loaded correctly in the console. The error appear in the html that confirm your observation.
     – Claudio Aug 20 '12 at 10:11
  • @theCrius Have you already reloaded the extension? Can you show your full code (either in the question, or on http://pastie.org/ or http://pastebin.com/ – Rob W Aug 20 '12 at 10:15
  • Yes, i've reloaded. Also tried removing and reinstalling the extension. Here's a link to the file source: http://db.tt/DglZbvyJ – Claudio Aug 20 '12 at 10:28
  • 2
    @theCrius You're including `popup.js` IN THE HEAD. That script is immediately executed, but the `` doesn't even exist yet. To solve that specific problem, wrap your code in a domready event handler: `$(function(){ $('#text').html('Foo!');});` - see http://api.jquery.com/ready/ – Rob W Aug 20 '12 at 10:31
  • you absolutely got the point and i absolutely need to refresh my jquery knowledge. Thanks **a lot** for your time. – Claudio Aug 20 '12 at 10:35
  • @RobW you write `Content scripts will never run in the context of an extension` - what does this mean exactly? Thx – Dan Oct 10 '14 at 14:17
  • 1
    @Dan I wrote that statement. The popup that shows up after clicking on the browserAction button is loaded from "chrome-extension://[EXTENSIONID]/popup.html". Content scripts can only be inserted on pages that match a certain [match pattern](https://developer.chrome.com/extensions/match_patterns). `chrome-extension:`-URLs cannot be matched by such patterns (for content scripts), so a content script cannot be run in extension pages, i.e. the context of a Chrome extension. Content scripts will always run in the renderer process of a tab. – Rob W Oct 10 '14 at 14:21
  • @RobW I have added my – Veverke Oct 28 '14 at 15:58
0
$.("#test").html("Foo!");

should be

$("#test").html("Foo!");

The error you are getting is consistent with this part of the code being incorrect.

Flater
  • 12,908
  • 4
  • 39
  • 62
  • 5
    The OP edited his question, so this is not applicable any more. I suggest to edit the answer or delete it. – Rob W Aug 20 '12 at 09:45
  • But now the error also has changed, so the answer was valid. However, I will append to it. – Flater Aug 20 '12 at 09:52