使い方

安定性マップの使い方

StableHTMLFinder は複数回のページ読み込みを比較し、すべての観測で安定していた要素と特徴を表示します。変化するクラス、ID、構造に頼らずセレクターを作成できます。

基本的な手順

読み込み回数を増やすほど、偶然の一致を安定した特徴と誤認する危険が減ります。動的IDの2文字が偶然2回一致しても、さらに複数回続くことは通常ありません。

マップの各行はHTML要素に対応します。インデントは確認済みのページ構造を表し、字下げされた要素は上の要素の子孫です。すべての読み込みで安定性を確認できた特徴だけが表示されます。表示されないクラスや属性も、観測間で変化しただけかもしれません。

<div>, <a>, <section> — 安定したタグ名です。
id="menu" — 属性名と完全な値がすべての読み込みで一致しました。
data-*, *-label, *test* — 属性名の一部だけが安定しており、それぞれ data-で始まる、 -label で終わる、または含むことを表します： test.
id^="prefix" — 属性値が指定テキストで始まります。 id$="suffix" — そのテキストで終わります。 id*="part" — そのテキストを含みます。単独の = （ ^, $ または * なし）は完全一致を意味します。
値のない属性名 は、属性の存在は安定しているものの、値が変化したか確認できなかったことを意味します。
class （3クラス） は、クラス名または完全な class.
属性の右側のテキスト — 要素固有の安定したテキストです。「展開」で全文を表示します。
iframe, iframe document と #shadow-root は特殊な入れ子部分の境界を示し、その内容は別のマップ枝に続きます。
<...> は変化した、または対応が不確かな部分を示します。その下に確認済みの安定部分が再び現れる場合があります。

緑の行は確認済み要素です。薄い緑は推定一致または変化部分の後の安定断片です。オレンジ枠は検索一致、明るい枠は現在の一致を示します。

「 ⋮ 」を押すと、セレクターまたはルールの説明に、属性数、クラス数、固有テキスト、兄弟位置、結果番号、親・祖先・子・子孫・兄弟との関係など追加の確認済み特徴が表示されます。行に個別表示されなくても絞り込みに使われます。

検索欄では表示テキスト、タグ名、属性、値、要素テキストを検索できます。DevToolsからコピーしたHTMLも貼り付けられます。通常のCSSセレクターは最新の保存済みスナップショットで評価され、対応するマップ要素を強調します。

欄の横の矢印で一致箇所を移動できます。他のツリーは隠れないため、結果の祖先や子孫も確認できます。

安定したID、属性名、固定値、明確な構造など信頼できる特徴を使える場合はCSSセレクターを優先してください。標準CSSは簡単で通常は高速です。

CSSでは不十分な場合（クラス/属性数、動的な属性名、固有テキスト、結果位置など）はBlockItルールを使います。強力ですが多少遅くなることがあります。

マップは候補を自動生成しますが、この機能は発展途上です。必ず確認し、説明を読んでください。太字の警告は一意性を確認できなかったことを示します。

この拡張機能は変化するサイト構造の理解を助けます。アルゴリズムの詳細を公開すると安定性マップへの意図的な妨害が容易になるため、ソースは非公開です。Chromeウェブストアの審査を回避するものでも、完全な秘密を約束するものでもありません。

StableHTMLFinderが安定した特徴を見つけ、 BlockIt が作成したルールを適用して一致要素を非表示または削除します。DevToolsのセレクターが再読み込み後に壊れる場合に役立ちます。

BlockItは別の拡張機能で、マップ作成には不要です。