2

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

Nimantha
  • 5,793
  • 5
  • 23
  • 56
shnobel
  • 21
  • 2
  • Please take the [tour] and read [ask]. – jonrsharpe Mar 29 '21 at 21:29
  • 1
    There's no need for a canvas usually. Just add your own div with CSS style and resize it in `mousemove` event. This is a popular thing so there should be lots of examples. As for the ultimate functionality see [YT: not interested in one click](https://greasyfork.org/en/scripts/396936-yt-not-interested-in-one-click) (in your extension you'll need to add code in [page context](/a/9517879) to extract `data` stuff). – wOxxOm Mar 30 '21 at 05:44

0 Answers0