Unable to use jQuery in chrome extension

Question

I am trying to figure out why I am not able to use jQuery in my extension, I am an absolute beginner, but in theory this should do the job:

manifest

{
    "manifest_version": 2,
    "name" : "iD",
    "version" : "0.1",
    "description" : "iD",
    "browser_action" : {
        // "default_icon" : "icon.png",
        "default_popup" : "popup.html",
        "default_title" : "iD"
    },
    "content_scripts": [ {
        "js": [ "jquery.min.js", "app.js" ],
        "matches": [ "http://*/*", "https://*/*"]
    }]
}

popup.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

app.js

$("body").append("Hello World");

Yet all I see is an empty popup instead of "Hello World"

Are you sure your app.js runs AFTER the HTML finished loading? Try window.onload or a setTimeout to check that. — Florian Wendelborn, Jul 23 '15 at 14:28

score 4 · Accepted Answer · answered Jul 23 '15 at 14:28

You can't inject content scripts into extension pages (popup included).

You need to:

Read the Architecture Overview.

Add the scripts directly to your popup:

<script src="jquery.min.js"></script>
<script src="app.js"></script>

(the comment raises a valid point) For all DOM manipulation, wrap your code in the ready() event:
```
$(document).ready(function() {
  /* Manipulate DOM here */
});
```

Unable to use jQuery in chrome extension

1 Answers1

Linked