---
name: verify-csp
description: Scan popup HTML and JS for Alpine.js CSP violations after editing popup code
---

Scan `popup/popup.html` and `popup/popup.js` for Alpine.js CSP compliance violations.

The extension runs under a Content Security Policy that forbids JavaScript evaluation, so Alpine.js attributes must never contain inline expressions.

**Check for these violation patterns in HTML attributes (`x-show`, `x-if`, `x-text`, `x-bind:*`, `:attr`, `@event`, etc.):**
- Equality/comparison operators: `===`, `!==`, `==`, `!=`, `>`, `<`
- Method or function calls: `foo()`, `this.bar()`
- Ternary expressions: `condition ? a : b`
- Logical operators used to compute values: `a && b`, `a || b`
- String concatenation or arithmetic

**What is allowed:**
- Simple property access: `x-show="isOpen"`, `:class="activeClass"`
- `$el`, `$refs`, `$store` access without calling methods
- Negation of a boolean property: `x-show="!isOpen"` (acceptable)

For each violation found, report:
1. File and line number
2. The offending attribute and its current value
3. The compliant fix — typically moving the logic into `Alpine.data()` as a computed property or method, then binding the property name in the template

If no violations are found, confirm the popup is CSP-compliant.