jQuery not working on Chrome extensions

Question

As the title says, I am having trouble making jQuery work when a webpage is loaded, it runs a jQuery code to make every picture on the page into Nicolas Cage. I tried doing the code on the console, it runs fine. Here is the code:

Manifest.json

{
  // Required
  "name": "NC",
  "version": "1",
  "description": "NC",
  "manifest_version": 2,
    "content_scripts": [
    {
      "matches": ["*://*/"],
      "js": ["jquery.js", "nicolascage.js"]
    }
  ]
}

And the jQuery code:

$(document).ready(function(){
  $('img').attr('src', 'http://www.dreadcentral.com/img/news/jun11/niccage.jpg');
});

EDIT: I also get an error that says:

content: unsafeWindow retrieval failed! Do you use a script blocker like ScriptNo?

Any help would be appreciated! :)

Did you [include the JQuery library](http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn)? — Meredith, Jul 01 '13 at 02:59
@GeekyGamer14 In a now-deleted answer, you've said "Nevermind it's working". If that's true, can you delete the question? I guess that "jQuery not working on ____" is a common search term, but others who arrive at your question will be disappointed, because it doesn't match their problem at all. If you have experienced a real problem, please post what you've done to fix it in an answer, because it may help future visitors. Thanks! — Rob W, Jul 01 '13 at 08:28
I posted the answer, but I can't set it as the correct answer until 2 days. — tjhorner, Jul 01 '13 at 14:41

tjhorner · Accepted Answer · 2013-07-01T15:03:31.887

I just had to do a setTimeout method to make sure the DOM and every other element was loaded. I also set the src to everything (*) into Nicolas Cage. This ruins the JavaScript originally on the page but who cares! Here's my YouTube home page after it: https://i.stack.imgur.com/T74YF.png

Here's the finished extension, it's disguised as a new YouTube layout:

https://docs.google.com/file/d/0B4u1MIL7eQFrSmwwOHkzY2dGRVU/edit

score -1 · Answer 2 · answered Jul 01 '13 at 06:27

-1

I've always had trouble using jQuery on Chrome Extensions.

Here are a few options to try.

Replace the jQuery $ selector with jQuery as you never know what other libraries are being used on a particular webpage. Eg. Magento stores use Prototype which also use the $ variable. So your jQuery might be getting mixed up with another library depending on page.

Add the whole jQuery library to the top of your nicolascage.js - I mean literally copy the entire content of jquery.js and paste it above your jquery in nicolascage.js. (This is just to ensure the jQuery is being loaded before your script runs).

Look at what pages you're trying to run this on: "content: unsafeWindow retrieval failed! Do you use a script blocker like ScriptNo?" is not a standard error that I've ever seen in a browser and a quick google search brings me to believe it's from something called tampermonkey

answered Jul 01 '13 at 06:27

James

3,233
3
40
57

Point 1 is misleading, there's no way that a content script's jQuery instance conflicts with the page's, because they're run in different execution contexts. Point 2 is useless: content scripts are guaranteed to load in the order of declaration. Manually pasting a big JS library in front of your real code is asking for maintenance trouble. Point 3 is indeed not related to the question. So none of the suggested solutions are useful to anyone (1 and 2 are even on the edge of misleading), so I've voted accordingly. – Rob W Jul 01 '13 at 08:23
There was no real problem in the first place, the OP has acknowledged in a (deleted answer) that it worked. To quote him: "Nevermind... it worked... http://i.stack.imgur.com/xvLRi.png By the way, YouTube looks like that because of another extension I made that brings back the old layout." – Rob W Jul 01 '13 at 08:24
But then it stopped working. But then I just had it do a setTimeout for 1 second then it worked. And it's hilarious. http://i.stack.imgur.com/T74YF.png – tjhorner Jul 01 '13 at 14:03

jQuery not working on Chrome extensions

2 Answers2