YouTube – don’t display context menu on right click

greasemonkeyyoutube

The idea: seek YouTube video by dragging and dropping on the video player with right button (e.g. 1 second for every 2% of screen width). So on a 1920×1080 screen, if I press the right mouse button, drag it some 384px (20%) to the left and then release it, the video should rewind by 10 seconds.

I have a GreaseMonkey script which does pretty much what I want, but the context menu still pops up when I release the button. This is not the default context menu, but YouTube's custom context menu, which is presumably somewhere somehow bound to the mouseup event. I want to get rid of this menu, and I also want to prevent the default context menu from opening.

Is there a way I can change default actions on mouse events? I want to keep all other actions (left click, keyboard actions, etc.). I have not found a way to remove event handlers on an element for a specific event.

if (window.top === window.self) {
  // YT video cannot be manipulated from the scope in which GM is running
  // so we add a <script> element in the document to make it work
  addJsNode(installListeners)
}

function installListeners() {

  const FACTOR = screen.width / 70

  const mp = document.getElementById('movie_player')

  let startpos

  mp.onmousedown = (e) => {
    // only using FF so cross-browser compatibility is not required
    if (e.button == 2) { startpos = e.clientX }
  }

  mp.onmouseup = (e) => {
    if (e.button == 2) {
        //===> somehow prevent YT from displaying context menu
        const diff = e.clientX - startpos
        mp.seekBy(diff / FACTOR)
    }
  }

}

function addJsNode(func) {
  var scriptNode = document.createElement('script')
  scriptNode.type = 'text/javascript'
    scriptNode.textContent = '('+func.toString()+')()'

  var target = document.getElementsByTagName ('head')[0] ||
                        document.body || document.documentElement

  target.appendChild(scriptNode)
}
Related Topic