I'm attempting to make a Chrome extension that records the number of clicks, keystrokes, and time spent within a certain period of time on a given website (e.g., 45 clicks, 296 keystrokes, and 129 minutes spent on Facebook within one week). I've never coded before and the course I'm writing this code for did not cover Chrome extensions.
So far, I've figured out how to make a simple message appear in the console log when I click the webpage (code given below), but that's about it. How would I export the number of clicks to a .csv?
manifest.json
"name": "Social Media Consumption Tracker",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["https://www.facebook.com/*",
"http://www.facebook.com/*"],
"js": ["content.js"]
}
],
"permissions": ["tabs"]
}
content.js
document.addEventListener("click", e=> {
console.log("Hey there")
})
Thank you in advance for your help.
I would suggest sending what you have been recording (the clicks and actions) to the background.js file and manipulating it
you can do that using chrome.runtime.send messages and chrome.runtime.onMessage`
Then after that, generate a download link inside your extension popup to allow the user to download the CSV
(you can generate the file the background file)
I think what you need for tracking clicks is the chrome.storage api and Maps
var currentDomain = new URL(location.href).hostname;
document.addEventListener("click", e=> {
increaseEventCounter("click");
})
function increaseEventCounter(event) {
chrome.storage.local.get(['youNameIt'],(result) => {
let youNameIt = result.youNameIt;
let currentWebsiteEventCounter = youNameIt.get(currentDomain).get(event);
youNameIt.get(currentDomain).set(event, currentWebsiteEventCounter + 1);
chrome.storage.local.set({'youNameIt': youNameIt});
}
}I think storage won´t keep the type of youNameIt, so you need to find a way to cast it again to Map<String,Map<String,Int>>.
Another function which adds new Websites to youNameIt with the counter of every Event you track set to 0.
Search stackOverflow on how to track timeSpend on different Websites, i´m sure there are already answers for that.