Question

我尝试查找左键单击页面时调用的事件。它应该是带有关于点击和点击元素的数据的事件。我可以是文本，图像 - 任何HTML布局。

是否可以在Chrome Events Extensions中执行此操作？还告诉我是否存在用于开发Chrome扩展的开发工具。感谢。

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
});

如何跟踪页面上的任何点击？

1 个答案: