CODEWITHSUNDEEP
jquerygoogle-chrome-extensionmanifest
Claudio
Claudio

Reputation: 496

Loading jQuery into chrome-extension

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!");

Upvotes: 16

Views: 18208

Answers (2)

Flater
Flater

Reputation: 13763

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

should be

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

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

Upvotes: 0

Rob W
Rob W

Reputation: 348972

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>

Upvotes: 17

Related Questions