Adding jquery in developing a chrome extension

Question

I looked at several posts about adding jquery in developing a chrome extension - but most are old and use manifest options that were deprecated (such as "background_page"). I have already added the "content_scripts" member. I still get "Uncaught ReferenceError: $ is not defined ".

Taking the simplest possible scenario - building upon Chrome's extension sample to add jquery to it - we would have something like:

Manifest:

{
  "manifest_version": 2,

  "name": "myExt",
  "description": "myExt Desc",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "content_scripts": [ 
    {
      "js": [ "jquery.js", "myScript.js" ],
      "matches": [ "http://*/*", "https://*/*" ] 
    } 
  ]
}

myScript.js:

//var myObj = {
//    execute: function () {
//        $("#btn1").click(function () {
//            alert('I was clicked indeeeed!');
//        });
//    }
//}

//document.addEventListener('DOMContentLoaded', function () {
//    myObj.execute();
//});

$("#btn1").click(function () { alert('iae'); });

popup.html:

    <html>
    <head>
    
        <title>Getting Started Extension's Popup</title>
        <style>
            body
            {
                min-width: 357px;
                overflow-x: hidden;
            }
            img
            {
                margin: 5px;
                border: 2px solid black;
                vertical-align: middle;
                width: 75px;
                height: 75px;
            }
        </style>
        <!--
          - JavaScript and HTML must be in separate files: see our Content Security
          - Policy documentation[1] for details and explanation.
          -
          - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
         -->
        
         <script src="myScript.js"></script>
        
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Hey 
                </td>
                <td>
                    There
                </td>
            </tr>
            <tr>
                <td>
                    This is an extension!
                </td>
                <td>
                    <input type="button" id="btn1" value="Click Me" />
                </td>
            </tr>
        </table>
    </body>
    </html>

I have all files in the same directory (popup.html, icon.png, manifest.json, myScript.js, jquery.js). There are no errors whatsoever in the html, nor in the script. The only error I get upong clicking [Inspect popup] is: Uncaught ReferenceError: $ is not defined

What am I missing ?!?

What's the content of popup.html? – Rob W Oct 23 '14 at 20:26 — Rob W, Oct 23 '14 at 20:26
I've added the contents of popup.html – Veverke Oct 28 '14 at 13:33 — Veverke, Oct 28 '14 at 13:33

score 2 · Accepted Answer · answered Oct 28 '14 at 13:49

You have not, in fact, included jQuery for your popup.

A Content Script defined in the manifest only applies to pages you specified in the manifest. In your case, any page on http and https scheme - but a popup has an effective URL chrome-extension://yourextensionsidhere/popup.html, and so it is not injected.

Content scripts are, conceptually, for pages you do not control. As a consequence, even if you could make Chrome inject the script, it would still not work for the code in the page because of the isolated context principle.

Since you have full control over your extension's pages, you need to manually include scripts with <script> tags.

<script src="jQuery.js"></script>
<script src="myScript.js"></script>

Read the Architecture Overview for a better understanding of what content scripts do and how they relate to your extension's own pages.

As an aside, you will still need to wrap your code in $(document).ready(), as your code will execute before #btn is in DOM.

Thanks Xan, you provided what I have asked for - the "quick fix" for making it work - AND also provided me with material for getting a better understanding (developer.chrome.com/extensions/overview#arch). — Veverke, Oct 28 '14 at 16:27

score 0 · Answer 2 · answered Oct 24 '14 at 15:31

0

It sounds like you're saying there's no error in the dev tools console for the page (+ content scripts) you're loading, but the dev tools console for the popup (activated from "Inspect Popup" for your extension) is showing the error you mention.

I'd guess either your popup.html is using $ in some inline script, or your jquery.js is somehow empty. If the former, make sure you put a <script> tag to load jquery there before using it. Your content script should have access to it already, from what you've done in the manifest, but I don't believe that makes it available to the popup.

answered Oct 24 '14 at 15:31

Brian Henry

3,161
1
16
17

Hi Brian, about your 1st paragraph: You got it right. That's correct. About the 2nd paragraph of your answer: There is no javascript whatsoever in popup.html. Only a – Veverke Oct 28 '14 at 13:35
1

Because content script section does NOT apply to `chrome-extension://` URLs, which is what a popup page uses. Even if it _did_, by design content scripts are isolated from the page itself. Required reading: [Architecture Overview](https://developer.chrome.com/extensions/overview#arch). – Xan Oct 28 '14 at 13:41

Adding jquery in developing a chrome extension

2 Answers2

Linked