@kudoai/chatgpt.js 3.3.4 → 3.4.0

package/starters/chrome/extension/lib/chatgpt.js

@@ -8,7 +8,7 @@ localStorage.alertQueue = JSON.stringify([]);
 localStorage.notifyProps = JSON.stringify({ queue: { topRight: [], bottomRight: [], bottomLeft: [], topLeft: [] }});
 
 // Define chatgpt API
-const chatgpt = { // eslint-disable-line no-redeclare
+const chatgpt = {
     openAIaccessToken: {}, endpoints: {
     assets: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js',
     openAI: {
@@ -64,9 +64,63 @@ const chatgpt = { // eslint-disable-line no-redeclare
     // [ title/msg = strings, btns = [named functions], checkbox = named function, width (px) = int ] = optional
     // * Spaces are inserted into button labels by parsing function names in camel/kebab/snake case
 
+        // Init env context
         const scheme = chatgpt.isDarkMode() ? 'dark' : 'light',
               isMobile = chatgpt.browser.isMobile();
 
+        // Define event handlers
+        const handlers = {
+
+            dismiss: {
+                click(event) {
+                    if (event.target == event.currentTarget || event.target.closest('[class*="-close-btn]'))
+                        dismissAlert()
+                },
+
+                key(event) {
+                    if (!/^(?: |Space|Enter|Return|Esc)/.test(event.key) || ![32, 13, 27].includes(event.keyCode))
+                        return
+                    for (const alertId of alertQueue) { // look to handle only if triggering alert is active
+                        const alert = document.getElementById(alertId)
+                        if (!alert || alert.style.display == 'none') return
+                        if (event.key.startsWith('Esc') || event.keyCode == 27) dismissAlert() // and do nothing
+                        else { // Space/Enter pressed
+                            const mainButton = alert.querySelector('.modal-buttons').lastChild // look for main button
+                            if (mainButton) { mainButton.click() ; event.preventDefault() } // click if found
+                        }
+                    }
+                }
+            },
+
+            drag: {
+                mousedown(event) { // find modal, attach listeners, init XY offsets
+                    if (event.button != 0) return // prevent non-left-click drag
+                    if (getComputedStyle(event.target).cursor == 'pointer') return // prevent drag on interactive elems
+                    chatgpt.draggableElem = event.currentTarget
+                    chatgpt.draggableElem.style.cursor = 'grabbing'
+                    event.preventDefault(); // prevent sub-elems like icons being draggable
+                    ['mousemove', 'mouseup'].forEach(event => document.addEventListener(event, handlers.drag[event]))
+                    const draggableElemRect = chatgpt.draggableElem.getBoundingClientRect()
+                    handlers.drag.offsetX = event.clientX - draggableElemRect.left +21
+                    handlers.drag.offsetY = event.clientY - draggableElemRect.top +12
+                },
+
+                mousemove(event) { // drag modal
+                    if (!chatgpt.draggableElem) return
+                    const newX = event.clientX - handlers.drag.offsetX,
+                          newY = event.clientY - handlers.drag.offsetY
+                    Object.assign(chatgpt.draggableElem.style, { left: `${newX}px`, top: `${newY}px` })
+                },
+
+                mouseup() { // remove listeners, reset chatgpt.draggableElem
+                    chatgpt.draggableElem.style.cursor = 'inherit';
+                    ['mousemove', 'mouseup'].forEach(event =>
+                        document.removeEventListener(event, handlers.drag[event]))
+                    chatgpt.draggableElem = null
+                }
+            }
+        }
+
         // Create modal parent/children elements
         const modalContainer = document.createElement('div');
         modalContainer.id = Math.floor(chatgpt.randomFloat() * 1000000) + Date.now();
@@ -76,7 +130,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
               modalMessage = document.createElement('p');
 
         // Create/append/update modal style (if missing or outdated)
-        const thisUpdated = 20231203; // datestamp of last edit for this file's `modalStyle` 
+        const thisUpdated = 1734685032942; // timestamp of last edit for this file's `modalStyle`
         let modalStyle = document.querySelector('#chatgpt-modal-style'); // try to select existing style
         if (!modalStyle || parseInt(modalStyle.getAttribute('last-updated'), 10) < thisUpdated) { // if missing or outdated
             if (!modalStyle) { // outright missing, create/id/attr/append it first
@@ -88,26 +142,31 @@ const chatgpt = { // eslint-disable-line no-redeclare
                 '.no-mobile-tap-outline { outline: none ; -webkit-tap-highlight-color: transparent }'
 
                 // Background styles
-                + '.chatgpt-modal {' 
+                + '.chatgpt-modal {'
+                    + 'pointer-events: auto ;' // override any disabling from site modals (like guest login spam)
                     + 'position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 100% ;' // expand to full view-port
-                    + 'background-color: rgba(67, 70, 72, 0) ;' // init dim bg but no opacity
-                    + 'transition: background-color 0.05s ease ;' // speed to transition in show alert routine
+                    + 'transition: background-color 0.25s ease !important ;' // speed to show bg dim
                     + 'display: flex ; justify-content: center ; align-items: center ; z-index: 9999 }' // align
 
                 // Alert styles
                 + '.chatgpt-modal > div {'
-                    + 'opacity: 0 ; transform: translateX(-2px) translateY(5px) ; max-width: 75vw ; word-wrap: break-word ;'
-                    + 'transition: opacity 0.1s cubic-bezier(.165,.84,.44,1), transform 0.2s cubic-bezier(.165,.84,.44,1) ;'
-                    + `background-color: ${ scheme == 'dark' ? 'black' : 'white' } ;`
-                    + ( scheme != 'dark' ? 'border: 1px solid rgba(0, 0, 0, 0.3) ;' : '' )
+                    + 'position: absolute ;' // to be click-draggable
+                    + 'opacity: 0 ;' // to fade-in
+                    + `border: 1px solid ${ scheme == 'dark' ? 'white' : '#b5b5b5' };`
+                    + `color: ${ scheme == 'dark' ? 'white' : 'black' };`
+                    + `background-color: ${ scheme == 'dark' ? 'black' : 'white' };`
+                    + 'transform: translateX(-3px) translateY(7px) ;' // offset to move-in from
+                    + 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins
+                                + 'transform 0.55s cubic-bezier(.165,.84,.44,1) ;' // for move-ins
+                    + 'max-width: 75vw ; word-wrap: break-word ;'
                     + 'padding: 20px ; margin: 12px 23px ; border-radius: 15px ; box-shadow: 0 30px 60px rgba(0, 0, 0, .12) ;'
                     + ' -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; }'
                 + '.chatgpt-modal h2 { margin-bottom: 9px }'
                 + `.chatgpt-modal a { color: ${ scheme == 'dark' ? '#00cfff' : '#1e9ebb' }}`
-                + '.chatgpt-modal.animated > div { opacity: 1 ; transform: translateX(0) translateY(0) }'
-                + '@keyframes alert-zoom-fade-out { 0% { opacity: 1 ; transform: scale(1) }'
-                    + '50% { opacity: 0.25 ; transform: scale(1.05) }'
-                    + '100% { opacity: 0 ; transform: scale(1.35) }}'
+                + '.chatgpt-modal.animated > div { z-index: 13456 ; opacity: 0.98 ; transform: translateX(0) translateY(0) }'
+                + '@keyframes alert-zoom-fade-out {'
+                  + '0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }'
+                  + '100% { opacity: 0 ; transform: scale(1.35) }}'
 
                 // Button styles
                 + '.modal-buttons { display: flex ; justify-content: flex-end ; margin: 20px -5px -3px 0 ;'
@@ -140,7 +199,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' } ;`
                     + 'background-color: black ; position: inherit }'
                 + '.chatgpt-modal input[type="checkbox"]:focus { outline: none ; box-shadow: none }'
-            );            
+            );
         }
 
         // Insert text into elements
@@ -210,7 +269,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
         const modalElems = [closeBtn, modalTitle, modalMessage, modalButtons, checkboxDiv];
         modalElems.forEach((elem) => { modal.append(elem); });
         modal.style.width = `${ width || 458 }px`;
-        modalContainer.append(modal); document.body.append(modalContainer); 
+        modalContainer.append(modal); document.body.append(modalContainer);
 
         // Enqueue alert
         let alertQueue = JSON.parse(localStorage.alertQueue);
@@ -221,39 +280,22 @@ const chatgpt = { // eslint-disable-line no-redeclare
         modalContainer.style.display = 'none';
         if (alertQueue.length === 1) {
             modalContainer.style.display = '';
-            setTimeout(() => { // delay non-0 opacity's for transition fx
-                modalContainer.style.backgroundColor = ( 
-                    `rgba(67, 70, 72, ${ scheme === 'dark' ? 0.62 : 0.1 })`);
-                modalContainer.classList.add('animated'); }, 100);
+            setTimeout(() => { // dim bg
+                modal.parentNode.style.backgroundColor = `rgba(67, 70, 72, ${ scheme == 'dark' ? 0.62 : 0.33 })`
+                modal.parentNode.classList.add('animated')
+            }, 100) // delay for transition fx
         }
 
-        // Define click/key handlers
-        const clickHandler = event => { // explicitly defined to support removal post-dismissal
-            if (event.target == event.currentTarget || event.target instanceof SVGPathElement) dismissAlert(); };
-        const keyHandler = event => { // to dismiss active alert
-            const dismissKeys = [' ', 'Spacebar', 'Enter', 'Return', 'Escape', 'Esc'],
-                  dismissKeyCodes = [32, 13, 27];
-            if (dismissKeys.includes(event.key) || dismissKeyCodes.includes(event.keyCode)) {
-                for (const alertId of alertQueue) { // look to handle only if triggering alert is active
-                    const alert = document.getElementById(alertId);
-                    if (alert && alert.style.display !== 'none') { // active alert found
-                        if (event.key.includes('Esc') || event.keyCode == 27) // esc pressed
-                            dismissAlert(); // dismiss alert & do nothing
-                        else if ([' ', 'Spacebar', 'Enter', 'Return'].includes(event.key) || [32, 13].includes(event.keyCode)) { // space/enter pressed
-                            const mainButton = alert.querySelector('.modal-buttons').lastChild; // look for main button
-                            if (mainButton) { mainButton.click(); event.preventDefault(); } // click if found
-                        } return;
-        }}}};
-
-        // Add listeners to dismiss alert
+        // Add listeners
         const dismissElems = [modalContainer, closeBtn, closeSVG, dismissBtn];
-        dismissElems.forEach(elem => elem.onclick = clickHandler);
-        document.addEventListener('keydown', keyHandler);
+        dismissElems.forEach(elem => elem.onclick = handlers.dismiss.click);
+        document.addEventListener('keydown', handlers.dismiss.key);
+        modal.onmousedown = handlers.drag.mousedown // enable click-dragging
 
         // Define alert dismisser
         const dismissAlert = () => {
             modalContainer.style.backgroundColor = 'transparent';
-            modal.style.animation = 'alert-zoom-fade-out 0.075s ease-out';
+            modal.style.animation = 'alert-zoom-fade-out 0.135s ease-out';
             setTimeout(() => { // delay removal for fade-out
 
                 // Remove alert
@@ -261,7 +303,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                 alertQueue = JSON.parse(localStorage.alertQueue);
                 alertQueue.shift(); // + memory
                 localStorage.alertQueue = JSON.stringify(alertQueue); // + storage
-                document.removeEventListener('keydown', keyHandler); // prevent memory leaks
+                document.removeEventListener('keydown', handlers.dismiss.key); // prevent memory leaks
 
                 // Check for pending alerts in queue
                 if (alertQueue.length > 0) {
@@ -272,7 +314,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     }, 500);
                 }
 
-            }, 50);
+            }, 135);
         };
 
         return modalContainer.id; // if assignment used
@@ -557,7 +599,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                               .replace('Copy code', '');
                     msgs.push(sender + ': ' + msg);
                 });
-                transcript = msgs.join('\n\n');                     
+                transcript = msgs.join('\n\n');
 
             // ...or from getChatData(chatToGet)
             } else {
@@ -606,7 +648,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
         } else { // auto-save to file
 
             if (format == 'md') { // remove extraneous HTML + fix file extension
-                const mdMatch = /<.*(?:<h1(.|\n)*?href=".*?continue[^"]*".*?\/a>.*?)<[^/]/.exec(transcript)[1];
+                const mdMatch = /<.*<h1(.|\n)*?href=".*?continue[^"]*".*?\/a>.*?<[^/]/.exec(transcript)[1];
                 transcript = mdMatch || transcript; filename = filename.replace('.html', '.md');
             }
             const blob = new Blob([transcript],
@@ -621,20 +663,20 @@ const chatgpt = { // eslint-disable-line no-redeclare
     focusChatbar() { chatgpt.getChatBox()?.focus(); },
 
     footer: {
-        get() { return document.querySelector('main form')?.parentNode.parentNode.nextElementSibling; },
+        get() { return document.querySelector('.min-h-4'); },
 
-        hide() { 
+        hide() {
             const footer = chatgpt.footer.get();
             if (!footer) return console.error('Footer element not found!');
             if (footer.style.visibility == 'hidden') return console.info('Footer already hidden!');
-            footer.style.visibility = 'hidden'; footer.style.height = '3px';
+            footer.style.display = 'none';
         },
 
         show() {
             const footer = chatgpt.footer.get();
             if (!footer) return console.error('Footer element not found!');
             if (footer.style.visibility != 'hidden') return console.info('Footer already shown!');
-            footer.style.visibility = footer.style.height = 'inherit';            
+            footer.style.display = 'inherit'
         }
     },
 
@@ -883,17 +925,20 @@ const chatgpt = { // eslint-disable-line no-redeclare
     },
 
     getChatInput() { return chatgpt.getChatBox().firstChild.innerText; },
-    getContinueButton() { return document.querySelector('button:has([d^="M4.47189"])'); },
+    getContinueButton() { return document.querySelector('button.btn:has([d^="M4.47189"])'); },
     getFooterDiv() { return chatgpt.footer.get(); },
     getHeaderDiv() { return chatgpt.header.get(); },
     getLastPrompt() { return chatgpt.getChatData('active', 'msg', 'user', 'latest'); },
     getLastResponse() { return chatgpt.getChatData('active', 'msg', 'chatgpt', 'latest'); },
-    getNewChatButton() { return document.querySelector('button[data-testid*="new-chat-button"]'); },
+
+    getNewChatButton() {
+        return document.querySelector('button[data-testid*="new-chat-button"], button:has([d^="M15.6729"])'); },
+
     getNewChatLink() { return document.querySelector('nav a[href="/"]'); },
     getRegenerateButton() { return document.querySelector('button:has([d^="M3.06957"])'); },
 
     getResponse() {
-    // * Returns response via DOM by index arg if OpenAI chat page is active, otherwise uses API w/ following args:        
+    // * Returns response via DOM by index arg if OpenAI chat page is active, otherwise uses API w/ following args:
     // chatToGet = index|title|id of chat to get (defaults to latest if '' unpassed)
     // responseToGet = index of response to get (defaults to latest if '' unpassed)
     // regenResponseToGet = index of regenerated response to get (defaults to latest if '' unpassed)
@@ -1147,7 +1192,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
             }
 
             else if (element == 'dropdown') {
-                if (!attrs?.items || // there no are options to add 
+                if (!attrs?.items || // there no are options to add
                     !Array.isArray(attrs.items) || // it's not an array
                     !attrs.items.length) // the array is empty
                         attrs.items = [{ text: '🤖 chatgpt.js option', value: 'chatgpt.js option value' }]; // set default dropdown entry
@@ -1168,7 +1213,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
             const addElementsToMenu = () => {
                 const optionButtons = document.querySelectorAll('a[role="menuitem"]');
                 let cssClasses;
-        
+
                 for (const navLink of optionButtons)
                     if (navLink.textContent == 'Settings') {
                         cssClasses = navLink.classList;
@@ -1240,7 +1285,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                                  + (notificationDiv.isRight ? 'Right' : 'Left');
 
         // Create/append/update notification style (if missing or outdated)
-        const thisUpdated = 20231110; // datestamp of last edit for this file's `notifStyle` 
+        const thisUpdated = 20231110; // datestamp of last edit for this file's `notifStyle`
         let notifStyle = document.querySelector('#chatgpt-notif-style'); // try to select existing style
         if (!notifStyle || parseInt(notifStyle.getAttribute('last-updated'), 10) < thisUpdated) { // if missing or outdated
             if (!notifStyle) { // outright missing, create/id/attr/append it first
@@ -1255,7 +1300,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     + 'opacity: 0 ; position: fixed ; z-index: 9999 ; font-size: 1.8rem ; color: white ;' // visibility
                     + '-webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;'
                     + `transform: translateX(${ !notificationDiv.isRight ? '-' : '' }35px) ;` // init off-screen for transition fx
-                    + ( shadow ? ( 'box-shadow: -8px 13px 25px 0 ' + ( /\b(shadow|on)\b/gi.test(shadow) ? 'gray' : shadow )) : '' ) + '}'
+                    + ( shadow ? ( 'box-shadow: -8px 13px 25px 0 ' + ( /\b(?:shadow|on)\b/i.test(shadow) ? 'gray' : shadow )) : '' ) + '}'
                 + '.notif-close-btn { cursor: pointer ; float: right ; position: relative ; right: -4px ; margin-left: -3px ;'
                     + 'display: grid }' // top-align for non-OpenAI sites
                 + '@keyframes notif-zoom-fade-out { 0% { opacity: 1 ; transform: scale(1) }' // transition out keyframes
@@ -1263,7 +1308,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     + '45% { opacity: 0.05 ; transform: rotateX(-81deg) }'
                     + '100% { opacity: 0 ; transform: rotateX(-180deg) scale(1.15) }}'
             );
-        } 
+        }
 
         // Enqueue notification
         let notifyProps = JSON.parse(localStorage.notifyProps);
@@ -1296,7 +1341,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
             notificationDiv.style.transition = 'transform 0.15s ease, opacity 0.15s ease';
         }, 10);
 
-        // Init delay before hiding        
+        // Init delay before hiding
         const hideDelay = fadeDuration > notifDuration ? 0 // don't delay if fade exceeds notification duration
                         : notifDuration - fadeDuration; // otherwise delay for difference
 
@@ -1305,7 +1350,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
             notificationDiv.style.animation = `notif-zoom-fade-out ${ fadeDuration }s ease-out`;
             clearTimeout(dismissFuncTID);
         };
-        const dismissFuncTID = setTimeout(dismissNotif, hideDelay * 1000); // maintain visibility for `hideDelay` secs, then dismiss     
+        const dismissFuncTID = setTimeout(dismissNotif, hideDelay * 1000); // maintain visibility for `hideDelay` secs, then dismiss
         closeSVG.onclick = dismissNotif; // add to close button clicks
 
         // Destroy notification
@@ -1341,8 +1386,9 @@ const chatgpt = { // eslint-disable-line no-redeclare
         const functionNames = [];
         for (const prop in this) {
             if (typeof this[prop] == 'function') {
-                const chatgptIsParent = !Object.keys(this).find(obj => Object.keys(this[obj]).includes(this[prop].name)),
-                      functionParent = chatgptIsParent ? 'chatgpt' : 'other';
+                const chatgptIsParent = !Object.keys(this)
+                    .find(obj => Object.keys(this[obj]).includes(this[prop].name))
+                const functionParent = chatgptIsParent ? 'chatgpt' : 'other';
                 functionNames.push([functionParent, prop]);
             } else if (typeof this[prop] == 'object') {
                 for (const nestedProp in this[prop]) {
@@ -1398,7 +1444,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
 
     renderHTML(node) {
         const reTags = /<([a-z\d]+)\b([^>]*)>([\s\S]*?)<\/\1>/g,
-              reAttributes = /(\S+)=['"]?((?:.(?!['"]?\s+\S+=|[>']))+.)['"]?/g,
+              reAttributes = /(\S+)=['"]?((?:.(?!['"]?\s+\S+=|[>']))+.)['"]?/g, // eslint-disable-line
               nodeContent = node.childNodes;
 
         // Preserve consecutive spaces + line breaks
@@ -1453,7 +1499,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
         continue() { try { chatgpt.getContinueBtn().click(); } catch (err) { console.error(err.message); }},
 
         get() {
-            // * Returns response via DOM by index arg if OpenAI chat page is active, otherwise uses API w/ following args:        
+            // * Returns response via DOM by index arg if OpenAI chat page is active, otherwise uses API w/ following args:
             // chatToGet = index|title|id of chat to get (defaults to latest if '' unpassed)
             // responseToGet = index of response to get (defaults to latest if '' unpassed)
             // regenResponseToGet = index of regenerated response to get (defaults to latest if '' unpassed)
@@ -1497,8 +1543,8 @@ const chatgpt = { // eslint-disable-line no-redeclare
                         : /^(?:10|ten)(?:th)?$/.test(strPos) ? 10 : 1 )
 
                     // Transform base number if suffixed
-                    * ( /(ty|ieth)$/.test(strPos) ? 10 : 1 ) // x 10 if -ty/ieth
-                    + ( /teen(th)?$/.test(strPos) ? 10 : 0 ) // + 10 if -teen/teenth
+                    * ( /(?:ty|ieth)$/.test(strPos) ? 10 : 1 ) // x 10 if -ty/ieth
+                    + ( /teen(?:th)?$/.test(strPos) ? 10 : 0 ) // + 10 if -teen/teenth
 
                 );
                 response = responseDivs[nthOfResponse - 1].textContent;
@@ -1682,14 +1728,14 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     break;
                 }
             }
-    
+
             // Apply CSS to make the added elements look like they belong to the website
             this.elements.forEach(element => {
                 element.setAttribute('class', cssClasses);
                 element.style.maxHeight = element.style.minHeight = '44px'; // Fix the height of the element
                 element.style.margin = '2px 0';
             });
-    
+
             // Create MutationObserver instance
             const navBar = document.querySelector('nav');
             if (!navBar) return console.error('Sidebar element not found!');
@@ -1746,7 +1792,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
             }
 
             else if (element == 'dropdown') {
-                if (!attrs?.items || // There no are options to add 
+                if (!attrs?.items || // There no are options to add
                     !Array.isArray(attrs.items) || // It's not an array
                     !attrs.items.length) // The array is empty
                         attrs.items = [{ text: '🤖 chatgpt.js option', value: 'chatgpt.js option value' }]; // Set default dropdown entry
@@ -1761,7 +1807,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
                     newElement.add(optionElement);
                 });
             }
-                        
+
 
             // Fix for blank background on dropdown elements
             if (element == 'dropdown') newElement.style.backgroundColor = 'var(--gray-900, rgb(32, 33, 35))';
@@ -1862,7 +1908,7 @@ const chatgpt = { // eslint-disable-line no-redeclare
         if (!outputLang) return console.error('outputLang (2nd) argument not supplied. Pass a language!');
         for (let i = 0; i < arguments.length; i++) if (typeof arguments[i] !== 'string')
             return console.error(`Argument ${ i + 1 } must be a string!`);
-        chatgpt.send('Translate the following text to ' + outputLang 
+        chatgpt.send('Translate the following text to ' + outputLang
             + '. Only reply with the translation.\n\n' + text);
         console.info('Translating text...');
         await chatgpt.isIdle();
@@ -1872,14 +1918,19 @@ const chatgpt = { // eslint-disable-line no-redeclare
     unminify() { chatgpt.code.unminify(); },
 
     uuidv4() {
-        let d = new Date().getTime(); // get current timestamp in ms (to ensure UUID uniqueness)
-        const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-            const r = ( // generate random nibble
-                ( d + (window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1))*16)%16 | 0 );
-            d = Math.floor(d/16); // correspond each UUID digit to unique 4-bit chunks of timestamp
-            return ( c == 'x' ? r : (r&0x3|0x8) ).toString(16); // generate random hexadecimal digit
-        });
-        return uuid;
+        try {
+            // use native secure uuid generator when available
+            return crypto.randomUUID();
+        } catch(_e) {
+            let d = new Date().getTime(); // get current timestamp in ms (to ensure UUID uniqueness)
+            const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+                const r = ( // generate random nibble
+                    ( d + (window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1))*16)%16 | 0 );
+                d = Math.floor(d/16); // correspond each UUID digit to unique 4-bit chunks of timestamp
+                return ( c == 'x' ? r : (r&0x3|0x8) ).toString(16); // generate random hexadecimal digit
+            });
+            return uuid;
+        }
     },
 
     writeCode() { chatgpt.code.write(); }
@@ -2011,7 +2062,7 @@ for (const prop in chatgpt) {
 // Prefix console logs w/ '🤖 chatgpt.js >> '
 const consolePrefix = '🤖 chatgpt.js >> ', ogError = console.error, ogInfo = console.info;
 console.error = (...args) => {
-    if (!args[0].startsWith(consolePrefix)) ogError(consolePrefix + args[0], ...args.slice(1)); 
+    if (!args[0].startsWith(consolePrefix)) ogError(consolePrefix + args[0], ...args.slice(1));
     else ogError(...args);
 };
 console.info = (msg) => {

package/starters/chrome/extension/lib/dom.js

@@ -0,0 +1,28 @@
+window.dom = {
+    create: {
+        elem(elemType, attrs = {}) {
+            const elem = document.createElement(elemType)
+            for (const attr in attrs) elem.setAttribute(attr, attrs[attr])
+            return elem
+        },
+
+        svgElem(type, attrs) {
+            const elem = document.createElementNS('http://www.w3.org/2000/svg', type)
+            for (const attr in attrs) elem.setAttributeNS(null, attr, attrs[attr])
+            return elem
+        }
+    },
+
+    fillStarryBG(targetNode) { // requires https://assets.aiwebextensions.com/styles/css/<black|white>-rising-stars.min.css
+        const starsDivsContainer = document.createElement('div')
+        starsDivsContainer.style.cssText = 'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner
+          + 'height: 100% ; width: 100% ; border-radius: 15px ; overflow: clip ;' // bound innards exactly by targetNode
+          + 'z-index: -1'; // allow interactive elems to be clicked
+        ['sm', 'med', 'lg'].forEach(starSize => {
+            const starsDiv = document.createElement('div')
+            starsDiv.id = `${ chatgpt.isDarkMode() ? 'white' : 'black' }-stars-${starSize}`
+            starsDivsContainer.append(starsDiv)
+        })
+        targetNode.prepend(starsDivsContainer)
+    }
+};

package/starters/chrome/extension/lib/settings.js

@@ -0,0 +1,30 @@
+window.config = {}
+window.settings = {
+
+    // Init SETTINGS props (for popup menu)
+    controls: {
+        // Add settings options as keys, with each key's value being an object that includes:
+        // - 'type': the control type (e.g. 'toggle' or 'prompt')
+        // - 'label': a descriptive label
+        // - 'symbol' (optional): for icon display (e.g. ⌚)
+        // NOTE: Toggles are disabled by default unless key name contains 'disabled' or 'hidden' (case insensitive)
+        // NOTE: Controls are displayed in top-to-bottom order
+        // EXAMPLES:
+        // autoScrollDisabled: { type: 'toggle', label: 'Auto-Scroll' },
+        // replyLanguage: { type: 'prompt', symbol: '🌐', label: 'Reply Language' }
+    },
+
+    load() {
+        const keys = ( // original array if array, else new array from multiple args
+            Array.isArray(arguments[0]) ? arguments[0] : Array.from(arguments))
+        return Promise.all(keys.map(key => // resolve promise when all keys load
+            new Promise(resolve => // resolve promise when single key value loads
+                chrome.storage.sync.get(key, result => { // load from Chrome extension storage
+                    window.config[key] = result[key] || false ; resolve()
+    }))))},
+
+    save(key, val) {
+        chrome.storage.sync.set({ [key]: val }) // save to Chrome extension storage
+        window.config[key] = val // save to memory
+    }
+}

package/starters/chrome/extension/manifest.json

@@ -1,24 +1,27 @@
 {
-    "manifest_version": 3,
-    "name": "ChatGPT Extension",
-    "description": "A Chrome template to start using chatgpt.js like a boss!",
-    "version": "2024.10.3",
-    "author": "chatgpt.js",
-    "icons": {
-        "16": "icons/icon16.png",
-        "32": "icons/icon32.png",
-        "64": "icons/icon64.png",
-        "128": "icons/icon128.png"
-    },
-    "permissions": [ "storage", "tabs" ],
-    "action": { "default_popup": "popup/index.html" },
-    "web_accessible_resources": [{
-        "matches": ["<all_urls>"],
-        "resources": ["lib/settings-utils.js", "lib/chatgpt.js"]
-    }],
-    "content_scripts": [{
-        "matches": ["https://chatgpt.com/*", "https://chat.openai.com/*"],
-        "js": ["content.js"]
-    }],
-    "background": { "service_worker": "background.js" }
+  "manifest_version": 3,
+  "name": "ChatGPT Extension",
+  "short_name": "ChatGPT 🧩",
+  "description": "A Chromium extension template to start using chatgpt.js like a boss!",
+  "version": "2024.12.20",
+  "author": "KudoAI",
+  "homepage_url": "https://github.com/KudoAI/chatgpt.js-chrome-starter",
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "64": "icons/icon64.png",
+    "128": "icons/icon128.png"
+  },
+  "permissions": [ "activeTab", "storage" ],
+  "action": { "default_popup": "popup/index.html" },
+  "web_accessible_resources": [{
+    "matches": [ "<all_urls>" ],
+    "resources": [ "components/modals.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js" ]
+  }],
+  "content_scripts": [{
+    "matches": [ "https://chatgpt.com/*" ],
+    "js": [ "content.js" ]
+  }],
+  "background": { "service_worker": "service-worker.js" },
+  "minimum_chrome_version": "88"
 }