Merge pull request #28 from JOHLC/copilot/add-multiple-context-menu-options

[WIP] Add ability to use multiple right-click context menu options

Author: JOHLC

package/background.js

@@ -17,22 +17,47 @@ importScripts('utils.js');
  * Initialize context menus when extension is installed or updated
  */
 chrome.runtime.onInstalled.addListener(() => {
+  createContextMenus();
+});
+
+/**
+ * Create context menus from stored configuration
+ */
+function createContextMenus() {
   chrome.contextMenus.removeAll(() => {
-    // Parent menu
-    chrome.contextMenus.create({
-      id: 'send-to-ha-parent',
-      title: 'Send to Home Assistant',
-      contexts: ['page', 'selection', 'link'],
-    });
-    // Default sub-option
-    chrome.contextMenus.create({
-      id: 'send-to-ha-default',
-      parentId: 'send-to-ha-parent',
-      title: 'Default',
-      contexts: ['page', 'selection', 'link'],
+    // Get stored context menu items
+    chrome.storage.sync.get(['contextMenuItems'], (result) => {
+      let menuItems = [{ id: 'default', name: 'Default' }]; // Default fallback
+      
+      if (result.contextMenuItems && Array.isArray(result.contextMenuItems)) {
+        menuItems = result.contextMenuItems;
+      }
+      
+      // Parent menu
+      chrome.contextMenus.create({
+        id: 'send-to-ha-parent',
+        title: 'Send to Home Assistant',
+        contexts: ['page', 'selection', 'link'],
+      });
+      
+      // Create sub-menu for each item
+      menuItems.forEach((item) => {
+        chrome.contextMenus.create({
+          id: `send-to-ha-${item.id}`,
+          parentId: 'send-to-ha-parent',
+          title: item.name,
+          contexts: ['page', 'selection', 'link'],
+        });
+      });
     });
-    // Future sub-options can be added here
   });
+}
+
+// Also recreate menus when storage changes (options page updates)
+chrome.storage.onChanged.addListener((changes, areaName) => {
+  if (areaName === 'sync' && changes.contextMenuItems) {
+    createContextMenus();
+  }
 });
 
 /**
@@ -50,21 +75,38 @@ chrome.contextMenus.onClicked.addListener(async(info, tab) => {
     return;
   }
 
-  if (info.menuItemId === 'send-to-ha-default') {
-    await handleContextMenuSend(info, tab);
+  // Extract context from menu item ID (e.g., 'send-to-ha-default' -> 'default')
+  const menuItemId = info.menuItemId;
+  if (typeof menuItemId === 'string' && menuItemId.startsWith('send-to-ha-')) {
+    const contextId = menuItemId.replace('send-to-ha-', '');
+    
+    // Get the menu item name from storage
+    chrome.storage.sync.get(['contextMenuItems'], async(result) => {
+      let contextName = contextId; // Default to ID if not found
+      
+      if (result.contextMenuItems && Array.isArray(result.contextMenuItems)) {
+        const menuItem = result.contextMenuItems.find(item => item.id === contextId);
+        if (menuItem) {
+          contextName = menuItem.name;
+        }
+      }
+      
+      await handleContextMenuSend(info, tab, contextName);
+    });
   }
-  // Future sub-options can be handled here
 });
 
 /**
  * Handle sending from context menu
  * @param {object} info - Context menu info
  * @param {object} tab - Tab information
+ * @param {string} contextName - Name of the context menu item used
  */
-async function handleContextMenuSend(info, tab) {
+async function handleContextMenuSend(info, tab, contextName) {
   await ExtensionUtils.sendToHomeAssistant({
     tab,
     contextInfo: info,
+    context: contextName,
   });
 }
 

package/options.html

@@ -30,6 +30,16 @@ <h2>Send to Home Assistant</h2>
   <label for="deviceName">Device Name <span class="label-note">(optional, for identifying this device)</span></label>
   <input type="text" id="deviceName" placeholder="e.g. Work Laptop" maxlength="32">
 
+  <span class="options-title">Context Menu Options</span>
+  <p>Add custom context menu items to route different actions in Home Assistant. Each menu item will include a "context" field in the JSON payload.</p>
+  
+  <div id="contextMenuItems"></div>
+  
+  <div class="add-menu-item-row">
+    <input type="text" id="newMenuItemName" placeholder="Enter menu item name (e.g., Automation)" maxlength="32">
+    <button id="addMenuItem" class="copy-btn">Add</button>
+  </div>
+
     <div class="btn-row">
       <button id="test" class="copy-btn">Test</button>
       <button id="save" class="copy-btn">Save</button>

package/options.js

@@ -21,6 +21,13 @@ const statusDiv = document.getElementById('status');
 const saveBtn = document.getElementById('save');
 const testBtn = document.getElementById('test');
 const clearBtn = document.getElementById('clearConfig');
+const newMenuItemInput = document.getElementById('newMenuItemName');
+const addMenuItemBtn = document.getElementById('addMenuItem');
+const contextMenuItemsDiv = document.getElementById('contextMenuItems');
+
+// --- Context Menu Items Management ---
+
+let contextMenuItems = [{ id: 'default', name: 'Default' }]; // Default item always present
 
 // --- Initialization ---
 
@@ -33,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function() {
   loadSavedConfiguration();
   setupEventListeners();
   updateSslWarning();
+  loadContextMenuItems();
 });
 
 /**
@@ -143,6 +151,116 @@ function loadSavedConfiguration() {
   });
 }
 
+/**
+ * Load context menu items from storage
+ */
+function loadContextMenuItems() {
+  chrome.storage.sync.get(['contextMenuItems'], (result) => {
+    if (result.contextMenuItems && Array.isArray(result.contextMenuItems)) {
+      contextMenuItems = result.contextMenuItems;
+    }
+    renderContextMenuItems();
+  });
+}
+
+/**
+ * Render context menu items in the UI
+ */
+function renderContextMenuItems() {
+  contextMenuItemsDiv.innerHTML = '';
+  
+  contextMenuItems.forEach((item, index) => {
+    const itemDiv = document.createElement('div');
+    itemDiv.className = 'menu-item';
+    
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'menu-item-name';
+    nameSpan.textContent = item.name;
+    
+    // Add "Default" indicator for the default item
+    if (item.id === 'default') {
+      const defaultSpan = document.createElement('span');
+      defaultSpan.className = 'menu-item-default';
+      defaultSpan.textContent = '(Default)';
+      nameSpan.appendChild(defaultSpan);
+    }
+    
+    itemDiv.appendChild(nameSpan);
+    
+    // Only allow removing non-default items
+    if (item.id !== 'default') {
+      const removeBtn = document.createElement('button');
+      removeBtn.className = 'menu-item-remove';
+      removeBtn.textContent = 'Remove';
+      removeBtn.addEventListener('click', () => removeContextMenuItem(index));
+      itemDiv.appendChild(removeBtn);
+    }
+    
+    contextMenuItemsDiv.appendChild(itemDiv);
+  });
+}
+
+/**
+ * Add a new context menu item
+ */
+function addContextMenuItem() {
+  const name = newMenuItemInput.value.trim();
+  
+  if (!name) {
+    showStatus('Please enter a menu item name.', 'error');
+    return;
+  }
+  
+  if (name.length > 32) {
+    showStatus('Menu item name cannot exceed 32 characters.', 'error');
+    return;
+  }
+  
+  // Check for duplicate names
+  if (contextMenuItems.some(item => item.name.toLowerCase() === name.toLowerCase())) {
+    showStatus('A menu item with this name already exists.', 'error');
+    return;
+  }
+  
+  // Generate unique ID
+  const id = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+  
+  contextMenuItems.push({ id, name });
+  
+  // Save to storage
+  chrome.storage.sync.set({ contextMenuItems }, () => {
+    renderContextMenuItems();
+    newMenuItemInput.value = '';
+    showStatus('Menu item added! Click "Save" to apply changes.', 'success');
+    setTimeout(clearStatus, 2000);
+  });
+}
+
+/**
+ * Remove a context menu item
+ * @param {number} index - Index of the item to remove
+ */
+function removeContextMenuItem(index) {
+  if (index < 0 || index >= contextMenuItems.length) {
+    return;
+  }
+  
+  // Don't allow removing the default item
+  if (contextMenuItems[index].id === 'default') {
+    showStatus('Cannot remove the default menu item.', 'error');
+    return;
+  }
+  
+  contextMenuItems.splice(index, 1);
+  
+  // Save to storage
+  chrome.storage.sync.set({ contextMenuItems }, () => {
+    renderContextMenuItems();
+    showStatus('Menu item removed! Click "Save" to apply changes.', 'success');
+    setTimeout(clearStatus, 2000);
+  });
+}
+
 /**
  * Setup event listeners for various UI elements
  */
@@ -160,6 +278,20 @@ function setupEventListeners() {
   if (clearBtn) {
     clearBtn.addEventListener('click', handleClearConfig);
   }
+  
+  // Add menu item button handler
+  if (addMenuItemBtn) {
+    addMenuItemBtn.addEventListener('click', addContextMenuItem);
+  }
+  
+  // Allow adding menu item by pressing Enter
+  if (newMenuItemInput) {
+    newMenuItemInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        addContextMenuItem();
+      }
+    });
+  }
 }
 
 // --- Configuration Management ---
@@ -226,7 +358,7 @@ function handleTest() {
  * Handle clear config button click
  */
 function handleClearConfig() {
-  chrome.storage.sync.remove(['haHost', 'ssl', 'webhookId', 'userName', 'deviceName'], () => {
+  chrome.storage.sync.remove(['haHost', 'ssl', 'webhookId', 'userName', 'deviceName', 'contextMenuItems'], () => {
     // Clear form fields
     hostInput.value = '';
     sslToggle.checked = true;
@@ -236,6 +368,10 @@ function handleClearConfig() {
       deviceInput.value = '';
     }
 
+    // Reset context menu items to default
+    contextMenuItems = [{ id: 'default', name: 'Default' }];
+    renderContextMenuItems();
+    
     showStatus('Config cleared!', 'success');
     setTimeout(clearStatus, 2000);
   });

package/style.css

@@ -381,3 +381,63 @@ button:active, .ok-btn:active {
   outline: none;
   box-shadow: 0 4px 16px #00b4fc55;
 }
+
+/* Context Menu Items Management */
+.add-menu-item-row {
+  display: flex;
+  gap: 0.5em;
+  width: 100%;
+  margin-bottom: 1.5em;
+  align-items: center;
+}
+.add-menu-item-row input {
+  flex: 1;
+  margin-bottom: 0;
+}
+.add-menu-item-row button {
+  margin-bottom: 0;
+  min-width: 70px;
+}
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.7em 1em;
+  background: #232e4a;
+  border-radius: 8px;
+  margin-bottom: 0.5em;
+  box-shadow: 0 1.5px 8px #00b4fc22;
+}
+.menu-item-name {
+  color: #eaf6ff;
+  font-weight: 600;
+  flex: 1;
+}
+.menu-item-default {
+  color: #00e6a8;
+  font-size: 0.9em;
+  margin-left: 0.5em;
+}
+.menu-item-remove {
+  padding: 0.3em 0.8em;
+  font-size: 0.9em;
+  background: linear-gradient(90deg, #ff4e6a 0%, #ffb347 100%);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 600;
+  box-shadow: 0 1.5px 8px rgba(255, 78, 106, 0.3);
+  transition: background 0.18s, box-shadow 0.18s;
+}
+.menu-item-remove:hover {
+  box-shadow: 0 2px 12px rgba(255, 78, 106, 0.5);
+}
+.menu-item-remove:active {
+  background: #ff4e6a;
+  box-shadow: 0 1px 4px rgba(255, 78, 106, 0.4);
+}
+#contextMenuItems {
+  width: 100%;
+  margin-bottom: 1em;
+}

package/utils.js

@@ -419,6 +419,7 @@ async function sendToWebhook(webhookUrl, data) {
  * @param {object} options - Configuration options
  * @param {object} options.tab - Tab information
  * @param {object} [options.contextInfo] - Context menu info (for right-click)
+ * @param {string} [options.context] - Context menu name (e.g., "Default", "Automation")
  * @param {Function} [options.onProgress] - Progress callback (message) => void
  * @param {Function} [options.onSuccess] - Success callback (data) => void
  * @param {Function} [options.onError] - Error callback (error) => void
@@ -430,6 +431,7 @@ async function sendToHomeAssistant(options) {
   const {
     tab,
     contextInfo,
+    context,
     onProgress,
     onSuccess,
     onError,
@@ -515,6 +517,11 @@ async function sendToHomeAssistant(options) {
     if (config.deviceName) {
       pageInfo.device = config.deviceName;
     }
+    
+    // Add context information if provided (from context menu)
+    if (context) {
+      pageInfo.context = context;
+    }
 
     // Send to webhook
     await sendToWebhook(webhookUrl, pageInfo);