Home/ Questions/Q 8729561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:51:19+00:00

UPDATE: The problem is caused by including an old version of jQuery(1.4.2). After I

  • 0

UPDATE:

The problem is caused by including an old version of jQuery(1.4.2).
After I use 1.8.2 instead, the problem is just gone. But I still don’t
know why.

I recently made a Chrome extension. Thanks to the post chrome extension insert content script on browser action I realized that I have to include a js file like:

<script src="popup.js"></script>

But later I figure out it seems you cannot include more than one file:

<html>
  <head>
    <script src="jquery.js"></script> <!-- NOT LOADED -->
    <script src="popup.js"></script> <!-- LOADED -->
  </head>
  <body>
  </body>
</html>

What’s worse for me is that I cannot access the DOM of the popup HTML in the JS file. Like:

popup.html

<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>

popup.js

/*
  ... jQuery Codes here ... 
  jquery.js cannot be included via src="jquery.js" 
  but by copy and paste its source code here it works
*/
$("#intro").click(function(){
  alert("clicked"); // Not fireing at all
});

I am wondering what I can do to fix this. Thanks very much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a basic example of what you could use to get it working. My best guess is that it only appeared that jQuery wasn’t loading because of how your popup.js is set up (it is trying to attach the click functionality before the element has loaded). I’m no JS expert, so I’m sure others will have better ideas of how to wait for the DOM to load, but this works as a basic test (NOTE: this uses a local version of the latest version of jQuery (1.8.2 currently), as the new content policies in manifest 2 do not allow in-line scripts):

    Manifest.json

    {
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Testing",

  "browser_action": {
    "default_icon":   "my_icon.png",
    "default_title":  "My Text Extension",
    "default_popup":  "popup.html"
  },

  "permissions": [
    "tabs", "http://*/", "https://*/"
  ]
}

    Popup.html

    <html>
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>

    Popup.js

    /*
   Here we wait for the body of the popup to load before
   attaching our functionality
*/
window.onload = function() {
  $("#intro").click(function(){
    alert("clicked"); // Should fire now
  });
};
    • 0