---
title: "Discussion on \"How I Built a Chrome Extension to Inspect & Audit Live Design Tokens (Shadow DOM, CORS, and Delta E Color Math)\" | Hashnode"
description: "Discussion on \"How I Built a Chrome Extension to Inspect & Audit Live Design Tokens (Shadow DOM, CORS, and Delta E Color Math)\". A deep dive into traversing stylesheet rules across Shadow Roots, handling cross-origin security errors, and implementing a perceptual Oklab/Delta E fuzzy color matching engine in pure Vanilla JS."
url: "https://hashnode.com/posts/how-i-built-a-chrome-extension-to-inspect-audit-live-design-tokens-shadow-dom-cors-and-delta-e-color-math/6ad44a9a32882ddf38cc4a6c"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How I Built a Chrome Extension to Inspect & Audit Live Design Tokens (Shadow DOM, CORS, and Delta E Color Math)](https://token-inspector.hashnode.dev/how-i-built-a-chrome-extension-to-inspect-audit-live-design-tokens-shadow-dom-cors-and-delta-e-color-math?utm_source=hashnode&utm_medium=feed)

A deep dive into traversing stylesheet rules across Shadow Roots, handling cross-origin security errors, and implementing a perceptual Oklab/Delta E fuzzy color matching engine in pure Vanilla JS.

Oct 18 · 5 min read · token-inspector.hashnode.dev  
Read the article

-   [#webdev](https://hashnode.com/tag/webdev)
-   [#css](https://hashnode.com/tag/css)
-   [#frontend](https://hashnode.com/tag/frontend)
-   [#design-systems](https://hashnode.com/tag/design-systems)

## Written by

[CapiLabs](https://hashnode.com/@capilabs)

@capilabs

  
[View profile](https://hashnode.com/@capilabs)

## Responses

Markdown supported · ⌘↵ to post

No responses yet.