Manual row reordering in class catalog triggers full-page reloads

Build a Chrome extension using Manifest V3. The content script injects a React portal into the LMS catalog table identified by a unique CSS selector (e.g., `#class-catalog tbody`). Use `react-beautiful-dnd` to wrap each `<tr>` as a draggable `<div>` preserving original cell layout via CSS grid. The script reads the current order by parsing `data-id` attributes on rows and stores it in a local `Map`. On drag end, compute the new sequence, optimistically reorder the DOM, and debounce a single POST to the LMS bulk‑reorder endpoint (`/api/v1/catalog/reorder`). Use `fetch` with `Content-Type: application/json` sending `{order: [{id: '123', position: 1}, …]}`. Implement a retry layer with exponential backoff via the `retry` library. For conflict detection, include the catalog’s `etag` header from a prior GET (`/api/v1/catalog`) and, on 409 response, fetch the latest order, merge using a simple LCS algorithm, and re‑apply the drag‑drop UI. The extension’s background service worker listens for `runtime.onMessage` to trigger a manual “Sync now” button added to the page toolbar. All UI components are bundled with Vite, transpiled with Babel, and minified with Terser. No server side code is required beyond the existing LMS API.

By eliminating page reloads, the extension cuts the number of HTTP round‑trips per reorder from N to 1, reducing server load and network latency. Immediate client‑side feedback prevents admin confusion and lowers the chance of mis‑ordering. Batching updates also reduces database write contention, especially during concurrent edits, and the conflict‑resolution logic safeguards data integrity without manual reconciliation.