不能在Chrome扩展中使用jQuery触发点击

人气:434 发布:2022-10-16 标签: jquery javascript google-chrome google-chrome-extension

问题描述

我正试图用一行jQuery代码创建一个Chrome扩展,但它不起作用。我正在尝试触发对元素的单击。

Chrome的控制台根本没有显示任何错误, 当我只将jQuery代码放入控制台时,它工作得很好。

我的代码:

content.js

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

背景.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);
});

mark.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文件并将其放在扩展文件夹中。

有人能解释一下为什么它不工作吗?

推荐答案

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

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

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

顺便说一句,这解释了当您将其放入控制台时它为什么会起作用--默认情况下,console executes in the page's context并触发页面的jQuery副本。

有很多方法可以克服这一点,但对于您的任务来说,最直接的方法是发出一个正确的DOM事件,该事件将被页面的代码捕获。有关示例,请参阅this question。

854