CEXT Next

Chrome Extension (Manifest V3) — injectable overlay panel for any webpage with position control and cross-tab data sync via chrome.storage.sync.

Features

• Overlay panel injected into every HTTP/HTTPS page
• 9-position control (corners, edges, center) via arrow buttons
• Close button inside the panel
• Data list synced across tabs via chrome.storage.sync
• Add items via input + Send button or Enter key
• Delete individual items from the list
• Empty state display when list is empty
• Badge shows ON / OFF based on active tab type
• Popup fallback (Google/Bing search) on non-HTTP pages (e.g. new tab)
• Options page accessible via right-click → Options

Structure

manifest.json           # Extension config (MV3)
background.js           # Service worker — tab events, badge, messaging
popup.html / popup.js   # Popup on non-HTTP pages (search buttons)
options.html            # Options page
content/
  js/cextbox.js         # Creates overlay DOM + toggle logic
  js/controller.js      # Overlay UI, port messaging, state management
  css/style.css         # Overlay positioning and shell styles
  css/controller.css    # Inner UI styles
action/
  showcextbox.js        # Injected on icon click — toggles overlay
icons/
  16.png / 32.png / 48.png / 128.png
  arrow/angle-left.svg
  arrow/plus.svg
img/
  icon-google.png / icon-bing.png / dot-background.png

How to Run

No build step required — plain JS/HTML.

Load in Chrome

1. Open Chrome → chrome://extensions
2. Enable Developer mode (top right toggle)
3. Click Load unpacked
4. Select this project folder (cextnext/)

Use

• Navigate to any http:// or https:// page
• Click the extension icon → overlay panel appears on the right side
• Click again to hide it
• Use arrow buttons to reposition the panel
• Type in the input → press Enter or click Send to add items
• Click × on any item to delete it
• List syncs across tabs via chrome.storage.sync
• On a new tab or non-HTTP page → popup shows Google/Bing search buttons
• Right-click icon → Options to open the options page

Reload after changes

Go to chrome://extensions → click the reload button on the CEXT Next card.