Chrome扩展上的JQuery代码不起作用 [英] JQuery code on Chrome Extension doesnt work

问题描述

我试图用一行jQuery代码创建一个chrome扩展，但它不起作用。 chrome的控制台在所有
都没有显示任何错误，当我只在控制台中使用jquery代码时，它工作正常。

这里有这些代码。
content.js

  $（document）.ready（function（）{$ （ '.like_post：包含（像）'）点击（）;}）; 
  

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。日志（currentWindow.id）; 
}）; 
  

manifest.json

  {
name：插件名称，
version：0，
description：什么我做了一个扩展，
 
manifest_version：2，
browser_action：{
name：带jquery的项目，
图标：[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文件并将其放在扩展文件夹中。

任何人都可以看到它为什么不起作用吗？

感谢您阅读本文的时间。

解决方案

问题的根本原因在于，内容脚本在孤立的世界。其中一个原因是，您的代码不会与页面代码发生冲突：例如，您可以使用不同版本的jQuery。

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

<你可能已经看到了问题。内容脚本的jQuery副本不知道该页面的处理程序副本列表，并且无法触发。

顺便说一句，它解释了为什么当你把它放在控制台中时 - 默认情况下，控制台在页面的上下文中执行并触发页面的jQuery副本。

有许多方法可以解决这个问题，但最直接的任务是发出一个正确的 DOM事件，该事件将被页面的代码捕获。有关示例，请参阅此问题。

I am trying to make one chrome extension with one line of jquery code but it doesnt work. The console of chrome doesnt show any error at all and when i put ONLY the jquery code in console it works fine.

I have these codes here. 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 see why it doesnt work???

Thanks for your time reading this.

解决方案

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.

这篇关于Chrome扩展上的JQuery代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！