Я хочу написать расширение Chrome, которое реагирует на нажатие на определенный элемент на странице (пример страницы такого типа: https://www.mentimeter.com/s/ea1639a1b16e623b9c7b4bc884f86aae/cc3aaa4bae22).
Конкретный элемент, который меня действительно интересует, это элемент <rect>, но для простоты я привожу эту демонстрацию, которая показывает, что я могу заставить скрипт реагировать на нажатие элемента <div id="root"> высокого уровня но не его дочерний элемент <div class="application mm-ui"> (см. список элементов страницы на изображении).
Я был бы благодарен за любую подсказку о том, как я могу выбрать другие элементы ниже в DOM. Код jQuery для выбора элемента <div class="application mm-ui"> работает нормально, если я ввожу его в консоль javascript в Chrome Dev Tools вместо использования расширения.
В папку расширения входит загруженная копия jQuery 3.3.1 (имя: "jquery.js") в дополнение к manifest.json и content.js.
(Полагаю, есть способ загрузить страницу jQuery из googleapis, но мне пока не удалось узнать, как это сделать. Одна вещь за раз.)
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. Там больше.
Загадочная вещь заключается в том, что более простая версия, использующая vanilla JS, может без проблем выбирать элементы <rect>:
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);