@kudoai/chatgpt.js 3.7.1 → 3.8.1

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

@@ -1,28 +1,28 @@
-// Requires lib/chatgpt.js + lib/dom.js + app + env
+// Requires lib/<chatgpt|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` },
+    get class() { return `${app.cssPrefix}-modal` },
 
     about() {
+        const { ui: { scheme }, browser: { isPortrait }} = env
 
         // Show modal
         const labelStyles = 'text-transform: uppercase ; font-size: 17px ; font-weight: bold ;'
-                          + `color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : '#494141' }`
+                          + `color: ${ scheme == 'dark' ? 'white' : '#494141' }`
         const aboutModal = this.alert(
-            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            `${app.symbol} ${chrome.runtime.getManifest().name}`, // title
             `<span style="${labelStyles}">🧠 Author:</span> `
-            + `<a href="${this.imports.app.author.url}">${this.imports.app.author.name}</a> `
-                    + `& <a href="${this.imports.app.urls.contributors}">contributors</a>\n`
+            + `<a href="${app.author.url}">${app.author.name}</a> `
+                    + `& <a href="${app.urls.contributors}">contributors</a>\n`
             + `<span style="${labelStyles}">🏷️ Version:</span> `
-                    + `<span class="about-em">${this.imports.app.version}</span>\n`
+                    + `<span class="about-em">${app.version}</span>\n`
             + `<span style="${labelStyles}">📜 Open source code:</span> `
-                + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
-                    + this.imports.app.urls.gitHub + '</a>\n'
+                + `<a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
+                    + app.urls.gitHub + '</a>\n'
             + `<span style="${labelStyles}">⚡ Powered by:</span> `
-                + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
+                + `<a href="${app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
             [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
             '', 656 // modal width
         )
@@ -32,7 +32,7 @@ window.modals = {
             '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' }` )
+          + `margin: ${ isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
 
         // Hack buttons
         aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
@@ -40,12 +40,11 @@ window.modals = {
             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.replaceWith(btn = btn.cloneNode(true))
             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
+                btn.textContent == 'Get Support' ? `${app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${app.urls.gitHub}/discussions`
+              : app.urls.relatedExtensions
             )
 
             // Prepend emoji
@@ -73,7 +72,7 @@ window.modals = {
     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`)
+        modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`)
         dom.addRisingParticles(modal)
     },
 
@@ -104,34 +103,28 @@ window.modals = {
     safeWinOpen(url) { open(url, '_blank', 'noopener') }, // to prevent backdoor vulnerabilities
 
     stylize() {
-        if (!this.styles) {
-            this.styles = dom.create.elem('style') ; this.styles.id = `${this.class}-styles`
-            document.head.append(this.styles)
-        }
-        this.styles.innerText = (
-            `.no-user-select {
-                user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none }`
-          + `.${this.class} {` // modals
+        const { ui: { scheme }, browser: { isMobile }} = env
+        if (!this.styles) document.head.append(this.styles = dom.create.elem('style'))
+        this.styles.textContent = (
+            `.${this.class} {` // modals
+              + 'user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ;'
               + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'
                   + 'Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif ;'
               + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
-              + `color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `color: ${ scheme == 'dark' ? 'white' : 'black' } !important ;`
               + `background-image: linear-gradient(180deg, ${
-                     this.imports.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
-                                                            : '#b6ebff -296px, white 171px' }) }`
+                     scheme == 'dark' ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) }`
           + `.${this.class} [class*=modal-close-btn] {`
               + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
               + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
           + `.${this.class} [class*=modal-close-btn] svg { height: 10px }`
           + `.${this.class} [class*=modal-close-btn] path {`
-              + `${ this.imports.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
-                                                           : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
-          + ( this.imports.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
+              + `${ scheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+          + ( scheme == 'dark' ?  // invert dark mode hover paths
                 `.${this.class} [class*=modal-close-btn]:hover path { stroke: black ; fill: black }` : '' )
           + `.${this.class} [class*=modal-close-btn]:hover { background-color: #f2f2f2 }` // hover underlay
           + `.${this.class} [class*=modal-close-btn] svg { margin: 11.5px }` // center SVG for hover underlay
-          + `.${this.class} a {`
-              + `color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
+          + `.${this.class} a { color: #${ scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
           + `.${this.class} h2 { font-weight: bold }`
           + `.${this.class} button {`
               + '--btn-transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;'
@@ -141,14 +134,13 @@ window.modals = {
                   + '-webkit-transition: var(--btn-transition) ; -moz-transition: var(--btn-transition) ;'
                   + '-o-transition: var(--btn-transition) ; -ms-transition: var(--btn-transition) ;'
               + 'cursor: pointer !important ;' // add finger cursor
-              + `border: 1px solid ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' } !important ;`
               + 'padding: 8px !important ; min-width: 102px }' // resize
           + `.${this.class} button:hover {` // add zoom, re-scheme
               + 'transform: scale(1.055) ; color: black !important ;'
-              + `background-color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
-          + ( !this.imports.env.browser.isMobile ?
-                `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
-          + `.about-em { color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
+              + `background-color: #${ scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+          + ( !isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+          + `.about-em { color: ${ scheme == 'dark' ? 'white' : 'green' } !important }`
         )
     }
 };

package/starters/chrome/extension/content.js

@@ -4,29 +4,23 @@
 (async () => {
 
     // Import JS resources
-    for (const resource of ['components/modals.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js'])
+    for (const resource of ['components/modals.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'lib/ui.js'])
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: getScheme() }}
+    window.env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: ui.getScheme() }}
     env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
 
     // Import APP data
-    const { app } = await chrome.storage.local.get('app')
-
-    // Export DEPENDENCIES to imported resources
-    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
-        if (req.action == 'notify')
-            notify(...['msg', 'pos', 'notifDuration', 'shadow'].map(arg => req.options[arg]))
-        else if (req.action == 'alert')
-            modals.alert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => req.options[arg]))
-        else if (req.action == 'showAbout') {
-            config.skipAlert = true ; chatgpt.isLoaded().then(() => modals.open('about'))
-        } else if (req.action == 'syncConfigToUI') syncConfigToUI(req.options)
+    ;({ app: window.app } = await chrome.storage.local.get('app'))
+
+    chrome.runtime.onMessage.addListener(({ action, options }) => { // from service-worker.js + popup/index.html
+        ({
+            notify: () => notify(...['msg', 'pos', 'notifDuration', 'shadow'].map(arg => options[arg])),
+            alert: () => modals.alert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => options[arg])),
+            showAbout: () => { config.skipAlert = true ; chatgpt.isLoaded().then(() => modals.open('about')) },
+            syncConfigToUI: () => syncConfigToUI(options)
+        }[action]?.() || console.warn(`Received unsupported action: "${action}"`))
     })
 
     // Init SETTINGS
@@ -76,23 +70,19 @@
         }
     }
 
-    function getScheme() {
-        return document.documentElement.className
-            || (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
-    }
-
     // Run MAIN routine
 
     chatgpt.printAllFunctions() // to console
 
     // CHILL a bit if your hacks depend on delayed DOM content
     await chatgpt.isLoaded()
-    await new Promise(resolve => setTimeout(resolve, 500)); // sleep .5s
+    await new Promise(resolve => setTimeout(resolve, 500)) // sleep .5s
 
     // Add RISING PARTICLES styles for modals
-    ['gray', 'white'].forEach(color => document.head.append(
+    ;['gray', 'white'].forEach(color => document.head.append(
         dom.create.elem('link', { rel: 'stylesheet',
-            href: `https://assets.aiwebextensions.com/styles/rising-particles/dist/${color}.min.css?v=727feff`
+            href: `https://cdn.jsdelivr.net/gh/adamlui/ai-web-extensions@727feff/assets/styles/rising-particles/dist/${
+                color}.min.css`
     })))
 
     if (config.extensionDisabled) return
@@ -112,7 +102,7 @@
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
         'change', () => requestAnimationFrame(handleSchemePrefChange))
     function handleSchemePrefChange() {
-        const displayedScheme = getScheme()
+        const displayedScheme = ui.getScheme()
         if (env.ui.scheme != displayedScheme) { env.ui.scheme = displayedScheme ;  modals.stylize() }
     }
 

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

@@ -24,26 +24,34 @@ const chatgpt = {
 
     selectors: {
         btns: {
-            continue: 'button:has([class*=rotate] [d^="M4.47189"])', login: '[data-testid*=login]',
-            newChat: '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)
-            regen: 'button[data-testid*="regenerate"],' // oval button in place of chatbar on errors
-                 + 'div[role=menuitem]:has([d^="M3.06957"])', // 'Try Again' entry of model selector below msg
-            scroll: 'button:has([d^="M12 21C11.7348"])',
-            send: '[data-testid=send-button]', sidebar: 'button[data-testid*=sidebar-button]',
-            stop: 'button[data-testid=stop-button]', voice: 'button[data-testid*=composer-speech-button]'
+            continue: 'button:has(svg[class*=rotate] > path[d^="M4.47189"])',
+            createImage: 'button[data-testid="composer-create-image"]',
+            deepResearch: 'button[data-testid="composer-deep-research"]',
+            login: 'button[data-testid*=login]',
+            newChat: 'a[href="/"]:has(svg),' // Pencil button (when logged in)
+                   + 'button:has([d^="M3.06957"])', // Cycle Arrows button (in temp chat logged out)
+            regen: 'button[data-testid*=regenerate],' // oval button in place of chatbar on errors
+                    // 'Try Again' entry of model selector below msg
+                 + 'div[role=menuitem] div:has(svg):has(path[d^="M3.06957"])',
+            scroll: 'button:has(> svg > path[d^="M12 21C11.7348"])',
+            search: 'button[data-testid="composer-button-search"]',
+            reason: 'button[data-testid="composer-button-reason"]',
+            send: 'button[data-testid=send-button]',
+            sidebar: 'button[data-testid*=sidebar-button]',
+            stop: 'button[data-testid=stop-button]',
+            upload: 'button:has(> svg > path[d^="M12 3C12.5523"])',
+            voice: 'button[data-testid*=composer-speech-button]'
         },
         chatDivs: {
-            convo: 'main > div > div > div > div > div > div[class*=group]',
-            msg: 'div[data-message-author-role]', reply: 'div[data-message-author-role=assistant]'
+            convo: 'div[class*=thread]', msg: 'div[data-message-author-role]',
+            reply: 'div[data-message-author-role=assistant]'
         },
-        chatHistory: 'nav',
-        errors: { txt: '[class*=text-error]' },
-        footer: '.min-h-4',
-        header: 'main .sticky',
+        chatHistory: 'div#history',
+        errors: { toast: 'div.toast-root', txt: 'div[class*=text-error]' },
+        footer: 'div#thread-bottom-container > div:last-of-type > div, span.text-sm.leading-none',
+        header: 'div#page-header, main div.sticky:first-of-type',
         links: { newChat: 'nav a[href="/"]', sidebarItem: 'nav a' },
-        sidebar: 'div[class*=sidebar]',
+        sidebar: 'div.bg-token-sidebar-surface-primary',
         ssgManifest: 'script[src*="_ssgManifest.js"]'
     },
 
@@ -120,14 +128,16 @@ const chatgpt = {
             drag: {
                 mousedown(event) { // find modal, update styles, attach listeners, init XY offsets
                     if (event.button != 0) return // prevent non-left-click drag
-                    if (getComputedStyle(event.target).cursor == 'pointer') return // prevent drag on interactive elems
+                    if (!/auto|default/.test(getComputedStyle(event.target).cursor))
+                        return // prevent drag on interactive elems
                     chatgpt.draggingModal = event.currentTarget
                     event.preventDefault() // prevent sub-elems like icons being draggable
                     Object.assign(chatgpt.draggingModal.style, {
-                        cursor: 'grabbing', transition: '0.1s', willChange: 'transform', transform: 'scale(1.05)' });
-                    [...chatgpt.draggingModal.children] // prevent hover FX if drag lags behind cursor
-                        .forEach(child => child.style.pointerEvents = 'none');
-                    ['mousemove', 'mouseup'].forEach(eventType => // add listeners
+                        transition: '0.1s', willChange: 'transform', transform: 'scale(1.05)' })
+                    document.body.style.cursor = 'grabbing' // update cursor
+                    ;[...chatgpt.draggingModal.children] // prevent hover FX if drag lags behind cursor
+                        .forEach(child => child.style.pointerEvents = 'none')
+                    ;['mousemove', 'mouseup'].forEach(eventType => // add listeners
                         document.addEventListener(eventType, handlers.drag[eventType]))
                     const draggingModalRect = chatgpt.draggingModal.getBoundingClientRect()
                     handlers.drag.offsetX = event.clientX - draggingModalRect.left +21
@@ -143,10 +153,11 @@ const chatgpt = {
 
                 mouseup() { // restore styles/pointer events, remove listeners, reset chatgpt.draggingModal
                     Object.assign(chatgpt.draggingModal.style, { // restore styles
-                        cursor: 'inherit', transition: 'inherit', willChange: 'auto', transform: 'scale(1)' });
-                    [...chatgpt.draggingModal.children] // restore pointer events
-                        .forEach(child => child.style.pointerEvents = '');
-                    ['mousemove', 'mouseup'].forEach(eventType => // remove listeners
+                        cursor: 'inherit', transition: 'inherit', willChange: 'auto', transform: 'scale(1)' })
+                    document.body.style.cursor = '' // restore cursor
+                    ;[...chatgpt.draggingModal.children] // restore pointer events
+                        .forEach(child => child.style.pointerEvents = '')
+                    ;['mousemove', 'mouseup'].forEach(eventType => // remove listeners
                         document.removeEventListener(eventType, handlers.drag[eventType]))
                     chatgpt.draggingModal = null
                 }
@@ -170,7 +181,7 @@ const chatgpt = {
                 modalStyle.setAttribute('last-updated', thisUpdated.toString())
                 document.head.append(modalStyle)
             }
-            modalStyle.innerText = ( // update prev/new style contents
+            modalStyle.textContent = ( // update prev/new style contents
                 `.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 */
@@ -222,7 +233,7 @@ const chatgpt = {
                         display: flex ; justify-content: flex-end ; margin: 20px -5px -3px 0 ;
                         ${ isMobile ? 'flex-direction: column-reverse' : '' }}
                   .chatgpt-modal button {
-                      font-size: 14px ; text-transform: uppercase ;
+                      font-size: 14px ; text-transform: uppercase ; cursor: crosshair ;
                       margin-left: ${ isMobile ? 0 : 10 }px ; padding: ${ isMobile ? 15 : 8 }px 18px ;
                       ${ isMobile ? 'margin-top: 5px ; margin-bottom: 3px ;' : '' }
                       border-radius: 0 ; border: 1px solid ${ scheme == 'dark' ? 'white' : 'black' };
@@ -260,7 +271,7 @@ const chatgpt = {
         }
 
         // Insert text into elems
-        modalTitle.innerText = title || '' ; modalMessage.innerText = msg || '' ; chatgpt.renderHTML(modalMessage)
+        modalTitle.textContent = title || '' ; modalMessage.innerText = msg || '' ; chatgpt.renderHTML(modalMessage)
 
         // Create/append buttons (if provided) to buttons div
         const modalButtons = document.createElement('div')
@@ -297,7 +308,7 @@ const chatgpt = {
             // Create/show label
             const checkboxLabel = document.createElement('label')
             checkboxLabel.onclick = () => { checkboxInput.checked = !checkboxInput.checked ; checkboxFn() }
-            checkboxLabel.textContent = checkboxFn.name.charAt(0).toUpperCase() // capitalize first char
+            checkboxLabel.textContent = checkboxFn.name[0].toUpperCase() // capitalize first char
                 + checkboxFn.name.slice(1) // format remaining chars
                     .replace(/([A-Z])/g, (match, letter) => ' ' + letter.toLowerCase()) // insert spaces, convert to lowercase
                     .replace(/\b(\w+)nt\b/gi, '$1n\'t') // insert apostrophe in 'nt' suffixes
@@ -646,7 +657,7 @@ const chatgpt = {
                 const msgs = [] ; let isUserMsg = true
                 chatDivs.forEach(div => {
                     const sender = isUserMsg ? 'USER' : 'CHATGPT'; isUserMsg = !isUserMsg
-                    const msg = Array.from(div.childNodes).map(node => node.innerText)
+                    const msg = [...div.childNodes].map(node => node.innerText)
                               .join('\n\n') // insert double line breaks between paragraphs
                               .replace('Copy code', '')
                     msgs.push(`${sender}: ${msg}`)
@@ -1148,7 +1159,7 @@ const chatgpt = {
         }
     },
 
-    isDarkMode() { return document.documentElement.className.includes('dark') },
+    isDarkMode() { return document.documentElement.classList.contains('dark') },
     isFullScreen() { return chatgpt.browser.isFullScreen() },
 
     async isIdle(timeout = null) {
@@ -1189,7 +1200,7 @@ const chatgpt = {
         return await ( timeoutPromise ? Promise.race([isLoadedPromise, timeoutPromise]) : isLoadedPromise )
     },
 
-    isLightMode() { return document.documentElement.classList.toString().includes('light') },
+    isLightMode() { return document.documentElement.classList.contains('light') },
     isTempChat() { return location.search == '?temporary-chat=true' },
     isTyping() { return !!this.getStopButton() },
     login() { window.location.href = 'https://chat.openai.com/auth/login' },
@@ -1289,7 +1300,7 @@ const chatgpt = {
         const notificationDiv = document.createElement('div') // make div
         notificationDiv.id = Math.floor(chatgpt.randomFloat() * 1000000) + Date.now()
         notificationDiv.classList.add('chatgpt-notif')
-        notificationDiv.innerText = msg // insert msg
+        notificationDiv.textContent = msg // insert msg
         document.body.append(notificationDiv) // insert into DOM
 
         // Create/append close button
@@ -1322,7 +1333,7 @@ const chatgpt = {
                 notifStyle.setAttribute('last-updated', thisUpdated.toString())
                 document.head.append(notifStyle)
             }
-            notifStyle.innerText = ( // update prev/new style contents
+            notifStyle.textContent = ( // 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 ;'
@@ -1358,17 +1369,17 @@ const chatgpt = {
         notificationDiv.style.right = notificationDiv.isRight ? vpXoffset.toString() + 'px' : ''
         notificationDiv.style.left = !notificationDiv.isRight ? vpXoffset.toString() + 'px' : ''
 
-        // Reposition old notifications
+        // Re-position old notifications
         const thisQuadrantQueue = notifyProps.queue[notificationDiv.quadrant]
         if (thisQuadrantQueue.length > 1) {
             try { // to move old notifications
                 for (const divId of thisQuadrantQueue.slice(0, -1)) { // exclude new div
                     const oldDiv = document.getElementById(divId),
                           offsetProp = oldDiv.style.top ? 'top' : 'bottom', // pick property to change
-                          vOffset = +/\d+/.exec(oldDiv.style[offsetProp])[0] + 5 + oldDiv.getBoundingClientRect().height
+                          vOffset = +parseInt(oldDiv.style[offsetProp]) +5 + oldDiv.getBoundingClientRect().height
                     oldDiv.style[offsetProp] = `${ vOffset }px` // change prop
                 }
-            } catch (err) {}
+            } catch (err) { console.warn('Failed to re-position notification:', err) }
         }
 
         // Show notification
@@ -1496,7 +1507,7 @@ const chatgpt = {
             // Process text node
             if (childNode.nodeType == Node.TEXT_NODE) {
                 const text = childNode.nodeValue,
-                      elems = Array.from(text.matchAll(reTags))
+                      elems = [...text.matchAll(reTags)]
 
                 // Process 1st element to render
                 if (elems.length > 0) {
@@ -1505,7 +1516,7 @@ const chatgpt = {
                           tagNode = document.createElement(tagName) ; tagNode.textContent = tagText
 
                     // Extract/set attributes
-                    const attrs = Array.from(tagAttrs.matchAll(reAttrs))
+                    const attrs = [...tagAttrs.matchAll(reAttrs)]
                     attrs.forEach(attr => {
                         const name = attr[1], value = attr[2].replace(/['"]/g, '')
                         tagNode.setAttribute(name, value)
@@ -1541,9 +1552,8 @@ const chatgpt = {
             // responseToGet = index of response to get (defaults to latest if '' unpassed)
             // regenResponseToGet = index of regenerated response to get (defaults to latest if '' unpassed)
 
-                if (window.location.href.startsWith('https://chatgpt.com/c/'))
-                    return this.getFromDOM.apply(null, arguments)
-                else return this.getFromAPI.apply(null, arguments)
+                return this[`getFrom${ location.href.startsWith('https://chatgpt.com/c/') ? 'DOM' : 'API' }`]
+                    .apply(null, arguments)
         },
 
         getFromAPI(chatToGet, responseToGet) {
@@ -1604,7 +1614,7 @@ const chatgpt = {
         const textArea = chatgpt.getChatBox()
         if (!textArea) return console.error('Chatbar element not found!')
         const msgP = document.createElement('p'); msgP.textContent = msg
-        textArea.replaceChild(msgP, textArea.querySelector('p'))
+        textArea.querySelector('p').replaceWith(msgP)
         textArea.dispatchEvent(new Event('input', { bubbles: true })) // enable send button
         setTimeout(function delaySend() {
             const sendBtn = chatgpt.getSendButton()
@@ -1753,8 +1763,7 @@ const chatgpt = {
         activateObserver() {
 
             // Stop the previous observer to preserve resources
-            if (this.observer instanceof MutationObserver)
-                try { this.observer.disconnect() } catch (e) {}
+            if (this.observer instanceof MutationObserver) this.observer.disconnect()
 
             if (!this.elems.length) return console.error('🤖 chatgpt.js >> No elems to append!')
 
@@ -1857,7 +1866,7 @@ const chatgpt = {
         isOn() {
             const sidebar = (() => {
                 return chatgpt.sidebar.exists() ? document.querySelector(chatgpt.selectors.sidebar) : null })()
-            if (!sidebar) { console.error('Sidebar element not found!'); return false }
+            if (!sidebar) { return console.error('Sidebar element not found!') || false }
             else return chatgpt.browser.isMobile() ?
                 document.documentElement.style.overflow == 'hidden'
               : sidebar.style.visibility != 'hidden' && sidebar.style.width != '0px'
@@ -2095,7 +2104,7 @@ const cjsFuncSynonyms = [
 // Define HELPER functions
 
 function toCamelCase(words) {
-    return words.map((word, idx) => idx == 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)).join('') }
+    return words.map((word, idx) => idx == 0 ? word : word[0].toUpperCase() + word.slice(1)).join('') }
 
 // Prefix console logs w/ '🤖 chatgpt.js >> '
 const consolePrefix = '🤖 chatgpt.js >> ', ogError = console.error, ogInfo = console.info

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

@@ -2,7 +2,6 @@
 // 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
@@ -12,11 +11,11 @@ window.dom = {
         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 => {
+          + '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
+            particlesDiv.id = config?.bgAnimationsDisabled ? `particles-${particleSize}-off`
+                : `${( env?.ui?.scheme || env?.ui?.app?.scheme ) == 'dark' ? darkScheme
                     : lightScheme }-particles-${particleSize}`
             particlesDivsWrapper.append(particlesDiv)
         })
@@ -41,8 +40,9 @@ window.dom = {
 
         style(content, attrs = {}) {
             const style = document.createElement('style')
+            style.setAttribute('type', 'text/css') // support older browsers
             for (const attr in attrs) style.setAttribute(attr, attrs[attr])
-            if (content) style.innerText = content
+            if (content) style.textContent = content
             return style
         },
 
@@ -93,17 +93,19 @@ window.dom = {
         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) => {
+        loadedElem(selector, { timeout = null } = {}) {
+            const raceEntries = [
+                new Promise(resolve => { // when elem loads
                     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 )
+                    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 })
+                })
+            ]
+            if (timeout) raceEntries.push(new Promise(resolve => setTimeout(() => resolve(null), timeout)))
+            return Promise.race(raceEntries)
         }
     }
 };

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

@@ -1,29 +1,55 @@
 window.config = {}
 window.settings = {
 
-    // Init SETTINGS props (for popup menu)
     controls: {
         // Add settings options as keys, with each key's value being an object that includes:
-        // - 'type': the control type (e.g. 'toggle' or 'prompt')
+        // - 'type': the control type (e.g. 'toggle', 'link' or 'prompt')
         // - 'label': a descriptive label
         // - 'defaultVal' (optional): default value of setting (true for toggles if unspecified, false otherwise)
+        // - 'category' (optional): string key from this.categories to group control under
         // - '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
+        // - 'helptip' (optional): tooltip to display on hover
+
+        // NOTE: Controls are displayed in top-to-bottom order (within categories and in top-level)
+        // NOTE: Toggles are disabled by default unless defaultVal is true
+        //    ...or key name contains 'disabled' or 'hidden' (case insensitive)
+
         // EXAMPLES:
         // autoScrollDisabled: { type: 'toggle', label: 'Auto-Scroll' },
         // replyLanguage: { type: 'prompt', symbol: '🌐', label: 'Reply Language' }
     },
 
+    categories: {
+        // Add category entries as keys, with each key's value being an object that includes:
+        // - 'label': a descriptive label
+        // - 'symbol' (optional): for icon display (e.g. ⌚)
+        // - 'color' (optional): hex code (w/o #) of color for left-border
+        // - 'helptip' (optional): tooltip to display on hover
+        // - 'autoExpand' (optional): true/false to auto-expand categories on toolbar icon click
+
+        // NOTE: Categories are displayed in top-to-bottom order
+
+        // EXAMPLE:
+        // displaySettings: {
+        //     symbol: '🖥️', color: '94fca2', label: 'Display Settings', helptip: 'Display-related settings' }
+    },
+
+    typeIsEnabled(key) { // for menu labels + notifs to return ON/OFF for type w/o suffix
+        const reInvertFlags = /disabled|hidden/i
+        return reInvertFlags.test(key) // flag in control key name
+            && !reInvertFlags.test(this.controls[key]?.label) // but not in label name
+                ? !config[key] : config[key] // so invert since flag reps opposite type state, else don't
+    },
+
     load(...keys) {
         return Promise.all(keys.flat().map(async key => // resolve promise when all keys load
-            window.config[key] = (await chrome.storage.local.get(key))[key]
+            config[key] = (await chrome.storage.local.get(key))[key]
                 ?? this.controls[key]?.defaultVal ?? this.controls[key]?.type == 'toggle'
         ))
     },
 
     save(key, val) {
         chrome.storage.local.set({ [key]: val }) // save to Chrome extension storage
-        window.config[key] = val // save to memory
+        config[key] = val // save to memory
     }
 };

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

@@ -0,0 +1,6 @@
+window.ui = {
+    getScheme() {
+        return /\b(light|dark)\b/.exec(document.documentElement.className)?.[1]
+            || ( window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' )
+    }
+};