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???

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???

• javascript
• jquery
• google-chrome
• google-chrome-extension

• 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 <SOMETHING> 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 Commented Feb 8, 2015 at 19:51
• Your jquery code seems inplete and wrong.Is that the actual code. – roshan Commented Feb 8, 2015 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 Commented Feb 8, 2015 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 Commented Feb 8, 2015 at 19:56
• 1 You really made your code worse.. I'll explain the root problem, but your previous version was more correct. – Xan Commented Feb 8, 2015 at 21:01

1 Answer 1

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 overe 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.