@kudoai/chatgpt.js 3.6.0 → 3.6.2

package/starters/chrome/extension/components/modals.js

@@ -1,12 +1,63 @@
-// Requires lib/chatgpt.js + lib/dom.js
+// Requires lib/chatgpt.js + lib/dom.js + app + env
 
 window.modals = {
+    import(deps) { Object.assign(this.imports = this.imports || {}, deps) },
+
     stack: [], // of types of undismissed modals
     get class() { return `${this.imports.app.cssPrefix}-modal` },
 
-    imports: {
-        import(deps) { // { app, env }
-            for (const depName in deps) this[depName] = deps[depName] }
+    about() {
+
+        // Show modal
+        const aboutModal = this.alert(
+            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            '🧠 Author: ' // msg
+                + `<a href="${this.imports.app.author.url}">${this.imports.app.author.name}</a> `
+                    + `& <a href="${this.imports.app.urls.contributors}">contributors</a>\n`
+            + `🏷️ Version: <span class="about-em">${this.imports.app.version}</span>\n`
+            + '📜 Open source code: '
+                + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
+                    + this.imports.app.urls.gitHub + '</a>\n'
+            + '⚡ Powered by: '
+                + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
+            [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
+            '', 656 // modal width
+        )
+
+        // Format text
+        aboutModal.querySelector('h2').style.cssText = (
+            'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
+        aboutModal.querySelector('p').style.cssText = (
+            'text-align: center ; overflow-wrap: anywhere ;'
+          + `margin: ${ this.imports.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
+
+        // Hack buttons
+        aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
+        aboutModal.querySelectorAll('button').forEach(btn => {
+            btn.style.cssText = 'height: 55px ; min-width: 136px ; text-align: center'
+
+            // Replace buttons w/ clones that don't dismiss modal
+            const btnClone = btn.cloneNode(true)
+            btn.parentNode.replaceChild(btnClone, btn) ; btn = btnClone
+            btn.onclick = () => this.safeWinOpen(
+                btn.textContent == 'Get Support' ? `${modals.imports.app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${modals.imports.app.urls.gitHub}/discussions`
+              : modals.imports.app.urls.relatedExtensions
+            )
+
+            // Prepend emoji
+            if (/support/i.test(btn.textContent))
+                btn.textContent = '🧠 ' + btn.textContent
+            else if (/rate/i.test(btn.textContent))
+                btn.textContent = '⭐ ' + btn.textContent
+            else if (/extensions/i.test(btn.textContent))
+                btn.textContent = '🧠 ' + btn.textContent
+
+            // Hide Dismiss button
+            else btn.style.display = 'none'
+        })
+
+        return aboutModal
     },
 
     alert(title = '', msg = '', btns = '', checkbox = '', width = '') { // generic one from chatgpt.alert()
@@ -16,6 +67,30 @@ window.modals = {
         return alert
     },
 
+    init(modal) {
+        if (!modal) return // to support non-div this.open()s
+        if (!this.styles) this.stylize() // to init/append stylesheet
+        modal.classList.add('no-user-select', this.class) ; modal.parentNode.classList.add(`${this.class}-bg`)
+        dom.addRisingParticles(modal)
+    },
+
+    observeRemoval(modal, modalType) { // to maintain stack for proper nav
+        const modalBG = modal.parentNode
+        new MutationObserver(([mutation], obs) => {
+            mutation.removedNodes.forEach(removedNode => { if (removedNode == modalBG) {
+                if (this.stack[0] == modalType) { // new modal not launched, implement nav back logic
+                    this.stack.shift() // remove this modal type from stack 1st
+                    const prevModalType = this.stack[0]
+                    if (prevModalType) { // open it
+                        this.stack.shift() // remove type from stack since re-added on open
+                        this.open(prevModalType)
+                    }
+                }
+                obs.disconnect()
+            }})
+        }).observe(modalBG.parentNode, { childList: true, subtree: true })
+    },
+
     open(modalType) {
         const modal = this[modalType]() // show modal
         this.stack.unshift(modalType) // add to stack
@@ -23,12 +98,7 @@ window.modals = {
         this.observeRemoval(modal, modalType) // to maintain stack for proper nav
     },
 
-    init(modal) {
-        if (!modal) return // to support non-div this.open()s
-        if (!this.styles) this.stylize() // to init/append stylesheet
-        modal.classList.add('no-user-select', this.class) ; modal.parentNode.classList.add(`${this.class}-bg`)
-        dom.addRisingParticles(modal)
-    },
+    safeWinOpen(url) { open(url, '_blank', 'noopener') }, // to prevent backdoor vulnerabilities
 
     stylize() {
         if (!this.styles) {
@@ -77,78 +147,5 @@ window.modals = {
                 `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
           + `.about-em { color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
         )
-    },
-
-    observeRemoval(modal, modalType) { // to maintain stack for proper nav
-        const modalBG = modal.parentNode
-        new MutationObserver(([mutation], obs) => {
-            mutation.removedNodes.forEach(removedNode => { if (removedNode == modalBG) {
-                if (this.stack[0] == modalType) { // new modal not launched, implement nav back logic
-                    this.stack.shift() // remove this modal type from stack 1st
-                    const prevModalType = this.stack[0]
-                    if (prevModalType) { // open it
-                        this.stack.shift() // remove type from stack since re-added on open
-                        this.open(prevModalType)
-                    }
-                }
-                obs.disconnect()
-            }})
-        }).observe(modalBG.parentNode, { childList: true, subtree: true })
-    },
-
-    about() {
-
-        // Show modal
-        const aboutModal = this.alert(
-            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
-            '🧠 Author: ' // msg
-                + `<a href="${this.imports.app.author.url}">${this.imports.app.author.name}</a> `
-                    + `& <a href="${this.imports.app.urls.contributors}">contributors</a>\n`
-            + `🏷️ Version: <span class="about-em">${this.imports.app.version}</span>\n`
-            + '📜 Open source code: '
-                + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
-                    + this.imports.app.urls.gitHub + '</a>\n'
-            + '⚡ Powered by: '
-                + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
-            [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
-            '', 656 // modal width
-        )
-
-        // Format text
-        aboutModal.querySelector('h2').style.cssText = (
-            'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
-        aboutModal.querySelector('p').style.cssText = (
-            'text-align: center ; overflow-wrap: anywhere ;'
-          + `margin: ${ this.imports.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
-
-        // Hack buttons
-        aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
-        aboutModal.querySelectorAll('button').forEach(btn => {
-            btn.style.cssText = 'height: 55px ; min-width: 136px ; text-align: center'
-
-            // Replace buttons w/ clones that don't dismiss modal
-            const btnClone = btn.cloneNode(true)
-            btn.parentNode.replaceChild(btnClone, btn) ; btn = btnClone
-            btn.onclick = () => this.safeWinOpen(
-                btn.textContent == 'Get Support' ? `${modals.imports.app.urls.gitHub}/issues`
-              : btn.textContent == 'Rate Us' ? `${modals.imports.app.urls.gitHub}/discussions`
-              : modals.imports.app.urls.relatedExtensions
-            )
-
-            // Prepend emoji
-            if (/support/i.test(btn.textContent))
-                btn.textContent = '🧠 ' + btn.textContent
-            else if (/rate/i.test(btn.textContent))
-                btn.textContent = '⭐ ' + btn.textContent
-            else if (/extensions/i.test(btn.textContent))
-                btn.textContent = '🧠 ' + btn.textContent
-
-            // Hide Dismiss button
-            else btn.style.display = 'none'
-        })
-
-        return aboutModal
-    },
-
-    safeWinOpen(url) { open(url, '_blank', 'noopener') } // to prevent backdoor vulnerabilities
+    }
 };

package/starters/chrome/extension/content.js

@@ -15,8 +15,8 @@
     const { app } = await chrome.storage.sync.get('app')
 
     // Export DEPENDENCIES to imported resources
-    dom.imports.import({ env }) // for env.ui.scheme
-    modals.imports.import({ app, env }) // for app data + env.ui.scheme
+    dom.import({ env }) // for env.ui.scheme
+    modals.import({ app, env }) // for app data + env.<browser|ui> flags
 
     // Add CHROME MSG listener
     chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html

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

@@ -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
@@ -165,19 +167,22 @@ const chatgpt = {
                     + `background-color: ${ scheme == 'dark' ? 'black' : 'white' };`
                     + 'transform: translateX(-3px) translateY(7px) ;' // offset to move-in from
                     + 'max-width: 75vw ; word-wrap: break-word ; border-radius: 15px ;'
-                    + 'padding: 20px ; margin: 12px 23px ; box-shadow: 0 30px 60px rgba(0,0,0,0.12) ;'
+                    + '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) }}'
+                + `.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 ;'
@@ -190,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 }'
@@ -200,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
@@ -277,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);
@@ -942,7 +950,12 @@ const chatgpt = {
     getLastResponse() { return chatgpt.getChatData('active', 'msg', 'chatgpt', 'latest'); },
 
     getNewChatButton() {
-        return document.querySelector('button[data-testid*=new-chat-button], button:has([d^="M15.6729"])'); },
+        return document.querySelector(
+            'button[data-testid*=new-chat-button],' // sidebar button (when logged in)
+          + 'button:has([d^="M3.06957"]),' // Cycle Arrows icon (Temp chat mode)
+          + 'button:has([d^="M15.6729"])' // Pencil icon (recorded chat mode)
+        )
+    },
 
     getNewChatLink() { return document.querySelector('nav a[href="/"]'); },
     getRegenerateButton() { return document.querySelector('button:has([d^="M3.06957"])'); },
@@ -978,14 +991,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 )
         }
     },
 
@@ -1146,14 +1159,14 @@ 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'); },
@@ -1309,13 +1322,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
                     + 'user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -o-user-select: none ;'
                         + '-ms-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 ;'
+                    + `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) }'
@@ -1853,15 +1871,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])
         }
     },
 
@@ -1879,7 +1897,7 @@ const chatgpt = {
         return chatgpt.getChatData('active', 'msg', 'chatgpt', 'latest');
     },
 
-    speak(msg, { voice = 2, pitch = 2, speed = 1.1, onend } = {} ) { // eslint-disable-line no-unused-vars
+    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
@@ -1900,8 +1918,8 @@ const chatgpt = {
         }
 
         try { // to speak msg
-            const utterance = new SpeechSynthesisUtterance()
-            Object.assign(utterance, { text: msg, ...arguments[1], voice: speechSynthesis.getVoices()[voice] })
+            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) }
     },

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

@@ -1,12 +1,11 @@
-window.dom = {
+// 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
 
-    imports: {
-        import(deps) { // { config, env }
-            for (const depName in deps) this[depName] = deps[depName] }
-    },
+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|darkScheme>.min.css
+    // * Requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<lightScheme>.min.css
 
         if (targetNode.querySelector('[id*=particles]')) return
         const particlesDivsWrapper = document.createElement('div')
@@ -40,13 +39,14 @@ window.dom = {
             return elem
         },
 
-        style(content) {
+        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) {
+        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
@@ -60,17 +60,39 @@ window.dom = {
     },
 
     get: {
-        computedWidth(...elems) { // including margins
-            let totalWidth = 0
-            elems.map(arg => arg instanceof NodeList ? [...arg] : arg).flat().forEach(elem => {
-                if (!(elem instanceof Element)) return
+
+        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
-                totalWidth += elem.getBoundingClientRect().width + parseFloat(elemStyle.marginLeft)
-                                                                 + parseFloat(elemStyle.marginRight)
+                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 totalWidth
+
+            // 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 => {

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": "2025.2.1",
+  "version": "2025.2.11",
   "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
 

package/starters/greasemonkey/chatgpt.js-greasemonkey-starter.user.js

@@ -3,12 +3,12 @@
 // @description   A Greasemonkey template to start using chatgpt.js like a boss
 // @author        chatgpt.js
 // @namespace     https://chatgpt.js.org
-// @version       2025.2.1
+// @version       2025.2.11
 // @license       MIT
 // @icon          https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@1fc50da/starters/greasemonkey/assets/images/icons/robot/icon48.png
 // @icon64        https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@1fc50da/starters/greasemonkey/assets/images/icons/robot/icon64.png
 // @match         *://chatgpt.com/*
-// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.6.0/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.6.2/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes