Marker:HELPER

DOM要素にマーカーを自由に設定できます。マーカーは、要素の上に重ねて表示され、要素を視覚的に識別するのに役立ちます。

Marker:HELPER は、Webページ上の要素をホバーで強調し、クリックで番号付きのマーカーとして固定できる拡張機能です。サイドパネルで CSS / XPath セレクタを確認・コピー・エクスポートできます。 UIテストのセレクタ収集、デザインレビューでの指摘箇所の共有、スクレイピング対象の特定などに役立ちます。 ■ マーキング • ホバー強調：マウス位置の要素をリアルタイムに枠で強調します。 • クリックでマーク：要素に番号付きの枠を固定します。同じ要素をもう一度クリックすると解除します。 • ページのDOMは書き換えません。マーカーは別のオーバーレイ層に描画し、スクロールやリサイズに追従します。 • 枠のカスタマイズ：色・線種（実線／破線／点線）・線幅・余白・角丸・角の形式（標準／なめらか（Mac風）／面取り／えぐり／切り欠き／直角、superellipse の数値指定）を選べます。 • マイカラー：お気に入りの色を最大18色まで登録できます。 • 番号バッジは全体またはマーカーごとに表示／非表示を切り替えられ、四隅のどこに表示するかも選べます。 ■ サイドパネル • マーカーごとにタグ・テキスト・CSS セレクタ・XPath を一覧表示します。 • セレクタは1件ずつ、またはまとめてコピーできます。 • 堅牢性インジケータで、セレクタが壊れにくいかの目安（安定／普通／不安定）を表示します。 • セレクタを直接編集して、マーカーを別の要素に貼り替えられます。 • マーカーにメモやグループ（分類タグ）を付けられ、タグ・セレクタ・テキスト・メモ・グループで絞り込めます。 • ドラッグまたは移動ボタンで並べ替えられ、番号は自動で振り直されます。 • 一覧からページ上のマーカー位置へ移動でき、後から個別にスタイルも変更できます。 ■ スクリーンショットとレポート • マークした要素の部分だけを PNG で保存・コピーできます。枠と番号を写すかどうかも選べます。 • 縦長の要素は、スクロールしながら撮影した画像をつなぎ合わせて全体を撮影します。 • 全マーカーの画像をまとめて保存できます。 • 番号・グループ・セレクタ・メモ・スクリーンショットをまとめた注釈付き HTML レポートを保存できます。ブラウザの印刷機能で PDF にもできます。 • 一覧を別ウィンドウで開けば、ページの表示幅を狭めずに撮影できます。 ■ エクスポートとインポート • JSON・CSV・Markdown、Playwright / Cypress のテストコードとして書き出せます。 • JSON からマーカーを復元できます（ファイル選択・ドラッグ&ドロップ・貼り付けに対応）。 • マーカーはブラウザのセッション中、URL ごとに自動保存され、同じページを開き直すと復元されます。 ■ キーボードショートカット • Alt+Shift+M：マーキングモードのオン／オフ • Alt+Shift+. / Alt+Shift+, ：次／前のマーカーへスクロール （chrome://extensions/shortcuts で変更できます） ■ 表示言語 • ポップアップとサイドパネルは日本語と英語を切り替えられます。 ■ プライバシー • データの収集や外部への送信は一切行いません。設定と自動保存したマーカーは、お使いの端末内（chrome.storage）にのみ保存します。 • リモートコードは使用していません。 ■ 制限事項 • chrome:// などのブラウザ内部ページ、Chrome ウェブストア、ファイルへのアクセスを許可していない file:// のページでは動作しません。 • マーカーは要素そのものを追跡するため、ページの再描画で対象の要素が無くなると、一覧に「消失」と表示されます。