Chrome: Uncaught ReferenceError jQuery is not defined

Question

I am trying to build a chrome extension. It takes the username's background picture url and puts it to the page. But it gives unexpected error. The error text is:

The page at https://twitter.com/jack ran insecure content from http://api.twitter.com/1/users/show.json?screen_name=jack&callback=jQuery18207089675806928426_1351333462593&_=1351333462594.

Uncaught ReferenceError: jQuery18207089675806928426_1351333462593 is not defined (anonymous function)

error message

The extension folder contains these files:

action.js // background.html // jquery.min.js // manifest.json

folder

action.js:

var userPage = document.URL;

var arr = userPage.split("/");
var username = "";
for(i=3;i<4;i++)
    username += arr[i];

var page = "http://api.twitter.com/1/users/show.json?screen_name="+username+"&callback=?"; 

background();

function background() {
        $.getJSON(page, function(data) {
            $("span.screen-name").append(" • <a href='"+data.profile_background_image_url+"'>B</a> • ");
        });     
}

background.html:

<html>

<head>
<script type="text/javascript" src="/javas.js"></script>
</head>

<body>
</body>

</html>

jquery.min.js is taken from http://code.jquery.com/jquery-1.8.2.min.js

manifest.json:

{
  "name": "Twitter Background",
  "version": "1.0",
  "background_page": "background.html",
  "description": "Puts the background image url to the profile page.",
   "content_scripts": [
    {
      "matches": ["http://twitter.com/*","https://twitter.com/*"],
      "js": ["jquery.min.js","action.js"],
      "all_frames":true

    }
  ]
}

score 4 · Accepted Answer · edited May 23 '17 at 12:27

The first error ("The page at https:... ran insecure content from http://...") is just a warning, and non-critical.

The second error is caused by the difference in execution context. See Chrome extension code vs Content scripts vs Injected scripts. As you can see by looking at the first warning, a JSONP request is made. This means that a <script> element is injected in the page. This script calls a function (jQuery182....), which cannot be found, because jQuery was loaded in the context of a content script.

To solve the problem, either inject action.js in the page, or (recommended) add https://api.twitter.com/* to the permissions section of your manifest file, and don't use ?callback=? in the URL you're passing to $.getJSON.

Chrome: Uncaught ReferenceError jQuery is not defined

1 Answers1

Linked