JavaScript Extension – marking multiple youtube videos as "Non-interesting" with mouse

Long time lurker, first time asking..

For almost a year I wanted 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 JS 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 JS 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?

Thanks in advance to all the replies.

draw box – click ====
mouse pressed, mouse moved, calculate rectangle and all the components inside of it – get all "3dot menu" component –> "Not interested" button

Source: Ask Javascript Questions