デバッガーの最初のバージョンがリリースされた後、ポップアップウィンドウで開かれたエディタがフォーカスを失うと閉じてしまうことに気付きました。これはユーザーエクスペリエンスに大きな不便をもたらします。@DIYgod の助けを借りて、Stylebot というプラグインを知りました。インストール、体験、ソースコードの読み込みを行った後、content scripts を使用してコードエディタを現在のページに埋め込む方法を学びました。したがって、今日の午後、コードを大幅に再構築しました。
現在、プラグインは以下の機能をサポートしています：
- 現在のページのカスタム CSS を表示およびリアルタイムデバッグすることができます。
- エディタはページに応じて自動的にダークモードに適応されます。
- xlog CSS セレクタの自動補完のいくつかを追加しました。
皆さんの使用とフィードバックを歓迎します。バグ修正に役立ててください。
ダウンロードリンク：https://github.com/birdgg/xLog-custom-css-debugger/releases/download/0.2.0-alpha/dist.zip
使用方法：
- ダウンロードして解凍します。
- chrome://extensions/ を開き、デベロッパーモードを有効にし、dist フォルダを読み込みます。
- メニューバーで「Toggle xLog css debugger」を選択してデバッガーを開きます（インストール後、既に開いているページはリロードする必要があります）。
GitHub のリンク：https://github.com/birdgg/xLog-custom-css-debugger
ps: この記事は chatgpt で微調整されており、読みにくいです。
pps: カスタム CSS の時代がやってきました🥳