无法在 Chrome 扩展程序中使用 jQuery 触发点击

Question

我正在尝试使用一行 jQuery 代码进行 Chrome 扩展，但它不起作用。我正在尝试触发对元素的点击。

chrome的控制台根本没有显示任何错误，当我只在控制台中输入 jQuery 代码时，它工作正常。

我的代码：

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://*/*"]
  }]
}

我也下载了 jquery-2.1.3.min.js 文件并将其放在扩展文件夹中。

谁能解释为什么它不起作用？？？

Answer 1

问题的根本原因是扩展内容脚本在 isolated world 中执行。这样做的原因之一是您的代码不会与页面的代码冲突：例如，您可以使用不同版本的 jQuery.

因此，您的内容脚本有自己的 jQuery 副本。 jQuery 的 .click() 的工作方式是维护一个由点击触发的事件处理程序列表..

..您可能已经看到问题了。 jQuery 的内容脚本副本不知道页面的处理程序副本列表，并且 cannot trigger them.

顺便说一句，这解释了为什么当您将它放入控制台时它会起作用 - 默认情况下，并触发页面的副本 jQuery。

有很多方法可以克服这个问题，但最直接的任务是发出 proper DOM 事件，该事件将被页面代码捕获。有关示例，请参阅 this question。

无法在 Chrome 扩展程序中使用 jQuery 触发点击

Can't trigger click with jQuery in a Chrome extension

javascript

jquery

google-chrome

google-chrome-extension