1

I am trying to make a Chrome extension with one line of jQuery code but it doesn't work. I'm trying to trigger a click on an element.

The console of chrome doesn't show any error at all, and when I put ONLY the jQuery code in console it works fine.

My code:

content.js

$(document).ready(function() {
  $('.like_post:contains(Like)').click();
});

background.js

chrome.windows.getCurrent( function(currentWindow) {
  chrome.tabs.query({active: true, windowId: currentWindow.id}, function(activeTabs){
    chrome.tabs.executeScript(
      activeTabs[0].id, {file: 'jquery-2.1.3.min.js', allFrames: true}
    );
    chrome.tabs.executeScript(
      activeTabs[0].id, {file: 'content.js', allFrames: true}
    );
  });
  console.log(currentWindow.id);
});

manifest.json

{
  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",

  "manifest_version": 2,
  "browser_action": {
    "name": "project with jquery",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery-2.1.3.min.js", "background.js", "content.js" ],

    "matches": [ "http://*/*", "https://*/*"]
  }]
}

I have also downloaded the jquery-2.1.3.min.js file and have it in the extension folder.

Can anyone explain why it doesn't work???

Xan
  • 74,770
  • 16
  • 179
  • 206
Konstantinos Natsios
  • 2,874
  • 9
  • 39
  • 74
  • 1
    I think you really didn't understand much about Chrome Extensions, and about Javascript/jQuery too. First of all what are you trying to click? There's no `` element, it doesn't exist, so the jQuery selector just fails to select it. Plus, why are you calling your script `background.js` and using it as a content script? Isn't it a bit confusing? Or did you mean to use it in the background? It isn't really clear what you're trying to do. – Marco Bonelli Feb 08 '15 at 19:51
  • Your jquery code seems incomplete and wrong.Is that the actual code. – roshan Feb 08 '15 at 19:52
  • SOMETHING is the thing im trying to click, in this case its just the class of one button. its nothing to do about because as i said in my post, when i put the jquery code in the console it works. so you suggest me to make one background.js with this code chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(tab.id, { allFrames: true, file: "content_script.js" }, function() { if (chrome.runtime.lastError) { console.error(chrome.runtime.lastError.message); } }); }); and one content_script.js with the jquery code? – Konstantinos Natsios Feb 08 '15 at 19:56
  • @roshan as i said when i put only this line of code in the console and push enter, it works fine. – Konstantinos Natsios Feb 08 '15 at 19:56
  • @MarcoBonelli i corrected some codes but still not working, can you check it pls? – Konstantinos Natsios Feb 08 '15 at 20:19
  • @ExpertSystem Mporeis na to checkareis ligo se parakalw poli? – Konstantinos Natsios Feb 08 '15 at 20:56
  • 1
    You really made your code worse.. I'll explain the root problem, but your previous version was more correct. – Xan Feb 08 '15 at 21:01

1 Answers1

8

The root cause of the problem is that extension content scripts execute in an isolated world. One of the reasons for this is so that your code does not conflict with the page's code: for instance, you can use a different version of jQuery.

So, your content script has its own copy of jQuery. The way jQuery's .click() works is by maintaining a list of event handlers that are triggered by the click..

..and you may see the problem already. The content script's copy of jQuery is not aware of the page's copy list of handlers, and cannot trigger them.

That, by the way, explains why it works when you put it in the console - by default, console executes in the page's context and triggers the page's copy of jQuery.

There are ways to overcome this, but the most straightforward for your task is to emit a proper DOM event, that will be caught by the page's code. See this question for an example.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • Ok i think i got what the problem is, but i have one question but if you [link](http://stackoverflow.com/questions/19458523/jquery-and-chrome-extension?rq=1) [/link] the answer is pretty much what im trying to do, although i copy pasted his codes etc. and it didnt work either. – Konstantinos Natsios Feb 08 '15 at 21:33
  • Then you haven't got the problem. The answer at the link modifies things with jQuery; you try to trigger an event that should be handled by the page. It won't work that easily. – Xan Feb 08 '15 at 21:34
  • ah... ok... so i have to modify the code. Look the real jquery code is `code` $(document).ready(function(){ $('.like_post:contains(Like)').click();}); `code` is there anyway that you could help me modify this? – Konstantinos Natsios Feb 08 '15 at 21:36
  • I could help, but it would be better if you slow down and read and think for yourself. Go through all links in my answer to begin with. – Xan Feb 08 '15 at 21:38
  • How can i contact you by email?? my email is kwstasna@hotmail.com if you can send me yours so i can show you what is it about. and you will understand cause im stuck in the javascript code. – Konstantinos Natsios Feb 08 '15 at 22:01
  • 1
    I have no intention of doing this, sorry. – Xan Feb 08 '15 at 22:08