Flying

Это делается через content scripts. Если вкратце - вам надо запросить permission на вставку content script (через манифест расширения) и внедрить скрипт в страницу. В content script'е вы, стандартным образом пишите обработчик события клика. Вот в этом разделе показано как вставлять скрипт на сайт с определённым доменом.

$(selector) возвращает объект jQuery, а document.querySelector() - DOM node. У последнего, очевидно, нет методов jQuery поэтому приведённый код document.querySelector("a").методJQ() работать не будет.

Делал как раз такое когда верстал для LDZ, так что можно подглядеть реализацию у них на сайте (самое верхнее меню). В целом думаю что можно обойтись и без JavaScript, просто такой задачи в том проекте не стояло. Сама идея тривиальная:

Есть две копии меню: одна для горизонтального меню другая - для вертикального. Для горизонтального меню используется flexbox с flex-wrap и ограничение высоты в 1 строку с overflow: hidden. Для вертикального - обычный список. Основная задача - при клике на триггер показа вертикального меню взять все пункты меню из горизонтального варианта и либо скопировать их в вертикальное либо перенастроить видимость пунктов вертикального меню в зависимости того "завёрнуты" ли соответствующие пункты горизонтального меню в дополнительные строки.

Я у себя сделал вот так: на событие timeupdate повесил обработчик который при наступлении события (и в случае если плеер играет) перезапускает отложенный вызов функции (через clearTimeout / setTimeout) в которой я запускаю отображение индикатора загрузки данных.

На мой взгляд работает как и должно.