Adding jquery in developing a chrome extension [duplicate]

问题

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 ?!?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/26533130/adding-jquery-in-developing-a-chrome-extension

标签

google-chrome-extension