chrome-ext-ui-reactlisted
Install: claude install-skill RadOrigin-LLC/RAD-Claude-Skills
# React UI in Chrome Extensions
React works in extension popups, side panels, options pages, and content script injected UIs. Each context has unique constraints. The core challenges are: state dies with popup close, Shadow DOM is required for content script UI, and portaled components break in Shadow DOM.
## State Management Rule
Extension popups render from scratch on every toolbar click and die when they lose focus. Side panels persist longer but still need storage-backed state.
**Never rely on React `useState` alone for persistent data.** Always back state with `chrome.storage`:
```typescript
function useChromeState<T>(key: string, defaultValue: T) {
const [value, setValue] = useState<T>(defaultValue);
const [loading, setLoading] = useState(true);
useEffect(() => {
chrome.storage.local.get({ [key]: defaultValue }).then((result) => {
setValue(result[key]);
setLoading(false);
});
const listener = (changes: Record<string, chrome.storage.StorageChange>, area: string) => {
if (area === 'local' && key in changes) setValue(changes[key].newValue);
};
chrome.storage.onChanged.addListener(listener);
return () => chrome.storage.onChanged.removeListener(listener);
}, [key]);
const set = async (newValue: T) => {
setValue(newValue);
await chrome.storage.local.set({ [key]: newValue });
};
return [value, set, loading] as const;
}
```
## Shadow DOM for Content Script UI
Inject extension UI into web pages using Shadow