Как отслеживать клики, сделанные на странице?

Question

Я пытаюсь найти событие, которое вызывается, когда я нажимаю на страницу. Это должно быть событие, в результате которого были сделаны данные об щелчке и элементе под кликом. Я могу быть текстом, изображением - любой макет HTML.

Возможно ли это сделать в расширениях Chrome Events? Также скажите, существует ли dev инструмент для разработки Chrome Extensions. Благодарю.

Answer 1

Вы можете определить, где пользователь легко нажимает на страницу, выполнив обработчик click на элементе body. Учтенное событие имеет свойство target, которое идентифицирует элемент, на который пользователь нажал.

Ниже приведена простая реализация. За ним следует конкретная идея расширения для работы на любой странице, где вы вводите код через скрипт контента, и используете обмен сообщениями для отправки данных на фоновую страницу через скрипт контента (вы не можете отправить прямо на задний план страница).

var clickTable = document.getElementsByClassName('click_table')[0]; 
 

 
document.body.addEventListener('click', function(e) { 
 
    var row = document.createElement('tr'); 
 

 
    var tag = document.createElement('td'); 
 
    tag.innerHTML = e.target.tagName; 
 

 
    var id = document.createElement('td'); 
 
    id.innerHTML = e.target.id; 
 

 
    var className = document.createElement('td'); 
 
    className.innerHTML = e.target.className; 
 

 
    var parent = document.createElement('td'); 
 

 
    parent.innerHTML = e.target.parentElement ? e.target.parentElement.id ? e.target.parentElement.id + '/' : '' + e.target.parentElement.className : ''; 
 

 
    row.appendChild(tag); 
 
    row.appendChild(id); 
 
    row.appendChild(className); 
 
    row.appendChild(parent); 
 

 
    clickTable.appendChild(row); 
 
});

.red_box { 
 
    position: relative; 
 
    background: red; 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
.blue_box { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    background: blue; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.click_table { 
 
    margin-top: 10px; 
 
} 
 

 
.click_table tr td, .click_table tr th { 
 
    padding: 4px; 
 
}

<div class="red_box"> 
 
    <div class="blue_box"> 
 
    </div> 
 
</div> 
 

 
<table class="click_table" border="1"> 
 
    <tr> 
 
     <th>Tag</th> 
 
     <th>Id</th> 
 
     <th>Class</th> 
 
     <th>Parent Id/Class</th> 
 
    </tr> 
 
</table>

Для расширения Chrome, вы могли бы сделать что-то вроде:

В click обработчика, после получения данных, отправка событие:

var event = document.createEvent('Event'); 
event.data = row; // whatever data you want 
event.initEvent('click_from_page'); 
document.dispatchEvent(event); 

Контент-скрипт:

Скрипт контента может прослушивать событие и пересылать эти данные на фоновый рисунок.

document.addEventListener("click_from_page", function(e) { 
    chrome.runtime.sendMessage(e.data); 
}); 

Справочная страница:

Фоновая страница может прослушивать событие отправить из скрипта содержимого.

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { 
    // received the data from content script 
});