CSS Tree Inspector v1.6.1

CSS Tree Inspector v1.6.1 is a maintenance release that resets the sidebar cleanly when the inspected page changes and reorganizes project documentation.

Fixed

• Returns the sidebar to its default state after the inspected page refreshes or navigates.
• Clears obsolete output, stale notices, controls, and processing state.
• Prevents an interrupted generation from restoring output after navigation.

Documentation

• Moves project policies, installation guidance, contribution information, and the changelog into the docs directory.
• Streamlines the README and consolidates project-information links.
• Updates structural validation for the new documentation paths.

Install in Chrome

1. Under Assets below, download css-tree-inspector-1.6.1.zip.
2. Extract the ZIP to a permanent folder. Do not select the ZIP itself in Chrome.
3. Open chrome://extensions and enable Developer mode.
4. Click Load unpacked and select the extracted folder containing manifest.json.
5. Open or reload DevTools, select Elements, and open CSS Tree Inspector.

To upgrade an existing unpacked installation, replace its files with this extracted release, click Reload on the extension card, and reopen DevTools.

The uploaded ZIP contains only the Chrome-ready unpacked extension. GitHub automatically provides separate source-code links for the tag.

CSS Tree Inspector v1.6.0

CSS Tree Inspector v1.6.0 makes JSON reports smaller and easier to navigate while improving cross-origin CSS coverage.

Highlights

• Adds optional shared styleDefinitions for exact duplicate computed, state, and conditional CSS, reducing report size and token use.
• Prioritizes text nodes and omits empty optional JSON fields.
• Adds focused recovery for CSSOM-blocked stylesheet resources, including relevant inactive media queries, without host or debugger permissions.
• Adds focused or complete HTML-attribute output options.
• Adds concise report guidance, rounded dimensions, cleaner state metadata, and updated generator identification.
• Improves the sidebar with grouped JSON options, clearer format descriptions, one-line selection details, and a processing overlay.

Install in Chrome

1. Under Assets below, download css-tree-inspector-1.6.0.zip.
2. Extract the ZIP to a permanent folder. Do not select the ZIP itself in Chrome.
3. Open chrome://extensions and enable Developer mode.
4. Click Load unpacked and select the extracted folder containing manifest.json.
5. Open or reload DevTools, select Elements, and open CSS Tree Inspector.

To upgrade an existing unpacked installation, replace its files with this extracted release, click Reload on the extension card, and reopen DevTools.

The uploaded ZIP contains only the Chrome-ready unpacked extension. GitHub automatically provides separate source-code links for the tag.

CSS Tree Inspector v1.5.0

CSS Tree Inspector v1.5.0 produces cleaner inspection trees while preserving meaningful content.

Highlights

• Removes surrounding HTML source indentation from ordinary text nodes.
• Preserves internal spaces, inline boundary spaces, and whitespace-sensitive text.
• Preserves pre, textarea, CSS whitespace-preserving content, and br elements.
• Excludes non-rendering infrastructure elements from JSON and CSS traversal.
• Retains hidden ordinary elements and unchanged outerHTML.
• Includes all conditional CSS and sidebar improvements introduced in v1.4.0.

Install in Chrome

1. Under Assets below, download css-tree-inspector-1.5.0.zip.
2. Extract the ZIP to a permanent folder. Do not select the ZIP itself in Chrome.
3. Open chrome://extensions and enable Developer mode.
4. Click Load unpacked and select the extracted folder containing manifest.json.
5. Open or reload DevTools, select Elements, and open the CSS Tree Inspector sidebar.

To upgrade an existing unpacked installation, replace its files with the extracted release and click Reload on the extension card.

The uploaded ZIP contains the Chrome-ready unpacked extension. Project source and development history remain available in the repository.

CSS Tree Inspector v1.4.0

CSS Tree Inspector v1.4.0 adds conditional CSS capture and improves the DevTools sidebar.

Highlights

• Captures relevant active and inactive @media rules with current match status.
• Captures named, unnamed, and nested @container rules.
• Preserves conditional state selectors and nested conditional structure.
• Reports inaccessible stylesheets without bypassing browser protections.
• Places Generate Tree JSON and Generate Tree CSS side-by-side, with clearer result controls.

Install in Chrome

1. Under Assets below, download css-tree-inspector-1.4.0.zip.
2. Extract the ZIP to a permanent folder. Do not select the ZIP itself in Chrome.
3. Open chrome://extensions and enable Developer mode.
4. Click Load unpacked and select the extracted folder containing manifest.json.
5. Open or reload DevTools, select Elements, and open the CSS Tree Inspector sidebar.

The uploaded ZIP contains the Chrome-ready unpacked extension. Project source and development history remain available in the repository.

CSS Tree Inspector v1.3.0

CSS Tree Inspector v1.3.0 is the first published GitHub release.

Highlights

• Exports relevant computed CSS and nested DOM data from the selected DevTools element.
• Captures authored state CSS separately for hover, focus, active, form, link, ancestor, sibling, descendant, and functional-selector states.
• Preserves pseudo-elements, custom-property dependencies, at-rule context, and exact outerHTML.
• Runs locally with no debugger, host, or broad extension permissions.

The attached ZIP is the unpacked-extension package. Extract it before selecting the folder through chrome://extensions.

See CHANGELOG.md for the full history and README.md for installation and known limitations.