I want to write simple little extension with purpose of:
On YouTube main page the user can click and drag rectangular box (as on desktop or in any RTS), and all the videos that fit into the box - have their "3dots" button clicked, and then "Not interested".
As my professional background has 0(zero) web, I started from remembering HTML and CSS structure, and how JavaScript can manipulate those.
I made small extension(manifest and icon etc) with just:
- document.addEventListener('mousedown', mainMouseDownHandler, true);
- document.addEventListener("mouseup", mainMouseUpHandler, true);
- document.addEventListener("mousemove", mainMouseMoveHandler, true);
And inside each function I have put different console.log, just to be sure I'm doing it right.
Next I found example online how somebody draws with JavaScript on "canvas" element. However I do not see "canvas" on YouTube page. There are only flex containers inside other flex containers.
It dawned on me that it may be more complex than I have assumed(draw box - click).
Is this idea viable at all, or it's not that trivial for simple extension?
Example logic:
draw box - click ====
mouse pressed, mouse moved, calculate rectangle and all the components inside of it - get all "3dot menu" component --> "Not interested" button