開発者用拡張機能を公開するサイト

拡張機能でのイベントの挙動について

フォームの自動入力機能を弄っているとき、ふと気になりました。
サイドパネルからinputにfocus()メソッドを実行してもfocusされないと。
サイドパネルを使っている場合、Webページがアクティブではないので
当然と言えば当然かと思う反面、こうも思います。

これイベントは発火するのか? と。

それについて色々チェックしたメモ。

Element.focus() メソッドとfocusin,out

・ページ内スクリプトで実行
:イベントは発火するし、カーソルも合わさる

・拡張機能:右クリックから実行
:イベントは発火するし、カーソルも合わさる

・拡張機能:ポップアップから実行
:イベントは発火するし、カーソルも合わさる
※ただしページ内がアクティブの場合

・拡張機能:サイドパネルから実行
:イベントは発火せず、カーソルも合わさらない
※ただしフォーカス自体はされるため、ページ内をクリックしたときにfocusin,outが発火する。

dispatchEventでfocusinイベント

・ページ内スクリプト
・拡張機能:右クリック
・拡張機能:ポップアップ
・拡張機能:サイドパネル
:イベントは発火する
※当然ながらイベントが発火するだけでカーソル等は影響ない

フォームの自動入力とイベント

フォームの自動入力拡張機能を使うとき、
一部のフォームでは再度選択した際に入力内容が消える場合があります。

入力内容を即時バリデーションするフォームによくあるパターンです。
つまりキーボードでの入力と自動入力には違いがあるということ。

その要因はchangeイベントの有無。
JSでvalue値を設定した場合はchangeイベントが発生しません。
なのでdispatchEventでchangeイベントを無理やり発火させると問題なく入力できる(フォームが多い)。

Element.click() メソッドとdispatchEvent

挙動が多岐に渡ったclickイベント。
ページ内スクリプトと拡張機能共に、
Element.click() メソッドはイベントが発火し、タグに対する挙動もマウスと同じでした。

つまりaタグはページ移動し、download属性が設定されていればダウンロードを行い、
ラジオボタンやチェックボックスはチェックし、button要素はformを送信できます。

対してdispatchEventは
ページ内スクリプトではマウスと同じ挙動をし、拡張機能ではイベントだけ発火しました。

拡張機能はポップアップ、右クリック、サイドパネルすべてでイベントの発火だけ行われます。
なぜページ内スクリプトと動作が異なるのか……。
なおコンテンツスクリプトで自動実行させた場合もイベントだけ発火します。
(因みにchromeのデベロッパーコンソールで実行しても同じ)

拡張機能のイベント発火

以上の内容から見ると
・拡張機能の右クリックとポップアップはページ内スクリプトとほぼ同じ挙動
・サイドパネルはページ内がアクティブでないためfocusイベントが発生しない
・イベントの発火は別にclick()メソッドでもできる