|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +This is a Chrome Manifest V3 extension that detects whether a webpage uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR). The extension is published on the Chrome Web Store and helps developers and SEO specialists understand page rendering strategies. |
| 8 | + |
| 9 | +## Development Setup |
| 10 | + |
| 11 | +### Loading the Extension |
| 12 | + |
| 13 | +1. Open Chrome and navigate to `chrome://extensions` |
| 14 | +2. Enable "Developer Mode" (toggle in top-right) |
| 15 | +3. Click "Load unpacked" and select the project directory |
| 16 | +4. The extension icon will appear in the Chrome toolbar |
| 17 | + |
| 18 | +### Testing Changes |
| 19 | + |
| 20 | +After making code changes: |
| 21 | +1. Go to `chrome://extensions` |
| 22 | +2. Click the refresh icon on the CSR vs SSR Detector card |
| 23 | +3. Test the extension on various websites (e.g., Next.js sites, React SPAs, static sites) |
| 24 | + |
| 25 | +### No Build Process |
| 26 | + |
| 27 | +This is a vanilla JavaScript project with no build step, transpilation, or package manager. All files are loaded directly by Chrome. |
| 28 | + |
| 29 | +## Architecture |
| 30 | + |
| 31 | +### Three-Part Execution Model |
| 32 | + |
| 33 | +The extension uses Chrome's Manifest V3 architecture with three distinct execution contexts: |
| 34 | + |
| 35 | +1. **background.js** (Service Worker) |
| 36 | + - Runs in the background as a service worker |
| 37 | + - Listens for extension icon clicks via `chrome.action.onClicked` |
| 38 | + - Orchestrates script injection into the active tab |
| 39 | + - Handles notifications and saves analysis history to `chrome.storage.local` |
| 40 | + - Maximum 10 history entries stored |
| 41 | + |
| 42 | +2. **analyzer.js** (Content Script - Injected) |
| 43 | + - Injected into the target webpage on-demand |
| 44 | + - Exposes `window.pageAnalyzer()` function that performs the core analysis |
| 45 | + - Analyzes DOM structure, meta tags, script tags, performance timing, and framework markers |
| 46 | + - Returns structured analysis results with: |
| 47 | + - `renderType`: Classification (SSR/CSR/Hybrid/etc.) |
| 48 | + - `confidence`: Percentage (30-95%) |
| 49 | + - `indicators`: Array of detection signals |
| 50 | + - `detailedInfo`: Scores, frameworks detected, performance metrics |
| 51 | + - Also exposes helper functions: `getTypeColor()`, `getConfidenceBar()`, `createResultsHTML()` |
| 52 | + |
| 53 | +3. **popup.js** (Popup UI) |
| 54 | + - Runs when user clicks extension icon and popup opens |
| 55 | + - Handles "Analyze Page" button click |
| 56 | + - Injects `analyzer.js` into the active tab |
| 57 | + - Calls `window.pageAnalyzer()` and `window.createResultsHTML()` in the tab context |
| 58 | + - Displays formatted results in the popup |
| 59 | + - Manages history display and toggle functionality |
| 60 | + |
| 61 | +### Detection Algorithm (analyzer.js) |
| 62 | + |
| 63 | +The `pageAnalyzer()` function uses a weighted scoring system: |
| 64 | + |
| 65 | +- **SSR Indicators** (increase ssrScore): |
| 66 | + - Rich initial content (paragraphs, headings, articles) |
| 67 | + - Framework hydration markers (React, Next.js, Nuxt, Gatsby, Remix, etc.) |
| 68 | + - Serialized data (`__NEXT_DATA__`, `__INITIAL_STATE__`, etc.) |
| 69 | + - Rich meta tags and SSR framework meta |
| 70 | + - Fast performance timing (DOM ready < 30ms, FCP < 800ms) |
| 71 | + - Structured data (JSON-LD) |
| 72 | + - Low script-to-content ratio |
| 73 | + |
| 74 | +- **CSR Indicators** (increase csrScore): |
| 75 | + - Minimal initial text content |
| 76 | + - Client-side routing elements |
| 77 | + - Loading states with minimal content |
| 78 | + - Slow DOM ready time (> 500ms) |
| 79 | + - High script-to-content ratio |
| 80 | + - Framework scripts without hydration markers |
| 81 | + |
| 82 | +- **Final Classification**: |
| 83 | + - `ssrPercentage = (ssrScore / (ssrScore + csrScore)) * 100` |
| 84 | + - ≥75%: "Server-Side Rendered (SSR)" |
| 85 | + - ≤25%: "Client-Side Rendered (CSR)" |
| 86 | + - 60-74%: "Likely SSR with Hydration" |
| 87 | + - 26-40%: "Likely CSR/SPA" |
| 88 | + - 41-59%: "Hybrid/Mixed Rendering" |
| 89 | + |
| 90 | +### Key Files |
| 91 | + |
| 92 | +- **manifest.json**: Chrome extension configuration (Manifest V3) |
| 93 | +- **popup.html/popup.js**: Extension popup interface |
| 94 | +- **background.js**: Background service worker for icon clicks |
| 95 | +- **analyzer.js**: Core detection algorithm (injected as content script) |
| 96 | + |
| 97 | +## Framework Detection |
| 98 | + |
| 99 | +The extension detects these frameworks and generators: |
| 100 | + |
| 101 | +**SSR Frameworks**: Next.js, Nuxt, Gatsby, Remix, SvelteKit, Astro, Qwik, SolidJS |
| 102 | +**Static Site Generators**: Jekyll, Hugo, Eleventy, Hexo |
| 103 | +**SPA Frameworks**: React, Vue, Angular, Svelte, Solid |
| 104 | + |
| 105 | +Detection is performed via: |
| 106 | +- DOM markers (`#__next`, `data-reactroot`, `[q:container]`, etc.) |
| 107 | +- Meta tags |
| 108 | +- Script src patterns (`_next/static`, `_nuxt/`, `chunk`, etc.) |
| 109 | +- Inline serialized data patterns |
| 110 | + |
| 111 | +## Common Modifications |
| 112 | + |
| 113 | +### Adding New Framework Detection |
| 114 | + |
| 115 | +To detect a new framework, update `analyzer.js`: |
| 116 | + |
| 117 | +1. Add to `frameworkMarkers` object (line 27-36): |
| 118 | + ```javascript |
| 119 | + newframework: document.querySelector('[data-newframework]') !== null |
| 120 | + ``` |
| 121 | + |
| 122 | +2. Or add to static site generators (line 129-134): |
| 123 | + ```javascript |
| 124 | + newgenerator: document.querySelector('meta[name="generator"][content*="NewGen"]') !== null |
| 125 | + ``` |
| 126 | + |
| 127 | +### Adjusting Scoring Weights |
| 128 | + |
| 129 | +Modify the score increments in `analyzer.js` to change detection sensitivity: |
| 130 | +- Higher scores = stronger signal for that rendering type |
| 131 | +- Current range: 10-40 points per indicator |
| 132 | + |
| 133 | +### Modifying History Limit |
| 134 | + |
| 135 | +Change the limit in both `background.js:70` and `popup.js:166`: |
| 136 | +```javascript |
| 137 | +if (history.length > 10) history.pop(); // Change 10 to desired limit |
| 138 | +``` |
| 139 | + |
| 140 | +## Chrome Extension APIs Used |
| 141 | + |
| 142 | +- `chrome.action`: Extension icon clicks |
| 143 | +- `chrome.scripting.executeScript`: Code injection into tabs |
| 144 | +- `chrome.storage.local`: Persistent history storage |
| 145 | +- `chrome.notifications`: Desktop notifications (background.js only) |
| 146 | +- `chrome.tabs.query`: Get active tab information |
| 147 | + |
| 148 | +## Permissions |
| 149 | + |
| 150 | +Declared in manifest.json: |
| 151 | +- `activeTab`: Access current tab when extension is clicked |
| 152 | +- `scripting`: Inject and execute scripts |
| 153 | +- `storage`: Save analysis history |
| 154 | +- `notifications`: Show desktop notifications |
0 commit comments