概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の8日目の記事です。
イベントの使い方と種類について説明します。
基本的な使い方
main.js
function callback() {
console.log("Event Call !");
}
document.addEventListener("event type", callback)
ブラウザ拡張機能でイベントを使う場合は、ほとんどが生成されたイベントをキャッチして何らかの処理を行う場合だと思います。
基本的にdocument.addEventListenerを使ってイベントのリスナーを追加し、設定したコールバック関数で処理します。
イベントの処理はContent script、Background scriptの両方で扱えます。
EventTarget: addEventListener() メソッド
イベントの種類
Mozillaのサイトにまとまっているため、サイトへのリンクを記載します。
DOMに関するイベントはこちら。
たとえばMouseEventはマウスのクリックやダブルクリックで発生するイベントがあります。
Event を基にしたインターフェイス
拡張機能でよく使うのはDocument関連のイベント。これらを使うとページが読み込まれたタイミングで処理を行うなどが可能です。
Document イベント
インターフェイスというページで調べたいインターフェイスをクリックすると詳細が記載されているページへ遷移します。イベントについても確認できます。