Add context selection UI to extension popup

- Modified popup.html to include context selection container
- Updated popup.js to display context menu items as buttons
- Added CSS styling for context selection buttons
- Users can now select which context to send under when clicking extension icon

Co-authored-by: JOHLC <63735432+JOHLC@users.noreply.github.com>

Author: Copilot

package/popup.html

@@ -25,7 +25,8 @@
   </button>
   <div class="container">
     <div class="icon"><img src="icon-256.png" width="36" height="36" alt="HA"></div>
-    <div class="msg" id="popupMsg">Sending...</div>
+    <div class="msg" id="popupMsg">Select context to send:</div>
+    <div id="contextSelection" class="context-selection"></div>
   <button class="ok-btn hidden" id="okBtn">OK</button>
   </div>
   <script src="utils.js"></script>

package/popup.js

@@ -27,23 +27,76 @@ document.addEventListener('DOMContentLoaded', function() {
 
 const msgDiv = document.getElementById('popupMsg');
 const okBtn = document.getElementById('okBtn');
+const contextSelection = document.getElementById('contextSelection');
 
 /**
- * Main function to send page data to Home Assistant
+ * Initialize popup by loading context menu items
  */
-async function sendToHA() {
-  updateStatus('Sending...');
-  hideButton();
-
+async function initPopup() {
   try {
     const tab = await getActiveTab();
     if (!tab) {
       throw new Error('No active tab found');
     }
 
+    // Check for restricted pages
+    if (ExtensionUtils.isRestrictedPage(tab.url)) {
+      updateStatus('This extension cannot send data from browser internal pages (settings, extensions, etc.). Please navigate to a regular website and try again.');
+      showButton();
+      return;
+    }
+
+    // Load context menu items and display selection UI
+    chrome.storage.sync.get(['contextMenuItems'], (result) => {
+      let menuItems = [{ id: 'default', name: 'Default' }]; // Default fallback
+      
+      if (result.contextMenuItems && Array.isArray(result.contextMenuItems)) {
+        menuItems = result.contextMenuItems;
+      }
+      
+      displayContextSelection(menuItems, tab);
+    });
+  } catch (error) {
+    console.error('Popup initialization failed:', error);
+    handleError(error);
+    showButton();
+  }
+}
+
+/**
+ * Display context selection buttons
+ * @param {Array} menuItems - Array of menu items
+ * @param {object} tab - Tab object
+ */
+function displayContextSelection(menuItems, tab) {
+  contextSelection.innerHTML = '';
+  
+  menuItems.forEach((item) => {
+    const btn = document.createElement('button');
+    btn.className = 'context-btn';
+    btn.textContent = item.name;
+    btn.addEventListener('click', () => {
+      sendToHA(tab, item.name);
+    });
+    contextSelection.appendChild(btn);
+  });
+}
+
+/**
+ * Main function to send page data to Home Assistant
+ * @param {object} tab - Tab object
+ * @param {string} contextName - Name of the context to send with
+ */
+async function sendToHA(tab, contextName) {
+  updateStatus('Sending...');
+  hideButton();
+  contextSelection.classList.add('hidden');
+
+  try {
     // Use unified sendToHomeAssistant function with popup-specific callbacks
     await ExtensionUtils.sendToHomeAssistant({
       tab,
+      context: contextName,
       onProgress: (message) => {
         updateStatus(message);
       },
@@ -254,7 +307,7 @@ function handleError(error) {
 // --- Event Listeners ---
 
 // Initialize popup when page loads
-sendToHA();
+initPopup();
 
 // OK button closes the popup
 okBtn.addEventListener('click', () => {

package/style.css

@@ -441,3 +441,38 @@ button:active, .ok-btn:active {
   width: 100%;
   margin-bottom: 1em;
 }
+
+/* Context selection in popup */
+.context-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  width: 100%;
+  max-width: 420px;
+  margin-top: 1em;
+}
+.context-btn {
+  padding: 0.8em 1.6em;
+  font-size: 1em;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(90deg, #00b4fc 0%, #1a8cff 100%);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 2px 12px #00b4fc33;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s;
+  letter-spacing: 0.01em;
+  text-align: center;
+}
+.context-btn:hover {
+  background: linear-gradient(90deg, #1a8cff 0%, #00b4fc 100%);
+  box-shadow: 0 4px 16px #00b4fc55;
+  transform: translateY(-1px);
+}
+.context-btn:active {
+  background: #1a8cff;
+  color: #eaf6ff;
+  box-shadow: 0 1px 4px #00b4fc44;
+  transform: translateY(0);
+}