【初心者】JavaScriptでChrome拡張機能を作ったが想定通りの処理ができない

Question

前提・実現したいこと

表題の通りとなりますが、
HTMLで書かれた外部サイトのbuttonオブジェクトを操作するプログラムを開発しています。

自己流で学んでいるためエラーの原因と解決策がわかりません。

考えている仕組みは以下の通りです。
1)「あるbuttonオブジェクトをクリックする」ということをキーボードのキーに付与したいです
2)Chromeの拡張機能で実装しようと考えています

発生している問題・エラーメッセージ

Chromeの拡張機能側に以下のエラーが出力されています

Uncaught TypeError: document.getElementsByClassName(...).click is not a function

該当のソースコード

【HTML側のソースコード】

<button class="btn-standard call-to-action">Search</button>

【JavaScript側ソースコード】
※shortcut.add()は下記サイトで紹介されているメソッドを使っています
https://www.saka-en.com/javascript/short-cut-key-js/

//検索ボタン押下する
shortcut.add("Shift+1",function() {
    document.getElementsByClassName("btn-standard call-to-action hover").click();
  },{
    'type':'keydown',
    'disable_in_input':false,
    'target':document,
    'propagate':false,
    //'keycode':**
  });

補足情報（FW/ツールのバージョンなど）

Chromeのバージョンは下記です。
バージョン: 77.0.3865.90（Official Build） （64 ビット）

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

Answer 1

getElementsByClassName の使い方が間違っています。複数の要素を取得する前提のメソッドなので、[0]をつけるなどして一つの要素にするかforで走査するかどちらかしましょう。

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

Comments

[VVD]

ご回答ありがとうございます。
たしかにgetElementsByClassName の使い方が間違えていました。
ご指摘どおり[0]を付けたら該当のエラーは解消しました。
ただし、次の行で別のエラーが出てしまいました。
それの原因を見つけるための時間が確保できていないので、なる早で原因を究明していこうと思います。