Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Using jQuery inside a chrome extension

    I'm trying to build a chrome extension that uses jQuery for various things. I don't get any errors what the extension loads (so I guess it's included jQuery okay?). But any click/change functions don't work.

    Here's what I have so far.

    manifest.json
    Code:
    {
      "manifest_version": 2,
    
      "name": "Reminders",
      "description": "My first extension for making reminders",
      "version": "1.0",
    
      "content_scripts": [{
            "js": [
                   "jquery.min.js",
                   "popup.js"
                  ],
            "matches": [ "http://*/*", "https://*/*"]
       }]
      ,
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "index.html"
      }
    }
    popup.js
    Code:
    $(document).ready(function(){
       $('#add').click(function(){
          alert('test'); 
       });
       
       alert('first Alert');
    });
    index.html
    Code:
    <!doctype html>
    <html>
      <head>
        <title>Getting Started Extension's Popup</title>
        <!--
          - 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 type="text/javascript" src="jquery.min.js"></script>
        <script src="popup.js"></script>
      </head>
      <body>
          <input type="text" placeholder="Name" id="nameBox" /> - <input type="button" id="add" value="Add" />
          <span id="name2"></span>      
      </body>
    </html>
    The 'first Alert' pops up so I'd guess jquery has been included, but the click function doesn't do anything. Can anyone see whats wrong?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you are building this as an extension you must include absolute links to any external scripts. the way you have them linked, they will load from the immediate working folder, which wont exist for an outside user. Your jQuery doesnt work becuase your jQuery is most likely not loading at all. I would suggest you use a cdn link for jQuery

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    I'm not sure what fixed it but it seems to be working now, however I am using a local copy of jquery so I'll link to the jquery hosted copy instead, thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •