サイト内のJSがどんなイベント等に反応したかを知りたい

Question

ごく簡単な自分用のChrome拡張を作っています（Webページを開く際に自作のJSファイルも追加で読み込ませるというだけのものです）。

仕事でSynology DiskStation Managerというサービスを使っているのですが（管理しているのは自分ではありません）
ブラウザで開くたびに毎回手動で「ログイン」ボタンを押さなければならないのが面倒なので、JavaScriptで自動ログインをしたいと考えました。

最初に試したこと

まずは

document.querySelector('[aria-label="サインイン"]').click()

を試してみましたが
（ユーザー名とパスワードはブラウザに記憶されているものが最初から<input>内に入っているにも関わらず）
ユーザー名もしくはパスワードが間違っていると言われてしまい、うまくログインできません。

わかったこと

実際にはかなりHTMLが入り組んでいるのですが、簡単に書くと

<div id="sds-login">
	<div>
		<div>
			<div>
				<iframe id="login_iframe" name="login_iframe" style="display_none">
				</iframe>
				<form id="login-form" method="POST" action="http://（略）:（ポート番号）/（略）/login.cgi?enable_syno_token=yes" target="login_iframe">
					<div id="login_inner_pannel">
						<div>
							<div>
								<div>
									<input id="login_username">
								</div>
								<div>
									<input id="login_passwd">
								</div>
								<span>
									<em>
										<button aria-label="サインイン">サインイン</input>
									</em>
								</span>
							</div>
						</div>
					</div>
					<input type="hidden"><!-- 中身は空 -->
					<input type="hidden"><!-- 中身は「yes」 -->
					<input type="hidden"><!-- 中身は空 -->
					<input type="submit" id="login_submit">
				</form>
			</div>
		</div>
	</div>
</div>

といった感じで

• <div id="sds-login">内のどこかをクリックする（clickかmouseupかそれとも別の何かを見ているのかはわかりません）
• キーボードのタブキーを押すなどして<input id="login_passwd">などにフォーカスする

のどちらかに反応し、どういうわけか

• ユーザー名・パスワードを表す2つの**<input>内の文字表示が大きくなる**

（Chromeのデベロッパーツールで見たところ、HTML属性もCSSもヘッダーも変わっているように見えないのでどうやって文字を大きくしているのかわかりません）

• <input id="login_passwd">　に　aria-invalid="false"　という属性が付与される

ことがわかりました（少なくとも　https://difff.jp/dev/obokata_copypaste.html　でhtmlを比較した限りは変化はこれだけ）

どうやらこの状態にしたうえで「サインイン」ボタンを押すことで初めてログインができるという仕組みになっているように思います。

次に試したこと

単純に

document.getElementById('sds-login').click()
document.getElementById('login_username').click()
document.getElementById('login_username').focus()
document.getElementById('login_passwd').click()
document.getElementById('login_passwd').focus()

などを試してみたのですが
これだけだとただ単にフォーカスが移ったりするだけで<input>内の文字は小さいままで、ログインもやはり失敗してしまいます。

その他

何かしらのイベントを起こして何らかの関数なりを呼べばいいのだとは思いますが
Chromeのデベロッパーツール（あまり見方には慣れていません）から「Performance」の欄を見てみても、
何やら圧縮されたjs（複数ファイルあります）の中の何かが動いているということがわかるだけでした。
試しにjsファイルの中を「addEventListener」などで検索してもよくわからず…

HTML側にonclickなどの属性が設定されているわけでもありません。

こちらとしては、画面をクリックしたときの何に反応して何がどう動いた（ことでログインできるようになった）のかを突き止め、それを（JavaScriptで自動で）再現できればいいのですが…/

Comments

[yutampp]

うーん私も経験あるんですが結局分からなかったんですよねー。
HTML5 Form Validationを、使ってるんじゃないかなというとこまでは調べたんですが時間切れでした。
その時はとりあえずinput要素に対して.click()してからやりたい事やると、「なんか知らんが動いた」ですが、どうでしょう？

回答するのも烏滸がましいのでコメントで。

Answer 1

イベントとか気にせずformをsubmit();してしまえば？

Comments

[amie8mie]

なるほどと思い、formに関係ありそうなHTMLタグを追記させていただきました。

document.getElementById('login-form').submit()
→action=のURLに何かしているっぽい様子がブラウザ左下のステータスに表示されるだけで、ページ変遷はされません

document.getElementById('login_submit').click()
→最初に試したdocument.querySelector('[aria-label="サインイン"]').click()と同じくログイン失敗します