Chrome拡張機能の開発でハマったこと

自分用のちょっとしたツールを作っていたらハマったのでメモ

前提

• manifest_version: V3

ハマったこと

クリックイベントが無視される

default_popupが設定されているとservice_workerで指定したJSのonClickedイベントは無視されます。

manifest.json

  "action": {
    "default_title": "My Bookmarks",
    "default_icon": "icon.png",
    "default_popup": "popup.html" // これがあると無視される
  }

popup.html で使用したいonClickedイベントが記述されたJSは、service_worker経由ではなく、普通にhtmlから読み込むようにしましょう。

ログの確認方法

Chrome拡張機能でconsole.log()しても、通常のWebページ用のデベロッパーツールにはログは出力されません。

popup.html を使用している場合は、表示されたポップアップ画面を右クリックして「検証」からDevToolsを起動するか、
もしくはchrome://extensionsの「ビューを検証」をクリックして確認する必要があります。

その他

• ブラウザ操作系が動かない時は manifest.json のpermissions や host_permissions をまず疑え

• popup.html を使用している場合は、DOMが読み込まれる順にも注意
  これは当たり前すぎますが、サンプルを参考にJavascriptだけガリガリ書いていたら結構ハマったの参考まで

参考