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

【问题标题】：How to track any click made on the page?如何跟踪页面上的任何点击？
【发布时间】：2017-01-21 23:50:56
【问题描述】：

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

是否可以在 Chrome 事件扩展中进行？还告诉我是否存在用于开发 Chrome 扩展的开发工具。谢谢。

【问题讨论】：

内容脚本内容仅自定义 JS，编写在本机 JS 上，但我似乎需要 chrome 事件。那么内容脚本中的事件是什么？
也许我可以在content_script 中使用这种方法？ chrome.browserAction.onClicked.addListener(function(tab) { });?
不，content_script 是内容脚本，browserAction 是工具栏图标弹出窗口。
那么，如何在 content.js 中调用事件点击？

标签： google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

您可以通过在页面的body 元素上实现click 处理程序来轻松检测用户在页面上的点击位置。触发的事件有一个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
});

【讨论】：