CSS Conflict Inspector Chrome extension icon

CSS Conflict Inspector

👥 54 users
📦 v2.4.1
💾 359KiB
📅 2026-06-03
View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

CSS Conflict Inspector is an internal support tool for Klaviyo Support agents. It scans any merchant website and instantly identifies CSS rules that are preventing Klaviyo signup forms, review widgets, or Customer Agent components from displaying correctly.
──────────────────────────────────────
WHAT IT DOES
──────────────────────────────────────
🔍 Scan Page
Inspects the active tab for CSS conflicts affecting Klaviyo components. Detects display:none, visibility:hidden, opacity:0, overflow:hidden, max-height:0, transform:scale(0), pointer-events:none, z-index stacking issues, and zero-dimension problems. Traces every issue back to the exact stylesheet, selector, and line number. Shows a confidence score (1–5) so agents know which conflict to fix first.
🖱️ Pick Element
Hover over any element on the page to highlight it, then click to inspect it. Clicking a Klaviyo component runs the full CSS conflict scan on that component. Clicking any other element runs a CSS visibility check on it and its ancestors.
📋 Manual Check
Enter a Klaviyo Form ID (and optional Variation ID) to inspect any specific form directly, whether or not it is currently visible on the page.
👁️ Preview Fix
Temporarily overrides the conflicting CSS property on the live page so the agent can visually confirm the fix resolves the issue before sending instructions to the merchant. A Restore button puts it back.
🚀 Force Open
Signals Klaviyo to open a form on demand, bypassing geo rules, frequency caps, cookie suppression, and targeting conditions. Two modes: quick (no reload) and Ignore Rules (full reload + localStorage clear).
🧪 Test Submit
Fills the visible form with the agent's saved test email, phone number, first name, last name, and date of birth, clicks Submit, and intercepts the Klaviyo subscription API response. Reports whether the submission succeeded or failed, and why.
🌐 Site Scanner
Fetches all active Klaviyo forms for the merchant account using the company ID detected on the page. Shows each form's name, ID, type, and page targeting. Flags snippet-placed forms (embedded directly in HTML). Force Open and Test Submit are available per form.
📡 HAR File
Record a live network session as a HAR file directly from the extension, or copy a pre-written customer macro with step-by-step instructions for Chrome, Firefox, and Safari — with screenshots embedded for each browser. Captures are saved automatically to Scan History.
🕒 Scan History
Stores the last 5 page scans and last 10 HAR captures. Each entry shows the URL, timestamp, issue count or request count, and full results. Scans are replayed on click; HAR files can be downloaded at any time.
🔵 Identify
Per-page identity tracker showing whether a visitor is recognised by Klaviyo on the current tab. Colour-coded status dot: red (no email set), amber (email set but not identified), green (identified). Pulls saved test emails from Settings — no manual typing needed.
📱 Mobile Preview
Emulates a real iOS or Android device using Chrome's DevTools Protocol — overriding screen dimensions, device pixel ratio, and User-Agent — so agents can see exactly how Klaviyo forms render on mobile.
🚩 Report
Lets agents submit feedback about new CSS conflict patterns or false positives directly from the tool, with scan context and HAR captures attached automatically.
📦 Theme Detection
Recognises 54+ themes and CSS frameworks (Shopify Dawn, Elementor, Divi, Bootstrap, Tailwind, Squarespace, Webflow, and more) and names the specific theme with a targeted fix suggestion.
──────────────────────────────────────
WHO IT'S FOR
──────────────────────────────────────
This extension is intended exclusively for Klaviyo Support agents troubleshooting CSS conflicts on merchant websites. It is not a general-purpose consumer tool.
──────────────────────────────────────
PERMISSIONS SUMMARY
──────────────────────────────────────
This extension uses only the permissions strictly necessary for its diagnostic features. No user data is sent to third parties. Scan results, test profiles, and preferences are stored locally on the agent's device only.

Tags

Productivity/developer developer design productivity/developer

Privacy Practices

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

🔐 Security Analysis

This extension hasn't been security-scanned yet.

Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
Productivity/developer AI
브라우저에서 라온시큐어의 PC보안 기능을 사용하기 위한 확장 프로그램입니다.
Productivity/developer
Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.
Productivity/developer