@kudoai/chatgpt.js 3.5.0 → 3.6.1

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

@@ -1,4 +1,4 @@
-// © 2023–2024 KudoAI & contributors under the MIT license.
+// © 2023–2025 KudoAI & contributors under the MIT license.
 // Source: https://github.com/KudoAI/chatgpt.js
 // User guide: https://chatgptjs.org/userguide
 // Latest minified release: https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js/chatgpt.min.js
@@ -23,7 +23,7 @@ const chatgpt = {
     actAs(persona) {
     // Prompts ChatGPT to act as a persona from https://github.com/KudoAI/chat-prompts/blob/main/personas.json
 
-        const promptsUrl = 'https://raw.githubusercontent.com/KudoAI/chat-prompts/main/dist/personas.min.json';
+        const promptsUrl = 'https://cdn.jsdelivr.net/gh/KudoAI/chat-prompts/dist/personas.min.json';
         return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
             xhr.open('GET', promptsUrl, true); xhr.send();
@@ -73,7 +73,7 @@ const chatgpt = {
 
             dismiss: {
                 click(event) {
-                    if (event.target == event.currentTarget || event.target.closest('[class*="-close-btn]'))
+                    if (event.target == event.currentTarget || event.target.closest('[class*=-close-btn]'))
                         dismissAlert()
                 },
 
@@ -97,7 +97,8 @@ const chatgpt = {
                     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'
+                    Object.assign(chatgpt.draggableElem.style, {
+                        cursor: 'grabbing', transition: '0.1s', willChange: 'transform', transform: 'scale(1.05)' })
                     event.preventDefault(); // prevent sub-elems like icons being draggable
                     ['mousemove', 'mouseup'].forEach(eventType =>
                         document.addEventListener(eventType, handlers.drag[eventType]))
@@ -114,7 +115,8 @@ const chatgpt = {
                 },
 
                 mouseup() { // remove listeners, reset chatgpt.draggableElem
-                    chatgpt.draggableElem.style.cursor = 'inherit';
+                    Object.assign(chatgpt.draggableElem.style, {
+                        cursor: 'inherit', transition: 'inherit', willChange: 'auto', transform: 'scale(1)' });
                     ['mousemove', 'mouseup'].forEach(eventType =>
                         document.removeEventListener(eventType, handlers.drag[eventType]))
                     chatgpt.draggableElem = null
@@ -131,7 +133,7 @@ const chatgpt = {
               modalMessage = document.createElement('p');
 
         // Create/append/update modal style (if missing or outdated)
-        const thisUpdated = 1735475757891 // timestamp of last edit for this file's `modalStyle`
+        const thisUpdated = 1735768363880 // 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
@@ -140,14 +142,21 @@ const chatgpt = {
                 document.head.append(modalStyle);
             }
             modalStyle.innerText = ( // update prev/new style contents
-                '.no-mobile-tap-outline { outline: none ; -webkit-tap-highlight-color: transparent }'
+                '.chatgpt-modal {' // vars
+                    + '--transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-in
+                                  + 'transform 0.55s cubic-bezier(.165,.84,.44,1) ;' // for move-in
+                    + '--bg-transition: background-color 0.25s ease }' // for bg dim
+
+                + '.no-mobile-tap-outline { outline: none ; -webkit-tap-highlight-color: transparent }'
 
                 // Background styles
                 + '.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
-                    + 'transition: background-color 0.25s ease !important ;' // speed to show bg dim
-                    + 'display: flex ; justify-content: center ; align-items: center ; z-index: 9999 }' // align
+                    + 'display: flex ; justify-content: center ; align-items: center ; z-index: 9999 ;' // align
+                    + 'transition: var(--bg-transition) ;' // for bg dim
+                        + '-webkit-transition: var(--bg-transition) ; -moz-transition: var(--bg-transition) ;'
+                        + '-o-transition: var(--bg-transition) ; -ms-transition: var(--bg-transition) }'
 
                 // Alert styles
                 + '.chatgpt-modal > div {'
@@ -157,18 +166,23 @@ const chatgpt = {
                     + `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 a:hover { text-decoration: underline }'
-                + '.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) }}'
+                    + 'max-width: 75vw ; word-wrap: break-word ; border-radius: 15px ;'
+                    + 'padding: 20px ; margin: 12px 23px ;'
+                    + `--shadow: 0 30px 60px rgba(0,0,0,0.12) ; box-shadow: var(--shadow) ;
+                          -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) ;`
+                    + 'user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -o-user-select: none ;'
+                        + '-ms-user-select: none ;'
+                    + 'transition: var(--transition) ;' // for fade-in + move-in
+                        + '-webkit-transition: var(--transition) ; -moz-transition: var(--transition) ;'
+                        + '-o-transition: var(--transition) ; -ms-transition: var(--transition) }'
+                + `.chatgpt-modal h2 { margin-bottom: 9px }
+                  .chatgpt-modal a { color: ${ scheme == 'dark' ? '#00cfff' : '#1e9ebb' }}
+                  .chatgpt-modal a:hover { text-decoration: underline }
+                  .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 ;'
@@ -181,9 +195,11 @@ const chatgpt = {
                     + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' } ;`
                     + `background: ${ scheme == 'dark' ? 'white' : 'black' } ;`
                     + `color: ${ scheme == 'dark' ? 'black' : 'white' }}`
-                + '.chatgpt-modal button:hover { color: #3d5d71 ; border-color: #6d9cb9 ;'
-                    + 'background-color: ' + ( scheme == 'dark' ? '#00cfff' : '#9cdaff' ) + ';'
-                    + 'box-shadow: 2px 1px ' + ( scheme == 'dark' ? '54px #00cfff' : '30px #9cdaff' ) + '}'
+                + `.chatgpt-modal button:hover {
+                      color: #3d5d71 ; border-color: #6d9cb9 ;
+                      background-color: ${ scheme == 'dark' ? '#00cfff' : '#9cdaff' };
+                      --shadow: 2px 1px ${ scheme == 'dark' ? '54px #00cfff' : '30px #9cdaff' };
+                      box-shadow: var(--shadow) ; box-shadow: var(--shadow) ; box-shadow: var(--shadow) }`
                 + '.modal-close-btn {'
                     + 'cursor: pointer ; width: 29px ; height: 29px ; border-radius: 17px ;'
                     + 'float: right ; position: relative ; right: -6px ; top: -5px }'
@@ -191,17 +207,18 @@ const chatgpt = {
                 + `.modal-close-btn:hover { background-color: #f2f2f2${ scheme == 'dark' ? '00' : '' }}`
 
                 // Checkbox styles
-                + '.chatgpt-modal .checkbox-group { display: flex ; margin-top: -18px }'
-                + '.chatgpt-modal .checkbox-group label {'
-                    + 'font-size: .7rem ; margin: -.04rem 0 0px .3rem ;'
-                    + `color: ${ scheme == 'dark' ? '#e1e1e1' : '#1e1e1e' }}`
-                + '.chatgpt-modal input[type=checkbox] { transform: scale(0.7) ;'
-                    + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' }}`
-                + '.chatgpt-modal input[type=checkbox]:checked {'
-                    + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' } ;`
-                    + 'background-color: black ; position: inherit }'
-                + '.chatgpt-modal input[type=checkbox]:focus { outline: none ; box-shadow: none }'
-            );
+                + `.chatgpt-modal .checkbox-group { margin-top: 15px }
+                  .chatgpt-modal .checkbox-group label {
+                      font-size: .7rem ; margin: -.04rem 0 0px .3rem 
+                      color: ${ scheme == 'dark' ? '#e1e1e1' : '#1e1e1e' }}
+                  .chatgpt-modal input[type=checkbox] { transform: scale(0.7) ;
+                      border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' }}
+                  .chatgpt-modal input[type=checkbox]:checked {
+                      border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' } ;
+                      background-color: black ; position: inherit }
+                  .chatgpt-modal input[type=checkbox]:focus {
+                      outline: none ; box-shadow: none ; -webkit-box-shadow: none ; -moz-box-shadow: none }`
+            )
         }
 
         // Insert text into elements
@@ -268,7 +285,7 @@ const chatgpt = {
         closeSVG.append(closeSVGpath); closeBtn.append(closeSVG);
 
         // Assemble/append div
-        const modalElems = [closeBtn, modalTitle, modalMessage, modalButtons, checkboxDiv];
+        const modalElems = [closeBtn, modalTitle, modalMessage, checkboxDiv, modalButtons ];
         modalElems.forEach((elem) => { modal.append(elem); });
         modal.style.width = `${ width || 458 }px`;
         modalContainer.append(modal); document.body.append(modalContainer);
@@ -283,7 +300,7 @@ const chatgpt = {
         if (alertQueue.length === 1) {
             modalContainer.style.display = '';
             setTimeout(() => { // dim bg
-                modal.parentNode.style.backgroundColor = `rgba(67, 70, 72, ${ scheme == 'dark' ? 0.62 : 0.33 })`
+                modal.parentNode.style.backgroundColor = `rgba(67,70,72,${ scheme == 'dark' ? 0.62 : 0.33 })`
                 modal.parentNode.classList.add('animated')
             }, 100) // delay for transition fx
         }
@@ -296,30 +313,29 @@ const chatgpt = {
 
         // Define alert dismisser
         const dismissAlert = () => {
-            modalContainer.style.backgroundColor = 'transparent';
-            modal.style.animation = 'alert-zoom-fade-out 0.135s ease-out';
-            setTimeout(() => { // delay removal for fade-out
+            modalContainer.style.backgroundColor = 'transparent'
+            modal.style.animation = 'alert-zoom-fade-out 0.165s ease-out'
+            modal.onanimationend = () => {
 
                 // Remove alert
-                modalContainer.remove(); // ...from DOM
-                alertQueue = JSON.parse(localStorage.alertQueue);
-                alertQueue.shift(); // + memory
-                localStorage.alertQueue = JSON.stringify(alertQueue); // + storage
-                document.removeEventListener('keydown', handlers.dismiss.key); // prevent memory leaks
+                modalContainer.remove() // ...from DOM
+                alertQueue = JSON.parse(localStorage.alertQueue)
+                alertQueue.shift() // + memory
+                localStorage.alertQueue = JSON.stringify(alertQueue) // + storage
+                document.removeEventListener('keydown', handlers.dismiss.key) // prevent memory leaks
 
                 // Check for pending alerts in queue
                 if (alertQueue.length > 0) {
-                    const nextAlert = document.getElementById(alertQueue[0]);
+                    const nextAlert = document.getElementById(alertQueue[0])
                     setTimeout(() => {
-                        nextAlert.style.display = '';
-                        setTimeout(() => { nextAlert.classList.add('animated'); }, 100);
-                    }, 500);
+                        nextAlert.style.display = ''
+                        setTimeout(() => nextAlert.classList.add('animated'), 100)
+                    }, 500)
                 }
+            }
+        }
 
-            }, 155);
-        };
-
-        return modalContainer.id; // if assignment used
+        return modalContainer.id // if assignment used
     },
 
     async askAndGetReply(query) {
@@ -592,7 +608,7 @@ const chatgpt = {
             // Create transcript from active chat
             if (chatToGet == 'active' && /\/\w{8}-\w{4}-\w{4}-\w{4}-\w{12}$/.test(window.location.href)) {
                 const chatDivs = document.querySelectorAll('main > div > div > div > div > div > div[class*=group]');
-                if (chatDivs.length === 0) return console.error('Chat is empty!');
+                if (!chatDivs.length) return console.error('Chat is empty!');
                 const msgs = []; let isUserMsg = true;
                 chatDivs.forEach((div) => {
                     const sender = isUserMsg ? 'USER' : 'CHATGPT'; isUserMsg = !isUserMsg;
@@ -970,14 +986,14 @@ const chatgpt = {
 
     history: {
         async isLoaded(timeout = null) {
-            const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(false), timeout)) : null;
+            const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(false), timeout)) : null
             const isLoadedPromise = new Promise(resolve => {
-                if (document.querySelector('nav')) resolve(true);
+                if (document.querySelector('nav')) resolve(true)
                 else new MutationObserver((_, obs) => {
-                    if (document.querySelector('nav')) { obs.disconnect(); resolve(true); }
-                }).observe(document.body, { childList: true, subtree: true });
-            });
-            return await ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise );
+                    if (document.querySelector('nav')) { obs.disconnect() ; resolve(true) }
+                }).observe(document.documentElement, { childList: true, subtree: true })
+            })
+            return await ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise )
         }
     },
 
@@ -1106,7 +1122,7 @@ const chatgpt = {
         }
     },
 
-    isDarkMode() { return document.documentElement.classList.toString().includes('dark'); },
+    isDarkMode() { return document.documentElement.className.includes('dark') },
     isFullScreen() { return chatgpt.browser.isFullScreen(); },
 
     async isIdle(timeout = null) {
@@ -1138,17 +1154,18 @@ const chatgpt = {
     },
 
     async isLoaded(timeout = null) {
-        const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(false), timeout)) : null;
+        const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(false), timeout)) : null
         const isLoadedPromise = new Promise(resolve => {
-            if (chatgpt.getNewChatBtn()) resolve(true);
+            if (chatgpt.getNewChatBtn()) resolve(true)
             else new MutationObserver((_, obs) => {
-                if (chatgpt.getNewChatBtn()) { obs.disconnect(); resolve(true); }
-            }).observe(document.body, { childList: true, subtree: true });
-        });
-        return await ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise );
+                if (chatgpt.getNewChatBtn()) { obs.disconnect() ; resolve(true) }
+            }).observe(document.documentElement, { childList: true, subtree: true })
+        })
+        return await ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise )
     },
 
     isLightMode() { return document.documentElement.classList.toString().includes('light'); },
+    isTyping() { return !!this.getStopButton() },
 
     logout() { window.location.href = 'https://chat.openai.com/auth/logout'; },
 
@@ -1287,7 +1304,7 @@ const chatgpt = {
                                  + (notificationDiv.isRight ? 'Right' : 'Left');
 
         // Create/append/update notification style (if missing or outdated)
-        const thisUpdated = 1735475527153 // timestamp of last edit for this file's `notifStyle`
+        const thisUpdated = 1735767823541 // timestamp 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
@@ -1300,12 +1317,18 @@ const chatgpt = {
                     + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",'
                         + '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif ;'
                     + '.no-mobile-tap-outline { outline: none ; -webkit-tap-highlight-color: transparent }'
-                    + 'background-color: black ; padding: 10px 13px 10px 18px ; border-radius: 11px ; border: 1px solid #f5f5f7 ;' // bubble style
+                    + 'background-color: black ; padding: 10px 13px 10px 18px ;' // bubble style
+                        + 'border-radius: 11px ; border: 1px solid #f5f5f7 ;'
                     + '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/i.test(shadow) ? 'gray' : shadow )) : '' ) + '}'
-                + '.notif-close-btn { cursor: pointer ; float: right ; position: relative ; right: -4px ; margin-left: -3px ;'
+                    + 'user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -o-user-select: none ;'
+                        + '-ms-user-select: none ;'
+                    + `transform: translateX(${ // init off-screen for transition fx
+                          !notificationDiv.isRight ? '-' : '' }35px) ;`
+                    + ( shadow ? `--shadow: -8px 13px 25px 0 ${ /\b(?:shadow|on)\b/i.test(shadow) ? 'gray' : shadow };
+                        box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--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
                     + '15% { opacity: 0.35 ; transform: rotateX(-27deg) scale(1.05) }'
@@ -1814,7 +1837,7 @@ const chatgpt = {
 
 
             // Fix for blank background on dropdown elements
-            if (element == 'dropdown') newElement.style.backgroundColor = 'var(--gray-900, rgb(32, 33, 35))';
+            if (element == 'dropdown') newElement.style.backgroundColor = 'var(--gray-900, rgb(32,33,35))';
 
             this.elements.push(newElement);
             this.activateObserver();
@@ -1843,15 +1866,15 @@ const chatgpt = {
         },
 
         async isLoaded(timeout = 5000) {
-            await chatgpt.isLoaded();
-            const timeoutPromise = new Promise(resolve => setTimeout(() => { resolve(false); }, timeout));
+            await chatgpt.isLoaded()
+            const timeoutPromise = new Promise(resolve => setTimeout(() => resolve(false), timeout))
             const isLoadedPromise = new Promise(resolve => {
-                if (chatgpt.getNewChatLink()) resolve(true);
+                if (chatgpt.getNewChatLink()) resolve(true)
                 else new MutationObserver((_, obs) => {
-                    if (chatgpt.getNewChatLink()) { obs.disconnect(); resolve(true); }
-                }).observe(document.body, { childList: true, subtree: true });
-            });
-            return await Promise.race([isLoadedPromise, timeoutPromise]);
+                    if (chatgpt.getNewChatLink()) { obs.disconnect() ; resolve(true) }
+                }).observe(document.documentElement, { childList: true, subtree: true })
+            })
+            return await Promise.race([isLoadedPromise, timeoutPromise])
         }
     },
 
@@ -1869,31 +1892,31 @@ const chatgpt = {
         return chatgpt.getChatData('active', 'msg', 'chatgpt', 'latest');
     },
 
-    speak(msg, options = {}) {
-    // Usage example: chatgpt.speak(await chatgpt.getLastResponse(), { voice: 1, pitch: 2, speed: 3 })
-    // options.voice = index of voices available on user device
-    // options.pitch = float for pitch of speech from 0 to 2
-    // options.speed = float for rate of speech from 0.1 to 10
-
-        const { voice = 2, pitch = 2, speed = 1.1 } = options;
+    speak(msg, { voice = 2, pitch = 2, speed = 1.1, onend } = {} ) {
+    // Example call: chatgpt.speak(await chatgpt.getLastResponse(), { voice: 1, pitch: 2, speed: 3 })
+    // - voice = index of voices available on user device
+    // - pitch = float for pitch of speech from 0 to 2
+    // - speed = float for rate of speech from 0.1 to 10
+    // - onend = callback function invoked when speech finishes playing
 
         // Validate args
-        if (typeof msg !== 'string') return console.error('Message must be a string!');
-        for (let key in options) {
-            const value = options[key];
-            if (typeof value !== 'number' && !/^\d+$/.test(value))
-                return console.error(`Invalid ${ key } index '${ value }'. Must be a number!`);
+        if (typeof msg != 'string') return console.error('Message must be a string!')
+        const validOptionKeys = ['voice', 'pitch', 'speed', 'onend']
+        for (const key in arguments[1]) {
+            if (!validOptionKeys.includes(key))
+                return console.error(`Invalid option '${key}'. Valid keys are: ${validOptionKeys}`)
+            const val = arguments[1][key]
+            if (key != 'onend' && typeof val != 'number' && !/^\d+$/.test(val))
+                return console.error(`Invalid ${key} value '${val}'. Must be a number!`)
+            else if (key == 'onend' && typeof val != 'function')
+                return console.error(`Invalid ${key} value. Must be a function!`)
         }
 
-        try { // to speak msg using {options}
-            const voices = speechSynthesis.getVoices(),
-                  utterance = new SpeechSynthesisUtterance();
-            utterance.text = msg;
-            utterance.voice = voices[voice];
-            utterance.pitch = pitch;
-            utterance.rate = speed;
-            speechSynthesis.speak(utterance);
-        } catch (err) { console.error( err); }
+        try { // to speak msg
+            const utterance = new SpeechSynthesisUtterance(), voices = speechSynthesis.getVoices()
+            Object.assign(utterance, { text: msg, voice: voices[voice], pitch: pitch, speed: speed, onend: onend })
+            speechSynthesis.speak(utterance)
+        } catch (err) { console.error(err) }
     },
 
     async summarize(text) {
@@ -2023,8 +2046,9 @@ const cjsFuncSynonyms = [
     ['render', 'parse'],
     ['reply', 'response'],
     ['sentiment', 'attitude', 'emotion', 'feeling', 'opinion', 'perception'],
-    ['speak', 'say', 'speech', 'talk', 'tts'],
+    ['speak', 'play', 'say', 'speech', 'talk', 'tts'],
     ['summarize', 'tldr'],
+    ['typing', 'generating'],
     ['unminify', 'beautify', 'prettify', 'prettyPrint']
 ];
 const camelCaser = (words) => {

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

@@ -1,35 +1,109 @@
+// Copyright © 2023–2025 Adam Lui (https://github.com/adamlui) under the MIT license
+// Source: https://github.com/adamlui/ai-web-extensions/blob/main/assets/lib/dom.js/src/dom.js
+
 window.dom = {
+    import(deps) { Object.assign(this.imports = this.imports || {}, deps) },
+
+    addRisingParticles(targetNode, { lightScheme = 'gray', darkScheme = 'white' } = {}) {
+    // * Requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<lightScheme>.min.css
 
-    imports: {
-        import(deps) { // { env) }
-            for (const depName in deps) this[depName] = deps[depName] }
+        if (targetNode.querySelector('[id*=particles]')) return
+        const particlesDivsWrapper = document.createElement('div')
+        particlesDivsWrapper.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(particleSize => {
+            const particlesDiv = document.createElement('div')
+            particlesDiv.id = this.imports.config?.bgAnimationsDisabled ? `particles-${particleSize}-off`
+                : `${( this.imports.env?.ui?.scheme || this.imports.env?.ui?.app?.scheme ) == 'dark' ? darkScheme
+                    : lightScheme }-particles-${particleSize}`
+            particlesDivsWrapper.append(particlesDiv)
+        })
+        targetNode.prepend(particlesDivsWrapper)
     },
 
     create: {
+        anchor(linkHref, displayContent, attrs = {}) {
+            const anchor = document.createElement('a'),
+                  defaultAttrs = { href: linkHref, target: '_blank', rel: 'noopener' },
+                  finalAttrs = { ...defaultAttrs, ...attrs }
+            Object.entries(finalAttrs).forEach(([attr, value]) => anchor.setAttribute(attr, value))
+            if (displayContent) anchor.append(displayContent)
+            return anchor
+        },
+
         elem(elemType, attrs = {}) {
             const elem = document.createElement(elemType)
             for (const attr in attrs) elem.setAttribute(attr, attrs[attr])
             return elem
         },
 
-        svgElem(type, attrs) {
+        style(content, attrs = {}) {
+            const style = document.createElement('style')
+            for (const attr in attrs) style.setAttribute(attr, attrs[attr])
+            if (content) style.innerText = content
+            return style
+        },
+
+        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/rising-stars/css/<black|white>.min.css
-        if (targetNode.querySelector('[id*=stars]')) return
-        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 = `${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}`
-            starsDivsContainer.append(starsDiv)
-        })
-        targetNode.prepend(starsDivsContainer)
+    cssSelectorize(classList) {
+        return classList.toString()
+            .replace(/([:[\]\\])/g, '\\$1') // escape special chars :[]\
+            .replace(/^| /g, '.') // prefix w/ dot, convert spaces to dots
+    },
+
+    get: {
+
+        computedSize(elems, { dimension } = {}) { // total width/height of elems (including margins)
+        // * Returns { width: totalWidth, height: totalHeight } if no dimension passed
+        // * Returns float if { dimension: 'width' | 'height' } passed
+
+            // Validate args
+            elems = elems instanceof NodeList ? [...elems] : [].concat(elems)
+            elems.forEach(elem => { if (!(elem instanceof Node))
+                throw new Error(`Invalid elem: Element "${JSON.stringify(elem)}" is not a valid DOM node`) })
+            const validDimensions = ['width', 'height'], dimensionsToCompute = [].concat(dimension || validDimensions)
+            dimensionsToCompute.forEach(dimension => { if (!validDimensions.includes(dimension))
+                throw new Error('Invalid dimension: Use \'width\' or \'height\'') })
+
+            // Compute dimensions
+            const computedDimensions = { width: 0, height: 0 }
+            elems.forEach(elem => {
+                const elemStyle = getComputedStyle(elem) ; if (elemStyle.display == 'none') return
+                if (dimensionsToCompute.includes('width'))
+                    computedDimensions.width += elem.getBoundingClientRect().width
+                        + parseFloat(elemStyle.marginLeft) + parseFloat(elemStyle.marginRight)
+                if (dimensionsToCompute.includes('height'))
+                    computedDimensions.height += elem.getBoundingClientRect().height
+                        + parseFloat(elemStyle.marginTop) + parseFloat(elemStyle.marginBottom)
+            })
+
+            // Return computed dimensions
+            return dimensionsToCompute.length > 1 ? computedDimensions // obj w/ width/height
+                 : computedDimensions[dimensionsToCompute[0]] // single total val
+        },
+
+        computedHeight(elems) { return this.computedSize(elems, { dimension: 'height' }) }, // including margins
+        computedWidth(elems) { return this.computedSize(elems, { dimension: 'width' }) }, // including margins
+
+        loadedElem(selector, timeout = null) {
+            const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(null), timeout)) : null
+            const isLoadedPromise = new Promise(resolve => {
+                const elem = document.querySelector(selector)
+                if (elem) resolve(elem)
+                else new MutationObserver((_, obs) => {
+                    const elem = document.querySelector(selector)
+                    if (elem) { obs.disconnect() ; resolve(elem) }
+                }).observe(document.documentElement, { childList: true, subtree: true })
+            })
+            return ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise )
+        }
     }
 };

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

@@ -6,6 +6,7 @@ window.settings = {
         // 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
+        // - 'defaultVal' (optional): default value of setting (true for toggles if unspecified, false otherwise)
         // - '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
@@ -14,14 +15,12 @@ window.settings = {
         // 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()
-    }))))},
+    load(...keys) {
+        return Promise.all(keys.flat().map(async key => // resolve promise when all keys load
+            window.config[key] = (await chrome.storage.sync.get(key))[key]
+                ?? this.controls[key]?.defaultVal ?? this.controls[key]?.type == 'toggle'
+        ))
+    },
 
     save(key, val) {
         chrome.storage.sync.set({ [key]: val }) // save to Chrome extension storage

package/starters/chrome/extension/manifest.json

@@ -3,7 +3,7 @@
   "name": "ChatGPT Extension",
   "short_name": "ChatGPT 🧩",
   "description": "A Chromium extension template to start using chatgpt.js like a boss!",
-  "version": "2024.12.29",
+  "version": "2025.2.10",
   "author": "KudoAI",
   "homepage_url": "https://github.com/KudoAI/chatgpt.js-chrome-starter",
   "icons": {

package/starters/chrome/extension/popup/controller.js

@@ -10,7 +10,7 @@
 
     // Import APP data
     const { app } = await chrome.storage.sync.get('app')
-    icons.imports.import({ app }) // for src's using app.urls.assetHost
+    icons.import({ app }) // for srcs using app.urls.assetHost
 
     // Define FUNCTIONS
 
@@ -25,10 +25,10 @@
         fade() {
 
             // Update toolbar icon
-            const iconDimensions = [16, 32, 64, 128], iconPaths = {}
-            iconDimensions.forEach(dimension => iconPaths[dimension] = `../icons/${
-                config.extensionDisabled ? 'faded/' : '' }icon${dimension}.png` )
-            chrome.action.setIcon({ path: iconPaths })
+            chrome.action.setIcon({ path: Object.fromEntries(
+                Object.keys(chrome.runtime.getManifest().icons).map(dimension =>
+                    [dimension, `../icons/${ config.extensionDisabled ? 'faded/' : '' }icon${dimension}.png`]
+            ))})
 
             // Update menu contents
             document.querySelectorAll('div.logo, div.menu-title, div.menu')
@@ -111,9 +111,9 @@
     const cjsDiv = dom.create.elem('div', { class: 'chatgpt-js' })
     const cjsLogo = dom.create.elem('img', {
         title: 'Powered by chatgpt.js',
-        src: `${app.urls.cjsMediaHost}/images/badges/powered-by-chatgpt.js-faded.png?b2a1975` })
+        src: `${app.urls.cjsAssetHost}/images/badges/powered-by-chatgpt.js-faded.png?b2a1975` })
     cjsLogo.onmouseover = cjsLogo.onmouseout = event => cjsLogo.src = `${
-        app.urls.cjsMediaHost}/images/badges/powered-by-chatgpt.js${
+        app.urls.cjsAssetHost}/images/badges/powered-by-chatgpt.js${
             event.type == 'mouseover' ? '' : '-faded' }.png?b2a1975`
     cjsLogo.onclick = () => chrome.tabs.create({ url: app.urls.chatgptJS })
     cjsDiv.append(cjsLogo) ; footer.append(cjsDiv)