0

I want to create an extension/tool that will track which elements I click on, on any given webpage.

For example: <html> <button id="firstButton">Click Me</button> </html>

Whenever I click on the button, I would want to store the data associated with this tag: button, id is "firstButton", etc

My question is do I have to create a browser extension or can I access my browser actions via some log file or other way? And if using an extension, what functions(javascript) can I use to get this data?

I successfully got this to work with Javascript in a popup modal I created but couldn't get anything in the seperate DOM of the browser window, why is that? I used: document.addEventListener = function(event) { And it worked fine with the popup.

user19796809
  • 1
  • The question is rather vague. "store" where? On a server, in browser localStorage, in a file on the client's disk? What do you mean by "seperate [sic] DOM of the browser window"? Also, rather than override `document.addEventListener`, you need to instead override `EventTarget.prototype.getEventListener` of the window you are capturing. Since you want it to work on any page, yes, you need to make a browser extension. – Amadan Aug 18 '22 at 19:37
  • Also, you will need to use script injection to access the correct `window` (in order to see the correct `window.EventTarget`). See [Use a content script to access the page context variables and functions](https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions/9517879#9517879). – Amadan Aug 18 '22 at 19:48
  • @Amadan When I interact with my plugin I am able to access the elements on the popup/modals DOM but I don't get anything when I click on elements in the actual webpage. I'll look into the function you listed. Thanks! – user19796809 Aug 18 '22 at 19:50
  • Yes, because popup `window` and content `window` are separate windows. And you need to override `window.EventTarget.prototype.addEventListener` (on the content window) otherwise you won't log events that get prevented by other listeners; and the function you override with must log the event and then invoke `originalAddEventListener.apply(this, arguments)`, otherwise you break all other events. And you can only access the content window using script injection (for your use case). – Amadan Aug 18 '22 at 19:53
  • Awesome this is what I needed and that other answers helped a lot! – user19796809 Aug 18 '22 at 19:57
  • One more thing - if you are sending the data to a server, `fetch` or `XMLHttpRequest` from the content window might be cancelled, if the event causes a new page to load. Either `sendMessage` to the extension window and send data from there, or better yet, use [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon), since unlike the regular AJAX methods it really is fire-and-forget, and you can use it directly from the content window's injected script. – Amadan Aug 18 '22 at 20:06
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Aug 19 '22 at 01:19

0 Answers0