javascript - 在官方网站上用 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("Class Name") 并在返回的元素数组中查找显示 English 的按钮并将其保存到 var englishButton 中。我添加了另一个监听器，用于监听要按下的键盘键，然后按下 englishButton。

但是，当我单击快捷键时，englishButton.click(); 似乎没有执行任何操作。我知道找到了正确的英文按钮，并且我的快捷键监听器通过使用 console.log() 语句工作。

我似乎不明白为什么按钮不会点击。

编辑:在代码中添加一个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

在您的问题下的评论中，您确认该按钮实际上触发了点击。所以你的问题是通过点击产生预期的结果。这是打开和关闭英文字幕。这里有一个更好、更简单、更可靠的替代方案。

该网站使用 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 做各种有趣的事情。