Chrome扩展程序无法选择DOM元素 [英] Chrome extension unable to select DOM element

问题描述

我想编写一个Chrome扩展程序，以响应单击页面上的特定元素(此类页面的示例: https://www.mentimeter.com/s/ea1639a1b16e623b9c7b4bc884f86aae/cc3aaa4bae22 ).

I want to write a Chrome extension that reacts to the clicking on a specific element on a page (example of this type of page: https://www.mentimeter.com/s/ea1639a1b16e623b9c7b4bc884f86aae/cc3aaa4bae22).

我真正感兴趣的特定元素是<rect>元素，但是为了简单起见，我提供了此演示，该演示表明我可以使脚本对单击高级<div id="root">元素的反应做出反应而不是其子元素<div class="application mm-ui">(请参见图像中页面元素的列表).

The specific element I really am interested in is a <rect> element, but for the sake of simplicity I provide this demo which shows that I can get the script to react to the clicking on a high-level <div id="root"> element but not its child <div class="application mm-ui"> (see listing of page elements in image).

对于我如何选择DOM中其他较低元素的任何线索，我将不胜感激.如果我将<div class="application mm-ui">元素输入到Chrome开发工具中的javascript控制台而不是使用扩展名，则用于选择<div class="application mm-ui">元素的jQuery代码可以正常工作.

I would be grateful for any clue as to how I can select other elements lower down in the DOM. The jQuery code for selecting the <div class="application mm-ui"> element works fine if I enter it into the javascript console in Chrome Dev Tools instead of using the extension.

除了manifest.json和content.js之外，扩展文件夹还包含jQuery 3.3.1的下载副本(名称:"jquery.js").

The extension folder includes a downloaded copy of jQuery 3.3.1 (name: "jquery.js") in addition to the manifest.json and the content.js.

(我想还有一种方法可以使页面从googleapis下载jQuery，但我还没有设法找出方法.一次只能做一件事.)

(I guess there is also a way to make the page download jQuery from googleapis but I haven't yet managed to find out how. One thing at a time.)

manifest.json

 {
  "manifest_version": 2, 
  "name": "Mentimeter demo",
  "version": "0.1.0",
  "description": "Mentimeter demo",
 "content_scripts": [{
      "js": ["jquery.js","content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]
}

content.js

$(document).ready(function(){
//$("div#root").click(function(){//works
$("div.application").click(function(){//does not work
alert("click");
});
});

等待.还有更多.

Wait. There's more.

令人困惑的是，使用香草JS的更简单版本可以毫无问题地选择<rect>元素:

The puzzling thing is that a simpler version using vanilla JS manages to select the <rect> elements without problem:

manifest.json

{
  "manifest_version": 2,

  "name": "Vanilla JS selection demo",
  "version": "0.1.0",
  "description": "Vanilla JS selection demo",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]

content.js

document.addEventListener("click",function(event){
var target = event.target;
if(target.tagName.toLowerCase() == "rect"){
alert("rect clicked");
} 
},false);

推荐答案

如注释中所述:

使用@wOxxOm建议使用的jQuery事件委托.

Use what @wOxxOm has suggested use jQuery event delegation.

$(document).on('click', 'rect', function() { ...... }) 

或使用此易于使用的mutationObserver库 github.com/uzairfarooq/arrive 不想使用事件委托.

or use this easy to use mutationObserver library github.com/uzairfarooq/arrive if you don't want to use event delegation.

这篇关于Chrome扩展程序无法选择DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！