Disable Youtube shortcuts or another workaround

Question

I´ve been trying to get this to work for a while now and already searched for all the keywords i came up with.

I´m building a Chrome Extension, which opens a Modal on distracting Websites prompting the user to input what his intentions on this website are.

There might be more sites where this problem could occur, i only encountered youtube so far.

When the user inputs something youtube shortcuts are still active and the input field might lose focus. Let´s say someone inputs a 'f', youtube then fullscreens the video/ 'k' youtube start or stops the video.

Is there a way to disable youtube shortcuts ? Or another workaround, i´m not thinking of?

The Modal is inside a shadowRoot so it doesnt interfere with the styling of the website.

Answer 1

An event is dispatched in two phases:

1. capturing, where the event travels from window to the element via its DOM tree ancestors,
2. bubbling, where the event travels from the element to window, the default phase.

The solution is to register a listener in the first phase (capturing) on the first dispatch target (window), and stop the event so it never reaches the default second phase where the site is listening.

window.addEventListener('keydown', stopPropagation, true);

function stopPropagation(e) {
  e.stopPropagation();
}

When your dialog is closed, restore the site's behavior:

window.removeEventListener('keydown', stopPropagation, true);

P.S. On sites that already register a listener on window in the capturing phase you will have to attach your listener earlier by declaring the content script with "run_at": "document_start" and cancel the other listeners on window by adding e.stopImmediatePropagation().