@kudoai/chatgpt.js 3.4.0 → 3.6.0

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()
                 },
 
@@ -99,7 +99,8 @@ const chatgpt = {
                     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]))
+                    ['mousemove', 'mouseup'].forEach(eventType =>
+                        document.addEventListener(eventType, handlers.drag[eventType]))
                     const draggableElemRect = chatgpt.draggableElem.getBoundingClientRect()
                     handlers.drag.offsetX = event.clientX - draggableElemRect.left +21
                     handlers.drag.offsetY = event.clientY - draggableElemRect.top +12
@@ -114,8 +115,8 @@ const chatgpt = {
 
                 mouseup() { // remove listeners, reset chatgpt.draggableElem
                     chatgpt.draggableElem.style.cursor = 'inherit';
-                    ['mousemove', 'mouseup'].forEach(event =>
-                        document.removeEventListener(event, handlers.drag[event]))
+                    ['mousemove', 'mouseup'].forEach(eventType =>
+                        document.removeEventListener(eventType, handlers.drag[eventType]))
                     chatgpt.draggableElem = null
                 }
             }
@@ -130,7 +131,7 @@ const chatgpt = {
               modalMessage = document.createElement('p');
 
         // Create/append/update modal style (if missing or outdated)
-        const thisUpdated = 1734685032942; // 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
@@ -139,14 +140,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 {'
@@ -156,13 +164,16 @@ 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 ; }'
+                    + '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) ;'
+                    + '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) }'
@@ -193,12 +204,12 @@ const chatgpt = {
                 + '.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) ;'
+                + '.chatgpt-modal input[type=checkbox] { transform: scale(0.7) ;'
                     + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' }}`
-                + '.chatgpt-modal input[type="checkbox"]:checked {'
+                + '.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 input[type=checkbox]:focus { outline: none ; box-shadow: none }'
             );
         }
 
@@ -281,7 +292,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
         }
@@ -294,30 +305,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)
                 }
+            }
+        }
 
-            }, 135);
-        };
-
-        return modalContainer.id; // if assignment used
+        return modalContainer.id // if assignment used
     },
 
     async askAndGetReply(query) {
@@ -455,7 +465,7 @@ const chatgpt = {
         async isIdle(timeout = null) {
             const obsConfig = { childList: true, subtree: true },
                   selectors = { msgDiv: 'div[data-message-author-role]',
-                                replyDiv: 'div[data-message-author-role="assistant"]' };
+                                replyDiv: 'div[data-message-author-role=assistant]' };
 
             // Create promises
             const timeoutPromise = timeout ? new Promise(resolve => setTimeout(() => resolve(false), timeout)) : null;
@@ -590,7 +600,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;
@@ -620,7 +630,7 @@ const chatgpt = {
             filename = `${ parsedHtml.querySelector('title').textContent || 'ChatGPT conversation' }.html`;
 
             // Convert relative CSS paths to absolute ones
-            const cssLinks = parsedHtml.querySelectorAll('link[rel="stylesheet"]');
+            const cssLinks = parsedHtml.querySelectorAll('link[rel=stylesheet]');
             cssLinks.forEach(link => {
                 const href = link.getAttribute('href');
                 if (href?.startsWith('/')) link.setAttribute('href', 'https://chat.openai.com' + href);
@@ -932,7 +942,7 @@ 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], button:has([d^="M15.6729"])'); },
 
     getNewChatLink() { return document.querySelector('nav a[href="/"]'); },
     getRegenerateButton() { return document.querySelector('button:has([d^="M3.06957"])'); },
@@ -949,8 +959,8 @@ const chatgpt = {
     getResponseFromAPI(chatToGet, responseToGet) { return chatgpt.response.getFromAPI(chatToGet, responseToGet); },
     getResponseFromDOM(pos) { return chatgpt.response.getFromDOM(pos); },
     getScrollToBottomButton() { return document.querySelector('button:has([d^="M12 21C11.7348"])'); },
-    getSendButton() { return document.querySelector('[data-testid="send-button"]'); },
-    getStopButton() { return document.querySelector('button[data-testid="stop-button"]'); },
+    getSendButton() { return document.querySelector('[data-testid=send-button]'); },
+    getStopButton() { return document.querySelector('button[data-testid=stop-button]'); },
 
     getUserLanguage() {
         return navigator.languages[0] || navigator.language || navigator.browserLanguage ||
@@ -1104,7 +1114,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) {
@@ -1147,6 +1157,7 @@ const chatgpt = {
     },
 
     isLightMode() { return document.documentElement.classList.toString().includes('light'); },
+    isTyping() { return !!this.getStopButton() },
 
     logout() { window.location.href = 'https://chat.openai.com/auth/logout'; },
 
@@ -1211,7 +1222,7 @@ const chatgpt = {
             }
 
             const addElementsToMenu = () => {
-                const optionButtons = document.querySelectorAll('a[role="menuitem"]');
+                const optionButtons = document.querySelectorAll('a[role=menuitem]');
                 let cssClasses;
 
                 for (const navLink of optionButtons)
@@ -1230,7 +1241,7 @@ const chatgpt = {
             };
 
             this.elements.push(newElement);
-            const menuBtn = document.querySelector('nav button[id*="headless"]');
+            const menuBtn = document.querySelector('nav button[id*=headless]');
             if (!this.addedEvent) { // to prevent adding more than one event
                 menuBtn?.addEventListener('click', () => { setTimeout(addElementsToMenu, 25); });
                 this.addedEvent = true; }
@@ -1239,12 +1250,12 @@ const chatgpt = {
         },
 
         close() {
-            try { document.querySelector('nav [id*="menu-button"][aria-expanded="true"]').click(); }
+            try { document.querySelector('nav [id*=menu-button][aria-expanded=true]').click(); }
             catch (err) { console.error(err.message); }
         },
 
         open() {
-            try { document.querySelector('nav [id*="menu-button"][aria-expanded="false"]').click(); }
+            try { document.querySelector('nav [id*=menu-button][aria-expanded=false]').click(); }
             catch (err) { console.error(err.message); }
         }
     },
@@ -1285,7 +1296,7 @@ const chatgpt = {
                                  + (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 = 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
@@ -1295,10 +1306,13 @@ const chatgpt = {
             }
             notifStyle.innerText = ( // update prev/new style contents
                 '.chatgpt-notif {'
+                    + '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
                     + '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 ;'
+                    + '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 ;'
@@ -1518,7 +1532,7 @@ const chatgpt = {
         },
 
         getFromDOM(pos) {
-            const responseDivs = document.querySelectorAll('div[data-message-author-role="assistant"]'),
+            const responseDivs = document.querySelectorAll('div[data-message-author-role=assistant]'),
                   strPos = pos.toString().toLowerCase();
             let response = '';
             if (!responseDivs.length) return console.error('No conversation found!');
@@ -1810,7 +1824,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();
@@ -1825,7 +1839,7 @@ const chatgpt = {
         isOff() { return !this.isOn(); },
         isOn() {
             const sidebar = (() => {
-                return chatgpt.sidebar.exists() ? document.querySelector('[class*="sidebar"]') : null; })();
+                return chatgpt.sidebar.exists() ? document.querySelector('[class*=sidebar]') : null; })();
             if (!sidebar) { console.error('Sidebar element not found!'); return false; }
             else return chatgpt.browser.isMobile() ?
                 document.documentElement.style.overflow == 'hidden'
@@ -1833,7 +1847,7 @@ const chatgpt = {
         },
 
         toggle() {
-            const sidebarToggle = document.querySelector('button[data-testid*="sidebar-button"]');
+            const sidebarToggle = document.querySelector('button[data-testid*=sidebar-button]');
             if (!sidebarToggle) console.error('Sidebar toggle not found!');
             sidebarToggle.click();
         },
@@ -1865,31 +1879,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 } = {} ) { // eslint-disable-line no-unused-vars
+    // 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()
+            Object.assign(utterance, { text: msg, ...arguments[1], voice: speechSynthesis.getVoices()[voice] })
+            speechSynthesis.speak(utterance)
+        } catch (err) { console.error(err) }
     },
 
     async summarize(text) {
@@ -1943,8 +1957,8 @@ const cjsBtnActions = ['click', 'get'], cjsTargetTypes = [ 'button', 'link', 'di
 for (const btnAction of cjsBtnActions) {
     chatgpt[btnAction + 'Button'] = function handleButton(buttonIdentifier) {
         const button = /^[.#]/.test(buttonIdentifier) ? document.querySelector(buttonIdentifier)
-            : /send/i.test(buttonIdentifier) ? document.querySelector('form button[class*="bottom"]')
-            : /scroll/i.test(buttonIdentifier) ? document.querySelector('button[class*="cursor"]')
+            : /send/i.test(buttonIdentifier) ? document.querySelector('form button[class*=bottom]')
+            : /scroll/i.test(buttonIdentifier) ? document.querySelector('button[class*=cursor]')
             : (function() { // get via text content
                 for (const button of document.querySelectorAll('button')) { // try buttons
                     if (button.textContent.toLowerCase().includes(buttonIdentifier.toLowerCase())) {
@@ -2019,8 +2033,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,11 +1,51 @@
 window.dom = {
+
+    imports: {
+        import(deps) { // { config, env }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    addRisingParticles(targetNode, { lightScheme = 'gray', darkScheme = 'white' } = {}) {
+    // Requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<lightScheme|darkScheme>.min.css
+
+        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
         },
 
+        style(content) {
+            const style = document.createElement('style')
+            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])
@@ -13,16 +53,35 @@ window.dom = {
         }
     },
 
-    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)
+    cssSelectorize(classList) {
+        return classList.toString()
+            .replace(/([:[\]\\])/g, '\\$1') // escape special chars :[]\
+            .replace(/^| /g, '.') // prefix w/ dot, convert spaces to dots
+    },
+
+    get: {
+        computedWidth(...elems) { // including margins
+            let totalWidth = 0
+            elems.map(arg => arg instanceof NodeList ? [...arg] : arg).flat().forEach(elem => {
+                if (!(elem instanceof Element)) return
+                const elemStyle = getComputedStyle(elem) ; if (elemStyle.display == 'none') return
+                totalWidth += elem.getBoundingClientRect().width + parseFloat(elemStyle.marginLeft)
+                                                                 + parseFloat(elemStyle.marginRight)
+            })
+            return totalWidth
+        },
+
+        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,17 +15,15 @@ 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
         window.config[key] = val // save to memory
     }
-}
+};

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.20",
+  "version": "2025.2.1",
   "author": "KudoAI",
   "homepage_url": "https://github.com/KudoAI/chatgpt.js-chrome-starter",
   "icons": {
@@ -18,10 +18,7 @@
     "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" ]
-  }],
+  "content_scripts": [{ "matches": [ "https://chatgpt.com/*" ], "js": [ "content.js" ] }],
   "background": { "service_worker": "service-worker.js" },
   "minimum_chrome_version": "88"
 }