How to use the stability map
StableHTMLFinder compares multiple page loads and shows elements and features that remain stable in every observation. This helps advanced users build selectors without relying on randomly changing classes, IDs, or structure.
StableHTMLFinder page Install StableHTMLFinder from the Chrome Web Store
Typical workflow
- Open the page containing the element you need.
- Choose the number of loads. Two is usually enough for a quick check; more loads make the map more accurate.
- Start the analysis. After each load, the extension waits for the configured time so the page can finish building its normal content.
- Find the element on the map by expanding branches or using search.
- Open the ⋮ on the required node, read the plain-language feature description, and copy the CSS selector or BlockIt rule.
- Paste the result into the corresponding BlockIt field and test it on the page.
More loads reduce the risk of mistaking a coincidence for a stable feature. For example, two letters in a dynamic ID may match twice by chance, but usually not across several more loads.
How to read the stability map
Each map row represents an HTML element. Indentation follows the confirmed page structure: indented elements are descendants of the element above. The map shows only features confirmed as stable across all loads. A missing class, attribute, or tree section may still exist on the page but have changed between observations.
<div>,<a>,<section>— a stable tag name.id="menu"— the attribute name and its full value matched in every load.data-*,*-label,*test*— only part of the attribute name is stable: it respectively starts withdata-, ends with-labelor containstest.id^="prefix"— the attribute value starts with the shown text;id$="suffix"— ends with it;id*="part"— contains it. A plain=without^,$or*means an exact match.- An attribute name without a value means the attribute’s presence is stable, while its value changed or could not be confirmed.
class(3 classes) means the class count is stable even though class names or the fullclass.- Text to the right of the attributes — stable own text of the element. The “expand” button shows it in full.
iframe,iframe documentand#shadow-rootmark boundaries of special nested page sections. Their content continues in a separate map branch.<...>marks a changing or uncertainly matched section. A confirmed stable fragment may appear below it.
Green rows are confirmed elements. Lighter green marks probable matches or stable fragments after a changing section. An orange outline marks search matches; the brighter outline is the current match.
After selecting ⋮ the selector or rule description may show additional confirmed features: exact attribute and class counts, own text, sibling position, result number, and relationships to parents, ancestors, children, descendants, or siblings. These may refine a result even when not labeled directly on the map row.
Search the map
The search field can find displayed node text, tag names, attributes, values, and element text. You can also paste HTML copied from DevTools; the extension will match it to map branches. A regular CSS selector is evaluated against the latest saved page snapshot and highlights the linked map elements.
The arrows beside the field move between matches. Search does not hide the rest of the tree, so you can inspect each result’s ancestors and descendants.
CSS selector or BlockIt rule?
Prefer a CSS selector when it uses clear, durable features such as a stable ID, attribute name, constant value, or clear structure. Standard CSS is simpler and usually faster.
Use a BlockIt rule when CSS is not enough—for example, to consider class or attribute counts, dynamic attribute names, own text, or a result position. Rules are more powerful but may run slightly slower.
The map generates suggestions automatically, but this feature is still evolving. Always verify them and read the plain-language description. A bold warning means the result could not be confirmed as unique.
Why the source repository is not public
The extension helps users understand changing website markup. A public repository describing the algorithms in detail would make it easier for services to deliberately obstruct the stability map. The source repository is therefore not public. This does not bypass Chrome Web Store review and is not a promise of complete technical secrecy.
Connection with BlockIt
StableHTMLFinder finds durable features; BlockIt applies the resulting rule and hides or removes matching elements. Together they help when a selector copied from DevTools breaks after a reload.
BlockIt is a separate extension and is not required to build the map.