俺的 Chrome Extension ブーム。

まだChrome Extensionが自分の中で熱いうちにもう一つ作って公開してみた。

といっても、新しいアイデアが思いついた訳ではなく、昔Userscriptとして作った以下二つの機能をがっちゃんこ（）して、一つのChrome Extensionに焼きなおしたもの。

uncaughtexception.hatenablog.com

個人的には、Faviconを変えたり点滅させたりするのがお気に入りだけど、公開後の反応を見る限り、デスクトップ通知の方が人気の様子。

ただ、Userscriptからの移植で一番仕組みを変えたのがデスクトップ通知だったので、頑張った甲斐はあった。

という訳で、インストールしてください。星、待ってます。

chrome.google.com

と、ここまでが

Extension作りがひと段落した時に書いて公開し忘れてた内容。

完全にタイミングを逃したので、ネタを追加。

開発中の悩み

Chrome Extensionを作ってて思ったこと。

Chrome Extensionにはcontent script/popup/service workerの3種類のスクリプトが入ってて、VSCodeがない世界では開発者ツールだけ頑張るので、ブレイクポイントとか変数チェックしようとすると、見た目同じウィンドウがいくつか立ち上がる。

すると、いちいち

これは、、、どのスクリプトのウィンドウだ？？？

となって、割と大変だった。

せっかくVSCodeでコードを書いてたのだから、デバッグくらいできるに違いない、と調べた結果をまとめた。

前準備

まず.vscode/launch.jsonを作る。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug on Chrome",
      "port": 9222,
      "runtimeArgs": [
        "--load-extension=${workspaceFolder}"
      ],
    }
  ]
}

内容はChromeの起動。
ほぼVSCodeが作るテンプレのまんま。

追加したのは、--load-extension オプションで manifest.json があるディレクトリを選ぶくらい。
プロジェクトルートに置いているなら --load-extension=${workspaceFolder} でよし。

いざデバッグ

デバッグの開始は通常通りF5キーで。

ここから、1つのVSCodeウィンドウで、content script/popup/service workerの3種類のスクリプトをデバッグする。

content script/popupのデバッグ

といっても、content scriptとpopupのスクリプトは、特に何もすることなく、VSCodeからChromeのプロセスにアタッチできる。
ブレイクポイントを置けば、そこで処理はポーズしてくれるし、変数の確認も簡単。

ちなみにpopupを開くと勝手にpopup用の開発者ツールが立ち上がる。
けどpopupのデバッグだけなら閉じてもオーケー。

問題は次のservice worker。

service workerのデバッグ

service workerの場合、content scriptやpopupの時はできていた、コード内のブレイクポイントが有効化ができず、ポーズや変数確認ができない。

一方、chrome://extensions からservice worker用の開発者ツールを開けば、開発者ツール内で開いたソースに置いたブレイクポイントでポーズしたり変数確認はできるが、その場合、

動作確認用Chrome
content script/popup デバッグ用の VSCode
service worker デバッグ用の開発者ツール

の3つのウィンドウを見ることになる。

まぁ、3つくらいならましなのかもしれない。

それでも、、、！

「どうしてもデバッグをVSCodeだけでやりたい！」という強い想いがあるなら、以下の手順をやるとデバッグをVSCodeにまとめられる。

このデバッグのやり方を見つけるのが難しかった。
それでも割と煩雑な方法。

まずVSCodeでF5キーでデバッグを開始
この時点で、content script/popupのデバッグはできる
Chromeが立ち上がったら、Ctrl + nとかで、もう1枚ウィンドウを作り chrome://extensions を開く。
手順 1. のデバッグ開始で立ち上がった方を window1、ここで手動で作ったウィンドウを window2 としておく。
window2 でservice workerが inactive（または無効) になっていることを確認する。

なっていない場合、大抵は30秒ほど放置すると自動的に inactive になる(という、Chrome Extensionの仕様？バグ？)。
window2の拡張機能アイコンをクリックして、popupを表示する。
この時、開発者ツールが勝手に立ち上がるが、この後使うのでまだ閉じない。
立ち上がった (popup用の) 開発者ツールの Application タブを開き、service workerについての情報が出ているか確認する。
Status 欄にある start をクリックする。

ここまで来たら、手順 4. で開いた開発者ツールは閉じていい。
けど、popupは閉じちゃダメ。絶対に！