Нажатие кнопки с Javascript на официальном сайте (расширение Chrome)

Question

Я пытаюсь создать расширение Chrome, которое нажимает кнопку на веб-сайте с помощью метода DOM.click ().(https://www.w3schools.com/jsref/met_html_click.asp)

РЕДАКТИРОВАТЬ: целью этого расширения Chrome является создание сочетания клавиш для включения / выключения английских субтитров при просмотре видео на иностранном языке. При использовании мыши и перетаскивания ее, чтобы открыть менювключать субтитры, когда они вам нужны, может быть неудобно, если вы пытаетесь понять язык без субтитров. Я хотел создать сочетание клавиш, которое бы сразу включало субтитры. Примером такого веб-сайта является (https://www.ondemandkorea.com/ask-us-anything-e102.html)

<button type="button" class="jw-reset jw-settings-content-item" role="menuitemradio" aria-checked="false">English</button>

Это кнопка на веб-сайте, которую я пытаюсь нажать с помощью Javascript

В моем коде у меня есть прослушиватель окна, который ожидает загрузки определенного веб-сайта. Затем, чтобы найти кнопку, которую я хочу нажать, я вызываю document.getElementsByClassName ("Имя класса") и просматриваю массив возвращенных элементов для кнопки с надписью English и сохраняю еев var englishButton . Я добавляю еще одного слушателя, который прослушивает нажатие клавиши клавиатуры, которая в свою очередьesses englishButton .

Однако, когда я нажимаю комбинацию клавиш, englishButton.click (); , похоже, ничего не делает.Я знаю, что найдена правильная английская кнопка, и что мой обработчик ярлыков работает с помощью операторов console.log () .

Не могу понять, почему кнопка выиграла 't click.

EDIT: после добавления buttonListener к коду английская кнопка все-таки щелкает, но не включает субтитры для видео

Вот мой код.

  /*
Looking for the subtitle button that states "English"
*/
var englishButton;
window.addEventListener("load", function(event) {

    var buttonList = document.getElementsByClassName('jw-reset jw-settings-content-item');

    for (var i = 0, len = buttonList.length; i < len; i++){
        if(buttonList[i].textContent === "English") {
          englishButton = buttonList[i];
          break;
        }

    }
    englishButton.addEventListener('click', function() {
      console.log('englishButton clicked!');
    });

    /*
    Event Listener that detects when the shortcut key is hit.
    When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
    */

    document.addEventListener('keyup', function(e){
        if(e.key === shortcutKey){
          console.log('shortcut pressed')
          englishButton.click();
        }
      }
    );

});

Answer 1

Переместите весь свой код в load слушатель:

https://codepen.io/ryanpcmcquen/pen/EOerPM?editors=1011

window.addEventListener("load", function(event) {
   /*
   Looking for the subtitle button that states "English"
   */
   var englishButton;
   // console.log('Website loaded. englishButton:', englishButton);
   var buttonList = document.getElementsByClassName("jw-reset");

   for (var i = 0, len = buttonList.length; i < len; i++) {
      if (buttonList[i].textContent === "English") {
         englishButton = buttonList[i];
         // console.log("englishButton found", englishButton);
         break;
      }
   }
   // console.log("End of window-load's callback. englishButton:", englishButton);
   /*
   Event Listener that detects when the shortcut key is hit.
   When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
   */
   document.addEventListener("keyup", function(e) {
      console.log(
         "Inside document-keyup's callback. englishButton:",
         englishButton
      );
      if (e.key == "z") {
         //Logic to press the subitle button
         console.log(
            "Key matched: ",
            e.key,
            "Now click button. englishButton:",
            englishButton
         );
         englishButton.click();
         console.log("Shortcut Key");
      } else {
         console.log("Random Key");
      }
   });

   englishButton.addEventListener("click", function() {
      console.log("englishButton clicked!");
   });
});

<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
</head>

<body>
   <button type="button" class="jw-reset">English</button>
</body>

</html>

Но есть некоторые вещи, которые можно улучшить в вашем коде, поэтому давайте взглянем на более «модернизированную» версию вашего кода (комментарии в коде):

// Using the `window` `load` event is fine, but
// you should prefer the `document` `DOMContentLoaded`
// event when possible, since it fires when the DOM
// has been constructed, while `load` means all assets have fully loaded (images).
// For your case since you are relying only on elements,
// `DOMContentLoaded` is a better choice.
document.addEventListener("DOMContentLoaded", function(event) {
   /*
   Looking for the subtitle button that states "English"
   */
   var englishButton;

   // Use `querySelectorAll` since it is more dynamic and
   // will accept any type of selector. Also, for loops
   // are avoided in most modern JavaScript because
   // they create scoping and off-by-one errors.
   // Since you want to break out of the loop here,
   // we will use `.some()`. `Array.prototype.slice.call()`
   // converts the NodeList returned by `querySelectorAll`
   // into an Array.
   Array.prototype.slice.call(document.querySelectorAll(".jw-reset")).some(
       function (button) {
           if (button.textContent === 'English') {
               englishButton = button;
               return true;
           }
       }
   );
   
   /*
   Event Listener that detects when the shortcut key is hit.
   When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
   */
   document.addEventListener("keyup", function(e) {
      console.log(
         "Inside document-keyup's callback. englishButton:",
         englishButton
      );
      if (e.key === "z") {
         //Logic to press the subitle button
         console.log(
            "Key matched: ",
            e.key,
            "Now click button. englishButton:",
            englishButton
         );
         englishButton.click();
         console.log("Shortcut Key");
      } else {
         console.log("Random Key");
      }
   });

   englishButton.addEventListener("click", function() {
      console.log("englishButton clicked!");
   });
});

<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
</head>

<body>
   <button type="button" class="jw-reset">English</button>
</body>

</html>

Answer 2

В ваших комментариях к вашему вопросу вы подтвердили, что кнопка фактически вызывает нажатие.Таким образом, проблема заключается в том, чтобы получить ожидаемый результат от клика.Который должен включать и выключать английскую подпись.Здесь есть лучшая, более простая и гораздо более надежная альтернатива.

Сайт использует JW Player для показа своего видео.У них есть хорошо документированный и открытый API (https://developer.jwplayer.com/jw-player/docs/developer-guide).

Все, что вам нужно сделать, это что-то вроде этого

jwplayer().setCurrentCaptions(X)

Здесь X - номер индекса опции заголовка, которую вы хотитевыберите из списка всех подписей, которые доступны в конкретном видео.

В вашем примере видео список содержит только два элемента:

0: выкл.
1: английский

Итак, чтобы включить английский:

jwplayer().setCurrentCaptions(1)

И чтобы отключить все заголовки:

jwplayer().setCurrentCaptions(0)

Если индекс будет варьироваться от одного видео к другому, вам необходимосначала получите список доступных титров, а затем найдите индекс для английского языка.

let allCaptions = jwplayer().getCaptionsList();
englishCaptionIndex = allCaptions.findIndex(caption => caption.label == 'English');

Вот и все.

С помощью API вы можете делать самые разные интересные вещи.

Answer 3

Я рекомендую вам использовать jQuery, чтобы вы могли использовать такие функции, как keyup () или keydown (), чтобы вы могли слушать при нажатии клавиши.Также рекомендуется проверять элемент по идентификатору, если мы хотим отслеживать только элемент DOM, а не использовать класс.