React 製の Chrome 拡張のパフォーマンスチューニングやデバッグについて調査
tom状況
devtools_page を使った Chrome 拡張の情報を React Developer Tools で見ようとした所、 chrome-extension:// に対して Chrome 拡張 (React Developer Tools) はアクセスできなかった。
環境
ブラウザ: Chromium 112
Manifest v3
tom対処方法 (React Developer Toolsの場合)
結論: スタンドアローンの React Developer Tools を使う。
Chrome 拡張の React Developer Tools を使わず、npx react-devtools などでスタンドアローンの React Developer Tools を起動し接続することで回避出来る。
その際、公式ドキュメントにもあるように react-devtools 起動後に指定される <script src="http://localhost:8097"></script> などをデバッグしたい Chrome 拡張側のページに埋め込む必要が有る。
また、このアクセスを許可するために manifest の content_security_policy.extension_pages の script-src に http://localhost:8097/ を足してやる必要がある。 これが無いと CSP で以下のように弾かれてしまう。
Refused to load the script 'http://localhost:8097/' because it violates the following Content Security Policy directive: "script-src 'self' http://localhost:8177 http://localhost". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
普通の Profiler ではなく Timeline Profiler も何とかならないか試したが、 Chrome 拡張として React Developer Tools が入っていないため Timeline data が取れず断念。
tom対処方法 (スタンドアローンなどの Chrome 拡張以外の方法が無い場合)
あまり良い方法は無いようで、拡張のページを http でアクセスでききるようにホストし (chrome-extension でなければ Chrome 拡張からアクセスできる)てそれを扱うといった方法しか無さそうだった。
そう出来る場合なら問題ないものの、 Chrome Extension からでないと使えない API に依存している場合などは打てる手が無さそう。
tom対応できそうで出来ないケース
React Render Tracker
React Render Tracker を試してみようとした所、rempl-cli を用いれば何とかなるかと思いきや以下のエラーで挫折。 親フレーム辺りを見に行こうとして怒られてるように見える。
Uncaught SecurityError: Blocked a frame with origin "chrome-extension://<extension-UUID>" from accessing a frame with origin "devtools://devtools". The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "devtools". Protocols must match.
まとめ
- 通常の Web ページよりもデバッグは難しい。
- 拡張のページを http などでホストして動かせる場合か、 デバッグツールが Chrome 拡張以外の形で提供されている場合でないと厳しい。
- スタンドアローンのツールが提供されている場合でも、普通のページと異なりうまくいかないケースがあった。
- Chrome DevTools は普通に使えるので、そこは活用していくといいと思う。
- そもそもあまり複雑なものを作らないといった方針の方が楽かもしれない。