How to get index of iframe in chrome extension - google-chrome-extension

Question

I'm working on an extension that collects clicks from a page.
I've a script that on each click report back (to the background.js) the x/y coordinates of the click. I'm not sure on how to get the index of the iframe that send the message back to the background.js.
I know selenium IDE/Katalon.. does it, but I'm not sure how they managed to do that.
Any idea is welcomed, thanks.
manifest.json:
{
"name": "example",
"version": "0.0.1",
"manifest_version": 2,
"description": "testi",
"homepage_url": "http://woop.weep",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"],
"js": [
"content_frame.js"
],
"match_about_blank": true,
"all_frames": true
}],
"browser_action": {
"default_title": "woop!"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs",
"system.display"
]
}
background.js:
console.log("BACKGROUND");
let data = {baseUrl: false, actions: [], display: false};
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(tab.id, {
file: 'inject.js'
});
});
chrome.tabs.onActivated.addListener( function(activeInfo) {
console.log("Changed tab to ",activeInfo);
console.log("got recorded user action");
chrome.tabs.query({active: true, currentWindow: true}, function(activeTab){
console.log("activeTab: ",activeTab);
data.actions.push({type:"userAction", action: "switchTab", tabUrl: activeTab[0].url, tabIndex: activeTab[0].index});
console.log("data.actions after switch tab: ",data.actions);
});
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("request: ",request);
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.type == "userAction"){
console.log("got recorded user action");
if (request.action=="click"){
let lastAction = data.actions[data.actions.length-1];
console.log("PRE EPOCH CHECK");
console.log("request: ",request);
console.log("lastAction: ",lastAction);
if (lastAction && request.epoch -lastAction.epoch< 2){
console.log("Got a double click, merge previous event with the new one");
data.actions[data.actions.length-1].action = "doubleClick";
request = data.actions[data.actions.length-1];
}
else{
data.actions.push(request);
}
}
console.log("collected data: ",data);
sendResponse({feedback: request, data: data});
}
});
content_script:
function sendMessageToExtension(messageObj){
chrome.runtime.sendMessage(messageObj , function (response) {
if (response) {
console.log("got a response: ",response);
} else {
console.log("no response from extension");
};
});
}
console.log("WOOOOOOOOOOOP "+ window.location.href);
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
window.cordX = event.pageX;
window.cordY = event.pageY;
// console.log(event.pageX+","+event.pageY)
// Use event.pageX / event.pageY here
}
})();
function eventClick(evt) {
console.log("evt: ",evt);
if (!window.cordsForAction){
window.cordsForAction = {};
};
let epoch = Math.round((Date.now()/1000));
console.log("clicked at: " + window.cordX + "," + window.cordY + " at location: " + window.location+ ", epoch: "+epoch);
let cords = {"x": window.cordX, "y": window.cordY};
if (window.cordsForAction[epoch]){
}
else{
window.cordsForAction[epoch] = cords;
sendMessageToExt("click", cords, epoch);
delete window.cordsForAction[epoch];
};
}
async function sendMessageToExt(actionType, cords, epoch){
chrome.runtime.sendMessage({"type": "userAction" ,"action": actionType, cords: cords, epoch: epoch}, function (response) {
if (response) {
console.log("got a response");
if (response.feedback) {
console.log("response.feedback:", response);
}
} else {
console.log("no response from extension");
};
});
}
function setDocOnClickEvent(){
window.cordsForAction = [];
document.querySelectorAll("*").forEach((el)=>{ el.onclick = eventClick});
console.log("setDocOnClickEvent");
}
function setChromeOnMessage(){
console.log("setChromeOnMessage");
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.type == "dataFromExtensionForPlay") {
console.log("got the message for dataFromExtensionForPlay, request.data: ",request.data);
};
});
}
function addRuntimeOnConnectListener(){
console.log("addRuntimeOnConnectListener");
chrome.runtime.onConnect.addListener(port => {
console.log('connected ', port);
});
}
addRuntimeOnConnectListener();
setDocOnClickEvent();
setChromeOnMessage();