fixed respawn of traditional buttons

Author: MaxITService

buttons-init.js

@@ -1,4 +1,3 @@
-// buttons-init.js
 // Version: 1.0
 //
 // Documentation:
@@ -24,7 +23,7 @@ window.MaxExtensionButtonsInit = {
      * Creates and appends toggle switches to the specified container.
      * @param {HTMLElement} container - The DOM element to which toggles will be appended.
      */
-    generateAndAppendToggles: function(container) {
+    generateAndAppendToggles: function (container) {
         const autoSendToggle = MaxExtensionInterface.createToggle(
             'auto-send-toggle',
             'Enable Auto-send',
@@ -51,13 +50,14 @@ window.MaxExtensionButtonsInit = {
     /**
      * Creates and appends custom send buttons to the specified container.
      * @param {HTMLElement} container - The DOM element to which custom buttons will be appended.
+     * @param {boolean} isPanel - Flag indicating if the container is the floating panel.
      */
-    generateAndAppendCustomSendButtons: function(container) {
-        // Add floating panel toggle button at the beginning
-        if (window.MaxExtensionFloatingPanel) {
+    generateAndAppendCustomSendButtons: function (container, isPanel) {
+        // Only add the toggle button to the INLINE container, not the floating panel itself.
+        if (window.MaxExtensionFloatingPanel && !isPanel) {
             const floatingPanelToggleButton = window.MaxExtensionFloatingPanel.createPanelToggleButton();
             container.appendChild(floatingPanelToggleButton);
-            logConCgp('[init] Floating panel toggle button has been created and appended.');
+            logConCgp('[init] Floating panel toggle button has been created and appended for inline container.');
         }
 
         globalMaxExtensionConfig.customButtons.forEach((buttonConfiguration, index) => {
@@ -77,7 +77,7 @@ window.MaxExtensionButtonsInit = {
      * Creates and inserts custom buttons and toggles into the target container element.
      * @param {HTMLElement} targetContainer - The DOM element where custom elements will be inserted.
      */
-    createAndInsertCustomElements: function(targetContainer) {
+    createAndInsertCustomElements: function (targetContainer) {
         // Prevent duplication by checking if the container already exists using dynamic selector
         const existingContainer = document.getElementById(window.InjectionTargetsOnWebsite.selectors.buttonsContainerId);
         if (existingContainer && existingContainer.parentElement === targetContainer) {
@@ -98,44 +98,47 @@ window.MaxExtensionButtonsInit = {
             z-index: 1000;
         `;
 
-        // Append custom send buttons
-        this.generateAndAppendCustomSendButtons(customElementsContainer);
+        // Determine if we are creating buttons for the panel or for an inline container.
+        const isPanel = targetContainer.id === 'max-extension-floating-panel-content';
+
+        // Append custom send buttons, passing the context.
+        this.generateAndAppendCustomSendButtons(customElementsContainer, isPanel);
         // Append toggle switches
         this.generateAndAppendToggles(customElementsContainer);
 
         targetContainer.appendChild(customElementsContainer);
         logConCgp('[init] Custom elements have been inserted into the DOM.');
     },
-    
+
     /**
      * Updates all buttons and toggles in response to a profile change.
      * This refreshes both the floating panel and the original container.
      */
-    updateButtonsForProfileChange: function() {
+    updateButtonsForProfileChange: function () {
         // Update buttons in the original container
         const originalContainer = document.getElementById(window.InjectionTargetsOnWebsite.selectors.buttonsContainerId);
         if (originalContainer) {
             // Clear existing buttons and toggles
             originalContainer.innerHTML = '';
-            
+
             // Re-generate buttons and toggles with new profile data
-            this.generateAndAppendCustomSendButtons(originalContainer);
+            this.generateAndAppendCustomSendButtons(originalContainer, false); // Not panel
             this.generateAndAppendToggles(originalContainer);
-            
+
             logConCgp('[init] Updated buttons in original container for profile change.');
         }
-        
+
         // Update buttons in the floating panel if it exists and is initialized
         if (window.MaxExtensionFloatingPanel && window.MaxExtensionFloatingPanel.panelElement) {
             const panelContent = document.getElementById('max-extension-floating-panel-content');
             if (panelContent) {
                 // Clear existing buttons and toggles
                 panelContent.innerHTML = '';
-                
+
                 // Re-generate buttons and toggles with new profile data
-                this.generateAndAppendCustomSendButtons(panelContent);
+                this.generateAndAppendCustomSendButtons(panelContent, true); // This is the panel
                 this.generateAndAppendToggles(panelContent);
-                
+
                 logConCgp('[init] Updated buttons in floating panel for profile change.');
             }
         }
@@ -146,13 +149,13 @@ window.MaxExtensionButtonsInit = {
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'profileChanged') {
         logConCgp('[init] Received profile change notification');
-        
+
         // Update the global config with the new profile data
         window.globalMaxExtensionConfig = message.config;
-        
+
         // Update the UI components
         window.MaxExtensionButtonsInit.updateButtonsForProfileChange();
-        
+
         // Acknowledge the message
         sendResponse({ success: true });
     }

code-notes.md

@@ -1,5 +1,3 @@
-// code-notes.md
-
 # OneClickPrompts Chrome Extension - Codebase Overview
 
 This document provides a high-level overview of the OneClickPrompts Chrome Extension codebase. It describes the purpose of each file and its role within the extension. Extension was previously called "ChatGPT Quick Buttons for your text".
@@ -8,6 +6,16 @@ This document provides a high-level overview of the OneClickPrompts Chrome Exten
 
 The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, Copilot, DeepSeek, AI Studio, Gemini, and Grok by adding customizable buttons that inject pre-defined prompts into the chat input area. It also includes features for managing profiles, enabling keyboard shortcuts, and customizing the user interface.
 
+## Core Reliability Pattern: Crash-Only / Self-Healing DOM Injection
+
+A foundational architectural decision in this extension is the use of a **"Crash-only"** (or **"Self-healing"**) reliability pattern for managing the UI in the dynamic, and often hostile, DOM of the target Single-Page Applications (SPAs).
+
+- **The Problem:** The DOM on sites like ChatGPT is unpredictable. Elements are frequently destroyed and re-created, making simple, "surgical" DOM manipulations fragile. An attempt to insert a button can fail if the target container disappears at the wrong millisecond.
+- **The Solution:** Instead of writing complex recovery code for every possible failure, the extension embraces a "let-it-crash" philosophy. Any time the UI's integrity is in question (e.g., after an SPA navigation or when closing the floating panel), the extension triggers a full, **idempotent re-initialization** of its UI components.
+- **Why It Works:** This approach delegates UI creation to the robust resiliency engine in `buttons-injection.js`, which is designed to patiently wait for injection targets and handle dynamic changes. This trades a small amount of computational efficiency for a massive gain in reliability, ensuring the extension's UI is always present and functional. This pattern is analogous to forcing a re-mount in frameworks like React by changing a component's `key`.
+
+This "Crash-only" principle informs the design of `init.js`, `buttons-injection.js`, and `floating-panel-ui-interaction.js`.
+
 ## File Descriptions
 
 ### `manifest.json`
@@ -80,7 +88,7 @@ The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, C
 - **Purpose:** Contains UI interaction and state management methods for the floating panel.
 - **Role:** Handles toggling panel visibility and updating the panel appearance from settings. The old "hide and clone" mechanism has been completely replaced.
 - **Key functions:**
-  - `togglePanel()`: An `async` function that toggles the floating panel's visibility using a **"destroy and re-create"** mechanism. When toggled ON, it destroys the inline buttons and re-creates them inside the panel. When toggled OFF, it does the reverse.
+  - `togglePanel()`: An `async` function that toggles the floating panel's visibility. When closed, it intentionally triggers the extension's main `publicStaticVoidMain()` initializer, delegating the button re-creation to the robust **"Crash-only"** resiliency engine.
   - `updatePanelFromSettings()`: Updates the panel’s dynamic styles (like position, size, and opacity).
 
 ### `floating-panel-ui-queue.js`
@@ -137,8 +145,8 @@ The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, C
 
 ### `init.js`
 
-- **Purpose:** Main initialization script for the content script. It acts as the **Director** of the initial UI setup.
-- **Role:** Implements a **"decide first, then create"** architecture to prevent UI flicker. It asynchronously checks if the floating panel should be visible for the current site *before* rendering any buttons. Based on this setting, it either injects the buttons into the traditional inline location (via `buttons-injection.js`) or directly into the floating panel, which it creates on demand. It also orchestrates the initialization of the full floating panel system in a controlled sequence to prevent race conditions.
+- **Purpose:** Main initialization script for the content script. It acts as the **Director** of the initial UI setup and embodies the **Crash-only** philosophy.
+- **Role:** Implements a **"decide first, then create"** architecture to prevent UI flicker. It asynchronously checks if the floating panel should be visible for the current site _before_ rendering any buttons. Based on this setting, it either injects the buttons into the traditional inline location (via `buttons-injection.js`) or directly into the floating panel. Its main initialization function (`publicStaticVoidMain`) is designed to be **idempotent** and is called on page load, SPA navigation, and panel closing to ensure a consistent and reliable UI state.
 
 ### `interface.js`
 
@@ -157,8 +165,8 @@ The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, C
 
 ### `buttons-injection.js`
 
-- **Purpose:** Handles the injection of custom buttons into the webpage for the **inline mode**.
-- **Role:** This script is now primarily used when `init.js` decides that the floating panel should be hidden on initial load. It finds the correct injection point on the page and implements a resiliency mechanism to re-inject the elements if they disappear due to dynamic page updates.
+- **Purpose:** Handles the injection of custom buttons into the webpage for the **inline mode** and provides the core resiliency mechanism.
+- **Role:** This script is now primarily used when `init.js` decides that the floating panel should be hidden on initial load. It finds the correct injection point on the page and implements a **self-healing** resiliency mechanism (using `MutationObserver` and timeouts) to re-inject the elements if they disappear due to dynamic page updates.
 
 ### `buttons-clicking-chatgpt.js`, `buttons-clicking-claude.js`, `buttons-clicking-copilot.js`, `buttons-clicking-deepseek.js`, `buttons-clicking-aistudio.js`, `buttons-clicking-grok.js`, `buttons-clicking-gemini.js`
 
@@ -258,11 +266,10 @@ The extension operates as follows:
 
 1.  The user configures the extension through the popup interface (`popup.html` and `popup-page-scripts/*`).
 2.  The configuration is stored in Chrome's storage by the service worker (`config.js`).
-3.  When the user visits a supported website, the content scripts are injected into the page.
-4.  The main content script (`init.js`) first checks if the floating panel should be visible. It then creates the custom buttons directly in the correct location (either inline or inside the newly created floating panel) to prevent any visual flicker.
-5.  When the user toggles the panel's visibility, the buttons are destroyed from their current location and re-created in the new one.
-6.  The floating panel's position, size, and visibility state are saved per website and restored when revisiting.
-7.  When the user clicks a custom button:
+3.  When the user visits a supported website, the content scripts are injected. The main initializer (`init.js`) then decides whether to create the UI inline or in the floating panel, based on saved settings, preventing any visual flicker.
+4.  If the UI disappears due to SPA updates, the **self-healing** resiliency engine in `buttons-injection.js` detects the change and triggers a full, idempotent re-initialization.
+5.  When the user closes the floating panel, this also triggers the same idempotent re-initialization, reliably moving the buttons back to their inline location.
+6.  When the user clicks a custom button:
     - If the floating panel is active and Queue Mode is on, the prompt is added to a queue. The queue sends prompts sequentially with a configurable delay.
     - Otherwise, the appropriate site-specific function is called to insert the text and trigger the send button.
 
@@ -272,4 +279,4 @@ The extension operates as follows:
 - The `InjectionTargetsOnWebsite` class in `utils.js` centralizes the CSS selectors for different websites, making it easier to support new platforms.
 - The floating panel provides an alternative UI that can be positioned anywhere on the screen, offering flexibility for different workflows.
 - Button configurations are consistently applied between the inline injection and floating panel modes.
-- The extension uses debounced saving to prevent excessive storage writes when the user is dragging or resizing the floating panel.
+- The extension uses debounced saving to prevent excessive storage writes when the user is dragging or resizing the floating panel.

floating-panel-settings.js

@@ -93,24 +93,36 @@ window.MaxExtensionFloatingPanel.loadPanelSettings = function () {
 
 /**
  * Saves panel settings to Chrome's storage via the config service worker.
+ * Returns a Promise that resolves on success and rejects on failure.
  */
 window.MaxExtensionFloatingPanel.savePanelSettings = function () {
-    try {
-        const hostname = window.location.hostname;
-        chrome.runtime.sendMessage({
-            type: 'saveFloatingPanelSettings',
-            hostname: hostname,
-            settings: this.currentPanelSettings
-        }, (response) => {
-            if (chrome.runtime.lastError) {
-                logConCgp('[floating-panel] Failed to save panel settings:', chrome.runtime.lastError.message);
-            } else if (response && response.success) {
-                logConCgp('[floating-panel] Saved panel settings for ' + hostname);
-            }
-        });
-    } catch (error) {
-        logConCgp('[floating-panel] Error saving panel settings: ' + error.message);
-    }
+    return new Promise((resolve, reject) => {
+        try {
+            const hostname = window.location.hostname;
+            chrome.runtime.sendMessage({
+                type: 'saveFloatingPanelSettings',
+                hostname: hostname,
+                settings: this.currentPanelSettings
+            }, (response) => {
+                if (chrome.runtime.lastError) {
+                    const errorMsg = `Failed to save panel settings: ${chrome.runtime.lastError.message}`;
+                    logConCgp(`[floating-panel] ${errorMsg}`);
+                    reject(new Error(errorMsg));
+                } else if (response && response.success) {
+                    logConCgp('[floating-panel] Saved panel settings for ' + hostname);
+                    resolve();
+                } else {
+                    const errorMsg = `Save failed with response: ${JSON.stringify(response)}`;
+                    logConCgp(`[floating-panel] ${errorMsg}`);
+                    reject(new Error(errorMsg));
+                }
+            });
+        } catch (error) {
+            const errorMsg = `Error saving panel settings: ${error.message}`;
+            logConCgp(`[floating-panel] ${errorMsg}`);
+            reject(error);
+        }
+    });
 };
 
 /**

floating-panel-ui-interaction.js

@@ -34,15 +34,16 @@ window.MaxExtensionFloatingPanel.togglePanel = async function (event) {
 
         this.isPanelVisible = !this.isPanelVisible;
         this.currentPanelSettings.isVisible = this.isPanelVisible;
-        this.debouncedSavePanelSettings();
+
+        // Await the save to ensure state is persisted before re-initializing. This is critical.
+        await this.savePanelSettings();
 
         if (this.isPanelVisible) {
             logConCgp('[floating-panel] Toggling panel ON. Re-creating buttons in panel.');
-            // 1. Destroy the inline buttons container. This prevents resiliency checks from finding an empty container.
+            // 1. Destroy the inline buttons container.
             const originalContainer = document.getElementById(window.InjectionTargetsOnWebsite.selectors.buttonsContainerId);
             if (originalContainer) {
                 originalContainer.remove();
-                logConCgp('[floating-panel] Destroyed inline buttons container.');
             }
 
             // 2. Create buttons directly in the panel.
@@ -61,26 +62,25 @@ window.MaxExtensionFloatingPanel.togglePanel = async function (event) {
             }
 
         } else {
-            logConCgp('[floating-panel] Toggling panel OFF. Re-creating buttons inline.');
+            logConCgp('[floating-panel] Toggling panel OFF. Re-initializing extension for inline buttons.');
             // 1. Destroy buttons inside the panel.
             const panelContent = document.getElementById('max-extension-floating-panel-content');
             if (panelContent) {
                 panelContent.innerHTML = '';
-                logConCgp('[floating-panel] Destroyed panel buttons.');
             }
 
             // 2. Hide the panel.
             this.panelElement.style.display = 'none';
 
-            // 3. Perform a fast, direct re-creation of buttons in their original inline location.
-            // The flag we set prevents the watchdog from interfering with this.
-            const selectors = window.InjectionTargetsOnWebsite.selectors.containers;
-            MaxExtensionUtils.waitForElements(selectors, (targetDiv) => {
-                logConCgp('[floating-panel] Found inline target. Injecting buttons directly.');
-                window.MaxExtensionButtonsInit.createAndInsertCustomElements(targetDiv);
-            });
+            // 3. Re-run the entire, robust initialization script.
+            // This will correctly detect that the panel is now hidden (since we just saved that setting)
+            // and will proceed with the standard, resilient inline injection.
+            publicStaticVoidMain();
         }
-    } finally {
+    } catch (error) {
+        logConCgp('[floating-panel] CRITICAL ERROR in togglePanel try block:', error);
+    }
+    finally {
         // Re-enable the watchdog after a short delay to allow the DOM to settle.
         setTimeout(() => {
             window.OneClickPrompts_isTogglingPanel = false;