Shopify Code Analyzer

About

Shopify Code Analyzer is a powerful browser extension that helps developers and store owners identify performance issues in their Shopify stores. It automatically detects:

- Ghost Scripts: Unused app scripts that are still being loaded
- Orphaned Liquid Comments: Leftover code comments from uninstalled apps
- Unknown Assets: Third-party scripts that may impact performance
- Performance Metrics: Script sizes and load times

The extension provides a comprehensive Theme Health Score (0-100) and categorizes findings into Active Apps, Ghost Scripts, and Unknown Assets. It also includes a visual testing tool to temporarily block scripts and measure their impact.


1. Platform Detection: Only activates on Shopify stores
   - Detects `window.Shopify`
   - Analyzes typical Shopify DOM structure
   - Verifies Shopify scripts and meta tags

2. App Script Analyzer:
   - Lists all external scripts (.js) being loaded
   - Blacklist of known apps (Klaviyo, Judge.me, Hotjar, PageFly, Yotpo, etc.)
   - Compares scripts with active DOM elements
   - Identifies unused "ghost" scripts

3. Liquid Bloat Detector:
   - Scans HTML for orphaned Liquid comments
   - Detects `<!-- [shopify-app-extension] -->` comments without associated functionality
   - Marks potentially dead code

4. Dashboard UI (Side Panel):
   - Theme Health Score (0-100)
   - Categorization: Active Apps, Ghost Scripts, Unknown Assets
   - Size and load time metrics
   - Modern interface with React and Tailwind CSS

5. Visual Cleanup Tool:
   - Temporary script blocking using `declarativeNetRequest`
   - Allows testing if a script is necessary
   - Automatic reload to apply changes