@kudoai/chatgpt.js 3.8.0 → 3.8.2

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

@@ -1,55 +1,132 @@
 (async () => {
 
+    // Init SCHEME
+    if (window.matchMedia?.('(prefers-color-scheme: dark)').matches)
+        document.documentElement.classList.add('dark')
+
     // Import JS resources
     for (const resource of ['components/icons.js', 'lib/dom.js', 'lib/settings.js'])
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = {
+    window.env = {
         site: new URL((await chrome.tabs.query({ active: true, currentWindow: true }))[0].url)
-            .hostname.split('.').slice(-2, -1)[0] // extract 2nd-level domain
+            .hostname.split('.').slice(-2, -1)[0], // extract 2nd-level domain
+        menu: { isDark: document.documentElement.classList.contains('dark') }
     }
 
     // Import DATA
-    const { app } = await chrome.storage.local.get('app')
-    icons.import({ app }) // for src's using app.urls.assetHost
+    ;({ app: window.app } = await chrome.storage.local.get('app'))
 
     // Define FUNCTIONS
 
     function createMenuEntry(entryData) {
+
+        // Assemble elems
         const entry = {
             div: dom.create.elem('div', {
                 id: entryData.key, class: 'menu-entry highlight-on-hover', title: entryData.helptip || '' }),
-            leftElem: dom.create.elem('div', { class: `menu-icon ${ entryData.type || '' }` }),
+            leftElem: dom.create.elem('div', { class: `menu-icon ${ entryData.type || '' }`}),
             label: dom.create.elem('span')
         }
         entry.label.textContent = entryData.label
+        entry.div.append(entry.leftElem, entry.label)
         if (entryData.type == 'toggle') { // add track to left, init knob pos
             entry.leftElem.append(dom.create.elem('span', { class: 'track' }))
             entry.leftElem.classList.toggle('on', settings.typeIsEnabled(entryData.key))
         } else { // add symbol to left, append status to right
-            entry.leftElem.innerText = entryData.symbol || '⚙️'
+            entry.leftElem.textContent = entryData.symbol || '⚙️' ; entry.label.style.flexGrow = 1
             if (entryData.status) entry.label.textContent += ` — ${entryData.status}`
+            if (entryData.type == 'link') {
+                entry.label.after(entry.rightElem = dom.create.elem('div', { class: 'menu-right-elem' }))
+                entry.rightElem.append(icons.create({ key: 'open', size: 17, fill: 'black' }))
+            }
+        }
+        if (entryData.type == 'category')
+            entry.div.append(icons.create({ key: 'caretDown', size: 11, class: 'menu-caret menu-right-elem' }))
+        else if (entryData.type == 'slider') { // append slider, add listeners, remove .highlight-on-hover
+            entry.slider = dom.create.elem('input', { class: 'slider', type: 'range',
+                min: entryData.min || 0, max: entryData.max || 100, value: config[entryData.key] })
+            if (entryData.step || env.browser.isFF) // use val from entryData or default to 2% in FF for being laggy
+                entry.slider.step = entryData.step || ( 0.02 * entry.slider.max - entry.slider.min )
+            entry.label.textContent += `: ${entry.slider.value}${ entryData.labelSuffix || '' }`
+            entry.slider.style.setProperty('--track-fill-percent', `${ entry.slider.value / entry.slider.max *100 }%`)
+            entry.slider.oninput = ({ target: { value }}) => { // update label/color
+                settings.save(entryData.key, parseInt(value)) ; sync.configToUI({ updatedKey: entryData.key })
+                entry.label.textContent = `${entryData.label}: ${value}${ entryData.labelSuffix || '' }`
+                entry.slider.style.setProperty('--track-fill-percent', `${ value / entry.slider.max *100 }%`)
+            }
+            entry.div.onwheel = event => { // move slider by 2 steps
+                entry.slider.value = parseInt(entry.slider.value) -Math.sign(event.deltaY) *2
+                entry.slider.dispatchEvent(new Event('input'))
+            }
+            entry.div.append(entry.slider) ; entry.div.classList.remove('highlight-on-hover')
         }
-        if (entryData.type == 'category') entry.div.append(icons.create('caretDown', { size: 11, class: 'menu-caret' }))
+        if (entryData.dependencies) {
+            const toDisable = Object.values(entryData.dependencies).flat().some(dep => !settings.typeIsEnabled(dep))
+            Object.assign(entry.div.style, {
+                transition: '', minHeight: 'auto', opacity: +!toDisable,
+                height: toDisable ? 0 : 'auto', visibility: toDisable ? 'hidden' : 'visible'
+            })
+        }
+
+        // Add click listener
         entry.div.onclick = () => {
-            if (entryData.type == 'category') toggleCategorySettingsVisiblity(entryData.key)
-            else if (entryData.type == 'toggle') {
-                entry.leftElem.classList.toggle('on')
-                settings.save(entryData.key, !config[entryData.key]) ; sync.configToUI({ updatedKey: entryData.key })
-                notify(`${entryData.label} ${chrome.i18n.getMessage(`state_${
-                    settings.typeIsEnabled(entryData.key) ? 'on' : 'off' }`).toUpperCase()}`)
+            const now = Date.now()
+            const throttleMs = typeof entryData.throttle == 'number' ? entryData.throttle
+                             : entryData.throttle ? 1500 : 0
+            if (throttleMs && now -( entry.div.lastClickTime || 0 ) < throttleMs) return
+            entry.div.classList.remove('disabled') ; entry.div.lastClickTime = now
+            ;({
+                category: () => toggleCategorySettingsVisiblity({ key: entryData.key }),
+                toggle: () => {
+                    entry.leftElem.classList.toggle('on')
+                    settings.save(entryData.key, !config[entryData.key])
+                    sync.configToUI({ updatedKey: entryData.key })
+                    requestAnimationFrame(() => notify(`${entryData.label} ${chrome.i18n.getMessage(`state_${
+                        settings.typeIsEnabled(entryData.key) ? 'on' : 'off' }`).toUpperCase()}`))
+                },
+                link: () => { open(entryData.url) ; close() }
+            })[entryData.type]()
+
+            // Throttle re-click
+            if (entryData.throttle) {
+                entry.div.classList.add('disabled')
+                setTimeout(() => entry.div.classList.remove('disabled'), throttleMs)
             }
+
+            // Enable/disable dependent entries
+            for (const [ctrlKey, ctrlData] of Object.entries({ ...settings.categories, ...settings.controls }))
+                if (Object.values(ctrlData.dependencies || {}).flat().includes(entryData.key)) {
+                    const depDiv = document.querySelector(`div#${ctrlKey}`) ; if (!depDiv) continue
+                    const ctgChildrenDiv = depDiv.closest('.categorized-entries'),
+                          ctgChildren = ctgChildrenDiv.querySelectorAll('.menu-entry'),
+                          toDisable = !settings.typeIsEnabled(entryData.key)
+                    requestAnimationFrame(() => Object.assign(depDiv.closest('.categorized-entries').style, {
+                        height: `${dom.get.computedHeight(ctgChildren)}px`,
+                        transition: env.browser.isFF || toDisable ? '' : 'height 0.25s'
+                    }))
+                    Object.assign(depDiv.style, {
+                        transition: toDisable ? '' : 'opacity 0.15s ease-in', height: toDisable ? 0 : 'auto',
+                        visibility: toDisable ? 'hidden' : 'visible', opacity: +!toDisable
+                    })
+                    depDiv.classList.toggle('disabled', toDisable)
+                }
         }
-        entry.div.append(entry.leftElem, entry.label)
+
         return entry.div
     }
 
+    function depIsEnabled(ctrlKey) {
+        const deps = settings.controls[ctrlKey]?.dependencies
+        return !deps || Object.values(deps).flat(Infinity).some(depKey => settings.typeIsEnabled(depKey))
+    }
+
     function notify(msg, pos = 'bottom-right') { sendMsgToActiveTab('notify', { msg, pos }) }
 
     async function sendMsgToActiveTab(action, options) {
-        const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
-        return await chrome.tabs.sendMessage(activeTab.id, { action: action, options: { ...options }})
+        const activeTabID = (await chrome.tabs.query({ active: true, currentWindow: true }))[0].id
+        return await chrome.tabs.sendMessage(activeTabID, { action, options })
     }
 
     const sync = {
@@ -62,49 +139,70 @@
             ))})
 
             // Menu elems
-            document.querySelectorAll('.logo, .menu-title, .menu-entry').forEach((elem, idx) => {
-                elem.style.transition = config.extensionDisabled ? '' : 'opacity 0.15s ease-in'
-                setTimeout(() => elem.classList.toggle('disabled', config.extensionDisabled),
-                    config.extensionDisabled ? 0 : idx *10) // fade-out abruptly, fade-in staggered
-            })
+            document.querySelectorAll('.logo, .menu-title, .menu-entry, .slider, .categorized-entries')
+                .forEach((elem, idx) => {
+                    if (elem.id && (elem.matches(`#${elem.id}:has(> div.link)`) || elem.id == 'aboutEntry'))
+                        return // never disable link/About entries
+                    elem.style.transition = config.extensionDisabled ? '' : 'opacity 0.15s ease-in'
+                    const toDisable = config.extensionIsDisabled || !depIsEnabled(elem.id)
+                    if (elem.classList.contains('categorized-entries')) { // fade category strip
+                        elem.style.transition = toDisable ? 'none' : 'var(--border-transition)'
+                        elem.style.borderImage = elem.style.borderImage.replace(
+                            /rgba?\(([\d,\s]+)(?:,\s*[\d.]+)?\)/,
+                            `rgba($1,${ toDisable ? 0.3 : env.menu.isDark ? 0.5 : 1 })`
+                        )
+                    } else // fade entry
+                        setTimeout(() => elem.classList.toggle('disabled', toDisable),
+                            toDisable ? 0 : idx *10) // fade-out abruptly, fade-in staggered
+                })
         },
 
         configToUI(options) { return sendMsgToActiveTab('syncConfigToUI', options) }
     }
 
-    function toggleCategorySettingsVisiblity(category, { transitions = true, action } = {}) {
+    function toggleCategorySettingsVisiblity({ key, transitions = true, action }) {
         const transitionDuration = 350, // ms
-              categoryDiv = document.getElementById(category),
-              caret = categoryDiv.querySelector('.menu-caret'),
-              catChildrenDiv = categoryDiv.nextSibling,
-              catChild = catChildrenDiv.querySelectorAll('.menu-entry')
-        if (action != 'hide' && dom.get.computedHeight(catChildrenDiv) == 0) { // show category settings
-            Object.assign(catChildrenDiv.style, { height: `${dom.get.computedHeight(catChild)}px`,
+              ctgDiv = document.getElementById(key),
+              caret = ctgDiv.querySelector('.menu-caret'),
+              ctgChildrenDiv = ctgDiv.nextSibling,
+              ctgChild = ctgChildrenDiv.querySelectorAll('.menu-entry')
+        if (action != 'hide' && dom.get.computedHeight(ctgChildrenDiv) == 0) { // show category settings
+            ctgDiv.classList.toggle('expanded', true)
+            Object.assign(ctgChildrenDiv.style, { height: `${dom.get.computedHeight(ctgChild)}px`,
                 transition: transitions ? 'height 0.25s' : '' })
             Object.assign(caret.style, { // point it down
                 transform: 'rotate(0deg)', transition: transitions ? 'transform 0.15s ease-out' : '' })
-            catChild.forEach(row => { // reset styles to support continuous transition on rapid show/hide
+            ctgChild.forEach(row => { // reset styles to support continuous transition on rapid show/hide
                 row.style.transition = 'none' ; row.style.opacity = 0 })
-            catChildrenDiv.offsetHeight // force reflow to insta-apply reset
-            catChild.forEach((row, idx) => { // fade-in staggered
+            ctgChildrenDiv.offsetHeight // force reflow to insta-apply reset
+            ctgChild.forEach((row, idx) => { // fade-in staggered
                 if (transitions) row.style.transition = `opacity ${ transitionDuration /1000 }s ease-in-out`
                 setTimeout(() => row.style.opacity = 1, transitions ? idx * transitionDuration /10 : 0)
             })
-            document.querySelectorAll(`.menu-entry:has(.menu-caret):not(#${category})`).forEach(otherCategoryDiv =>
-                toggleCategorySettingsVisiblity(otherCategoryDiv.id, { action: 'hide' }))
+            document.querySelectorAll(`.menu-entry:has(.menu-caret):not(#${key})`).forEach(otherCtgDiv =>
+                toggleCategorySettingsVisiblity({ key: otherCtgDiv.id, action: 'hide' }))
         } else { // hide category settings
-            Object.assign(catChildrenDiv.style, { height: 0, transition: '' })
+            ctgDiv.classList.toggle('expanded', false)
+            Object.assign(ctgChildrenDiv.style, { height: 0, transition: '' })
             Object.assign(caret.style, { transform: 'rotate(-90deg)', transition: '' }) // point it right
         }
     }
 
     // Run MAIN routine
 
+    // Append RISING PARTICLES styles
+    ['gray', 'white'].forEach(color => document.head.append(
+        dom.create.elem('link', { rel: 'stylesheet',
+            href: `https://cdn.jsdelivr.net/gh/adamlui/ai-web-extensions@71695ca/assets/styles/rising-particles/dist/${
+                color}.min.css`
+    })))
+    dom.addRisingParticles(document.body, { lightScheme: env.menu.isDark ? 'white' : 'gray' })
+
     // Init MASTER TOGGLE
     const masterToggle = {
         div: document.querySelector('.master-toggle'),
-        switch: dom.create.elem('div', { class: 'toggle menu-icon highlight-on-hover' }),
-        track: dom.create.elem('span', { class: 'track' })
+        switch: dom.create.elem('div', { class: 'toggle menu-icon highlight-on-hover', style: 'height: 26px' }),
+        track: dom.create.elem('span', { class: 'track', style: 'position: relative ; top: 7.5px' })
     }
     masterToggle.div.append(masterToggle.switch) ; masterToggle.switch.append(masterToggle.track)
     await settings.load('extensionDisabled') ; masterToggle.switch.classList.toggle('on', !config.extensionDisabled)
@@ -124,7 +222,7 @@
         // Group controls by category
         const categorizedCtrls = {}
         Object.entries(settings.controls).forEach(([key, ctrl]) =>
-            ( categorizedCtrls[ctrl.category || 'general'] ??= {} )[key] = { ...ctrl, key: key })
+            ( categorizedCtrls[ctrl.category || 'general'] ??= {} )[key] = { ...ctrl, key })
 
         // Create/append general controls
         Object.values(categorizedCtrls.general || {}).forEach(ctrl => menuEntriesDiv.append(createMenuEntry(ctrl)))
@@ -132,43 +230,77 @@
         // Create/append categorized controls
         Object.entries(categorizedCtrls).forEach(([category, ctrls]) => {
             if (category == 'general') return
-            const catData = { ...settings.categories[category], key: category, type: 'category' },
-                  catChildrenDiv = dom.create.elem('div', { class: 'categorized-entries' })
-            if (catData.color) // color the stripe
-                catChildrenDiv.style.borderImage = `linear-gradient(transparent, #${catData.color}) 30 100%`
-            menuEntriesDiv.append(createMenuEntry(catData), catChildrenDiv)
-            Object.values(ctrls).forEach(ctrl => catChildrenDiv.append(createMenuEntry(ctrl)))
+            const ctgData = { ...settings.categories[category], key: category, type: 'category' },
+                  ctgChildrenDiv = dom.create.elem('div', { class: 'categorized-entries' })
+            if (ctgData.color) { // color the stripe
+                const [r, g, b] = ctgData.color.match(/\w\w/g).map(v => parseInt(v, 16))
+                ctgChildrenDiv.style.borderImage = `linear-gradient(transparent, rgba(${r},${g},${b},${
+                    env.menu.isDark ? 0.5 : 1 })) 30 100% ${ env.menu.isDark ? '/ 100' : '' }`
+            }
+            menuEntriesDiv.append(createMenuEntry(ctgData), ctgChildrenDiv)
+            Object.values(ctrls).forEach(ctrl => ctgChildrenDiv.append(createMenuEntry(ctrl)))
         })
     }
 
-    // AUTO-EXPAND categories
-    document.querySelectorAll('.menu-entry:has(.menu-caret)').forEach(categoryDiv => {
-        if (settings.categories[categoryDiv.id]?.autoExpand)
-            toggleCategorySettingsVisiblity(categoryDiv.id, { transitions: false })
-    })
+    // Create/append ABOUT entry
+    const aboutEntry = {
+        div: createMenuEntry({ key: 'aboutEntry', symbol: '💡', label: 'About...', helptip: `About ${app.name}` }),
+        ticker: {
+            xGap: '&emsp;&emsp;&emsp;',
+            span: dom.create.elem('span', { class: 'ticker' }), innerDiv: dom.create.elem('div')
+        }
+    }
+    aboutEntry.div.querySelector('div.menu-icon').style.paddingLeft = '10px'
+    aboutEntry.div.querySelector('span').style.paddingLeft = '2.5px'
+    aboutEntry.ticker.content = `Version: <span class="ticker-em">v${ app.version + aboutEntry.ticker.xGap }</span>`
+                              + `Powered by <span class="ticker-em">chatgpt.js</span>${aboutEntry.ticker.xGap}`
+    for (let i = 0 ; i < 7 ; i++) aboutEntry.ticker.content += aboutEntry.ticker.content // make long af
+    aboutEntry.ticker.innerDiv.innerHTML = aboutEntry.ticker.content
+    aboutEntry.ticker.span.append(aboutEntry.ticker.innerDiv)
+    aboutEntry.div.append(aboutEntry.ticker.span) ; footer.before(aboutEntry.div)
+    aboutEntry.div.onclick = () => { chrome.runtime.sendMessage({ action: 'showAbout' }) ; close() }
 
-    sync.fade() // based on master toggle
+    // Create/append CHATGPT entry
+    const activeTabURL = (await chrome.tabs.query({ active: true, currentWindow: true }))[0].url,
+          chatgptURL = chrome.runtime.getManifest().content_scripts[0].matches.map(url => url.replace(/\/\*$/, ''))
+    if (!activeTabURL.includes(chatgptURL)) footer.before(createMenuEntry({
+        key: 'chatgptEntry', type: 'link', symbol: '🤖', label: 'Open ChatGPT', url: chatgptURL, helptip: chatgptURL }))
 
-    // Init CHATGPT.JS footer logo/listener
-    const cjsLogo = footer.querySelector('.cjs-logo')
-    cjsLogo.src = 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@745f0ca/assets/images/badges/powered-by-chatgpt.js.png'
-    cjsLogo.onclick = () => { open(app.urls.chatgptJS) ; close() }
+    // Create/append LATEST CHANGES entry
+    const latestChangesURL = `${app.urls.github}/commits`
+    footer.before(createMenuEntry({
+        key: 'latestChangesEntry', type: 'link', symbol: '🚀',
+        label: 'Latest Changes...', url: latestChangesURL, helptip: latestChangesURL
+    }))
 
-    // Init ABOUT footer tooltip/icon/listener
-    const aboutSpan = footer.querySelector('.about-span')
-    aboutSpan.title = `About ${app.name}`
-    aboutSpan.append(icons.create('questionMark', { width: 15, height: 13 }))
-    aboutSpan.onclick = () => { chrome.runtime.sendMessage({ action: 'showAbout' }) ; close() }
+    // Init FOOTER
+    const footerElems = { // left-to-right
+        chatgptjs: { logo: footer.querySelector('.chatgptjs-logo') },
+        about: { span: footer.querySelector('.about-span') },
+        moreExt: { span: footer.querySelector('.more-ext-span') }
+    }
+    footerElems.chatgptjs.logo.src = 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@858b952'
+        + `/assets/images/badges/powered-by-chatgpt.js/${ env.menu.isDark ? 'white' : 'black' }/with-robot/95x19.png`
+    footerElems.chatgptjs.logo.onclick = () => { open(app.urls.chatgptjs) ; close() }
+    footerElems.about.span.title = `About ${app.name}`
+    footerElems.about.span.append(icons.create({ key: 'questionMark', width: 15, height: 13 }))
+    footerElems.about.span.onclick = () => { chrome.runtime.sendMessage({ action: 'showAbout' }) ; close() }
+    footerElems.moreExt.span.title = 'More AI Extensions'
+    footerElems.moreExt.span.append(icons.create({ key: 'plus' }))
+    footerElems.moreExt.span.onclick = () => { open(app.urls.relatedExtensions) ; close() }
 
-    // Init MORE EXTENSIONS footer tooltip/icon/listener
-    const moreExtensionsSpan = footer.querySelector('.more-extensions-span')
-    moreExtensionsSpan.title = 'More AI Extensions'
-    moreExtensionsSpan.append(icons.create('plus'))
-    moreExtensionsSpan.onclick = () => { open(app.urls.relatedExtensions) ; close() }
+    // AUTO-EXPAND categories
+    document.querySelectorAll('.menu-entry:has(.menu-caret)').forEach(ctgDiv => {
+        if (settings.categories[ctgDiv.id]?.autoExpand)
+            toggleCategorySettingsVisiblity({ key: ctgDiv.id, transitions: false })
+    })
 
-    // Remove LOADING SPINNER after imgs load
+    // REMOVE LOADING spinner after imgs load
     Promise.all([...document.querySelectorAll('img')].map(img =>
         img.complete ? Promise.resolve() : new Promise(resolve => img.onload = resolve)
-    )).then(() => document.querySelectorAll('[class^=loading]').forEach(elem => elem.remove()))
+    )).then(() => {
+        document.querySelectorAll('[class^=loading]').forEach(elem => elem.remove())
+        sync.fade() // based on master toggle state
+    })
 
 })()

package/starters/chrome/extension/popup/index.html

@@ -10,16 +10,16 @@
         </div>
         <header>
             <div class="logo">
-                <img src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png"
+                <img src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20fill='none'%3e%3cstyle%3e%20:root%20{%20--primary-fill:%20%23000;%20--secondary-fill:%20%23fff;%20}%20@media%20(prefers-color-scheme:%20dark)%20{%20:root%20{%20--primary-fill:%20%23fff;%20--secondary-fill:%20%23000;%20}%20}%20%3c/style%3e%3cg%20clip-path='url(%23a)'%3e%3crect%20width='180'%20height='180'%20fill='var(--primary-fill)'%20rx='90'%20/%3e%3cg%20clip-path='url(%23b)'%3e%3cpath%20fill='var(--secondary-fill)'%20d='M75.91%2073.628V62.232c0-.96.36-1.68%201.199-2.16l22.912-13.194c3.119-1.8%206.838-2.639%2010.676-2.639%2014.394%200%2023.511%2011.157%2023.511%2023.032%200%20.839%200%201.799-.12%202.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318%200L75.91%2073.627Zm53.499%2044.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142%2069.55l9.836-5.638c.839-.48%201.559-.48%202.399%200l22.912%2013.195c6.598%203.839%2011.035%2011.995%2011.035%2019.912%200%209.116-5.397%2017.513-13.915%2020.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834%209.837-22.55%2023.152-22.55%205.039%200%209.716%201.679%2013.676%204.678L70.993%2055.516c-1.44.84-2.16%202.039-2.16%203.719v34.787-.002Zm21.173%2012.234L75.91%2098.339V81.546l14.095-7.917%2014.094%207.917v16.793l-14.094%207.916Zm9.056%2036.467c-5.038%200-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839%202.159-2.038%202.159-3.718V85.863l9.956%205.757c.84.48%201.2%201.2%201.2%202.16v26.389c0%2012.835-9.957%2022.552-23.27%2022.552v.001Zm-28.43-26.75L47.72%20102.778c-6.599-3.84-11.036-11.996-11.036-19.913%200-9.236%205.518-17.513%2014.034-20.992v27.35c0%201.68.72%202.879%202.16%203.718l29.989%2017.393-9.837%205.638c-.84.48-1.56.48-2.399%200Zm-1.318%2019.673c-13.555%200-23.512-10.196-23.512-22.792%200-.959.12-1.919.24-2.879l23.63%2013.675c1.44.84%202.88.84%204.32%200l30.108-17.392v11.395c0%20.96-.361%201.68-1.2%202.16l-22.912%2013.194c-3.119%201.8-6.837%202.639-10.675%202.639Zm29.748%2014.274c14.515%200%2026.63-10.316%2029.39-23.991%2013.434-3.479%2022.071-16.074%2022.071-28.91%200-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557%200-17.153-13.915-29.99-29.989-29.99-3.239%200-6.358.48-9.477%201.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515%200-26.63%2010.316-29.39%2023.991-13.434%203.48-22.07%2016.074-22.07%2028.91%200%208.396%203.598%2016.553%2010.075%2022.431-.6%202.519-.96%205.038-.96%207.556%200%2017.154%2013.915%2029.989%2029.99%2029.989%203.238%200%206.357-.479%209.476-1.559%205.397%205.278%2012.835%208.637%2020.992%208.637Z'%20/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='a'%3e%3cpath%20d='M0%200h180v180H0z'%20/%3e%3c/clipPath%3e%3cclipPath%20id='b'%3e%3cpath%20d='M29.487%2029.964h121.035v119.954H29.487z'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"
                      width=26 alt="">
             </div>
             <div class="menu-title">ChatGPT Extension</div>
             <div class="master-toggle"></div>
         </header>
         <footer>
-            <span><img class="cjs-logo"></span>
+            <span><img class="chatgptjs-logo"></span>
             <span class="about-span menu-icon highlight-on-hover"></span>
-            <span class="more-extensions-span menu-icon highlight-on-hover"></span>
+            <span class="more-ext-span menu-icon highlight-on-hover"></span>
         </footer>
         <script src="controller.js"></script>
     </body>

package/starters/chrome/extension/popup/style.css

@@ -1,20 +1,25 @@
 /* General */
+:root {
+    --entry-highlighted-bg: rgb(100,149,237) ;
+    --track-filled-color: #000 ; --track-empty-color: #e0e0e0 ; --thumb-color: #000 ; --thumb-border: #fff
+}
 html { height: fit-content ; min-height: 89px }
 body {
-    width: max-content ; margin: 0 ; font-size: .905rem ;
+    width: 268px ; margin: 0 ; font-size: .905rem ;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
-        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif    
+        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif ;
+    background-image: linear-gradient(180deg, #b6ebff -163px, white 65px)
 }
 
 /* Color/fade mods */
-.highlight-on-hover:hover { background: rgb(100,149,237) }
-.highlight-on-hover:hover span:not(.track), .highlight-on-hover:hover .menu-caret { /* invert setting labels on hover */
-    filter: invert(1) }
-.disabled { opacity: 0.3 ; pointer-events: none }
+.highlight-on-hover:hover { background: var(--entry-highlighted-bg) }
+.highlight-on-hover:hover span:not(.track), .highlight-on-hover:hover svg, span.menu-icon.highlight-on-hover:hover img {
+    filter: invert(1) } /* invert setting labels on hover */
+.disabled { opacity: 0.3 !important ; pointer-events: none }
 
 /* Loader */
 .loading-bg {
-    background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111 ;
+    background: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111 ;
     display: inline-grid ; align-content: center ; justify-content: center /* center spinner */
 }
 .loading-spinner {
@@ -22,13 +27,13 @@ body {
     animation: loader-move-head-tail 0.8s infinite linear alternate, loader-rotate 1.6s infinite linear
 }
 @keyframes loader-move-head-tail {
-     0% { clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0) }
-     12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0) }
-     25% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) }
-     50% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%) }
-     62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%) }
-     75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%) }
-     100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%) }
+    0% { clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0) }
+    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0) }
+    25% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) }
+    50% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%) }
+    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%) }
+    75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%) }
+    100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%) }
 }
 @keyframes loader-rotate { 
     0% { transform: scaleY(1) rotate(0deg) } 49.99% { transform: scaleY(1) rotate(135deg) }
@@ -38,8 +43,8 @@ body {
 /* Header */
 header {
     border-bottom: solid 1px lightgrey ; padding: 5px 5px 5px 0 ; margin: 0 ;
-    min-height: 38px ; display: flex; background: white ; align-items: center }
-.logo { margin: 4px 8px 4px 12px ; position: relative ; top: 3px }
+    height: 38px ; display: flex ; align-items: center }
+.logo { margin: 0 8px 0 12px ; position: relative ; top: 3px }
 .menu-title { font-size: 0.85rem ; font-weight: 600 ; padding-right: 3px }
 .master-toggle { margin-left: auto ; display: flex }
 
@@ -48,13 +53,37 @@ header {
     position: relative ; align-items: center ; border-bottom: 1px solid lightgrey ;
     display: flex ; min-height: 2rem ; padding: 0 14px 0 2px ; white-space: nowrap ; font-size: 91%
 }
-.menu-icon { padding: 8px }
+.menu-icon { padding: 8px ; justify-content: center }
 .menu-entry > label > .track { transform: scale(0.95) ; top: 1px } /* make child toggles smaller */
+.menu-right-elem { display: flex ; height: 33px ; align-items: center ; padding: 0 11.5px ; margin-right: -14px }
 .menu-caret { position: absolute ; right: 14px ; transform: rotate(-90deg) }
-.categorized-entries { /* add left-stripe */
-    border-left: 4px solid transparent ; height: 0 ; overflow: hidden ;
-    border-image: linear-gradient(transparent, rgb(161 161 161)) 30 100%
+.menu-right-elem, .menu-caret { filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1)) }
+.categorized-entries { /* add left-stripe + bg */
+    border-left: 5px solid transparent ; height: 0 ;
+    overflow: hidden ; /* for y-pos calc */
+    border-image: linear-gradient(transparent, rgb(161,161,161)) 30 100% ;
+  --border-transition: border-image 0.35s ease-in
+}
+.anchored { pointer-events: none } /* disable collapse */
+.expanded > span { font-weight: 600 ; transform: scale(1.05) ; margin-left: 5px }
+
+/* Slider */
+div.menu-entry > input.slider {
+  --track-fill-percent: 100% ; width: 100% ; margin: -2px -5px 7px 8px ; padding: 8.5px 3px ; cursor: pointer ;
+   -webkit-appearance: none ; appearance: none ; background: none
+}
+.slider::-webkit-slider-runnable-track {
+    height: 5px ; border-radius: 10px ;
+    background: linear-gradient(to right,
+        var(--track-filled-color) 0%, var(--track-filled-color) var(--track-fill-percent),
+        var(--track-empty-color) var(--track-fill-percent), var(--track-empty-color) 100%
+    )
+}
+.slider::-webkit-slider-thumb {
+   -webkit-appearance: none ; width: 12px ; height: 26.5px ; background: var(--thumb-color) ; margin-top: -10.5px ;
+    border: 4px solid var(--thumb-border) ; border-radius: 16px ; cursor: ew-resize ; transition: transform 0.05s ease
 }
+.slider::-webkit-slider-thumb:hover { transform: scaleX(1.325) }
 
 /* Toggle elements */
 .toggle .track {
@@ -67,18 +96,54 @@ header {
     border: 1px solid black ; border-radius: 50% ; background: white ; transition: transform 0.08s ease-in-out
 }
 .toggle.on .track::before { transform: translateX(9px) ; transition: transform 0.15s ease-in-out }
+
+/* About entry */
+div#about > div.menu-icon { padding: 8px 10px 8px 11px }
+.ticker {
+    align-content: center ; overflow: hidden ; font-size: 10px ; width: 105px ;
+  --mask: linear-gradient(to right, transparent, black 20%, black 89%, transparent) ;
+    mask-image: var(--mask) ; -webkit-mask-image: var(--mask) /* eslint-disable-line */
+}
+.ticker-em { color: green } .highlight-on-hover:hover .ticker-em { color: #28ee28 }
+.ticker > div { animation: ticker linear 75s infinite } 
+@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
   
 /* Footer */
 footer { display: flex ; align-items: center ; background: #f5f5f5 ; height: 40px ; padding: 0 7px }
-footer > span:has(> .cjs-logo) { display: flex ; align-items: center ; flex-grow: 1 ; padding-left: 2px }
-.cjs-logo { opacity: 0.5 } .cjs-logo:hover { opacity: 1 ; transition: 0.25s }
+.chatgptjs-logo { opacity: 0.5 } .chatgptjs-logo:hover { opacity: 1 ; transition: 0.25s }
 footer > .menu-icon {
     display: flex ; opacity: 0.7 ; align-items: center ; padding: 8px 5px ;
     box-sizing: border-box ; height: 96% ; width: 26px
 }
 footer img[src*=question-mark] { position: relative ; top: 1px }
 
+/* Dark styles */
+html.dark {
+    --entry-highlighted-bg: white ;
+    --track-filled-color: white ; --track-empty-color: #b2b2b2 ; --thumb-color: white ; --thumb-border: black
+}
+html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
+html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
+html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
+html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
+html.dark .toggle .track {
+    background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
+html.dark .toggle.on .track { background: var(--track-filled-color) }
+html.dark .toggle .track::before { top: -3px ; left: -2px ; border: 2px solid black } /* toggle knob */
+html.dark .master-toggle .toggle .track::before { border-color: #444343 } /* master toggle knob */
+html.dark .master-toggle:hover .toggle .track { background: #444343 }
+html.dark .toggle.on .track::before { transform: translateX(11px) }
+html.dark .highlight-on-hover:hover .track { background: black }
+html.dark .menu-icon, html.dark .chatgptjs-logo { opacity: 1 }
+html.dark .menu-icon svg, html.dark .menu-right-elem, html.dark .menu-right-elem > svg { fill: white }
+html.dark .menu-icon img { filter: brightness(0) invert(1) }
+html.dark .menu-icon:hover img { filter: none }
+html.dark .ticker-em { color: #28ee28 } html.dark .highlight-on-hover:hover .ticker-em { color: green }
+
 /* Non-baseline features */
+@supports (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .chatgptjs-logo { cursor: pointer }}
 @supports (overflow: clip) { body { overflow: clip }}
+@supports selector(:has(> input.slider)) { div.menu-entry:has(> input.slider) { flex-wrap: wrap ; padding-top: 2px }}
+@supports selector(:has(> .chatgptjs-logo)) {
+    footer > span:has(> .chatgptjs-logo) { display: flex ; align-items: center ; flex-grow: 1 ; padding-left: 2px }}
 @supports (user-select: none) { body, button, input, select, textarea { user-select: none }}
-@supports (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .cjs-logo { cursor: pointer }}

package/starters/chrome/extension/service-worker.js

@@ -1,20 +1,18 @@
 const chatgptURL = 'https://chatgpt.com'
 
 // Init APP data
-const app = {
+chrome.storage.local.set({ app: {
     name: chrome.runtime.getManifest().name,
     version: chrome.runtime.getManifest().version, symbol: '🤖', cssPrefix: 'chatgpt-extension',
     author: { name: 'KudoAI', url: 'https://kudoai.com' },
     urls: {
-        assetHost: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js-chrome-starter@latest',
-        chatgptJS: 'https://chatgptjs.org',
+        chatgptjs: 'https://chatgptjs.org',
         contributors: 'https://docs.chatgptjs.org/#-contributors',
         gitHub: 'https://github.com/KudoAI/chatgpt.js-chrome-starter',
         relatedExtensions: 'https://aiwebextensions.com',
         support: 'https://github.com/KudoAI/chatgpt.js-chrome-starter/issues'
     }
-}
-chrome.storage.local.set({ app }) // save to Chrome storage
+}}) // save to Chrome storage
 
 // Launch CHATGPT on install
 chrome.runtime.onInstalled.addListener(details => {

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.4.28
+// @version       2025.7.28
 // @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
+// @icon          data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20fill='none'%3e%3cstyle%3e%20:root%20{%20--primary-fill:%20%23000;%20--secondary-fill:%20%23fff;%20}%20@media%20(prefers-color-scheme:%20dark)%20{%20:root%20{%20--primary-fill:%20%23fff;%20--secondary-fill:%20%23000;%20}%20}%20%3c/style%3e%3cg%20clip-path='url(%23a)'%3e%3crect%20width='180'%20height='180'%20fill='var(--primary-fill)'%20rx='90'%20/%3e%3cg%20clip-path='url(%23b)'%3e%3cpath%20fill='var(--secondary-fill)'%20d='M75.91%2073.628V62.232c0-.96.36-1.68%201.199-2.16l22.912-13.194c3.119-1.8%206.838-2.639%2010.676-2.639%2014.394%200%2023.511%2011.157%2023.511%2023.032%200%20.839%200%201.799-.12%202.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318%200L75.91%2073.627Zm53.499%2044.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142%2069.55l9.836-5.638c.839-.48%201.559-.48%202.399%200l22.912%2013.195c6.598%203.839%2011.035%2011.995%2011.035%2019.912%200%209.116-5.397%2017.513-13.915%2020.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834%209.837-22.55%2023.152-22.55%205.039%200%209.716%201.679%2013.676%204.678L70.993%2055.516c-1.44.84-2.16%202.039-2.16%203.719v34.787-.002Zm21.173%2012.234L75.91%2098.339V81.546l14.095-7.917%2014.094%207.917v16.793l-14.094%207.916Zm9.056%2036.467c-5.038%200-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839%202.159-2.038%202.159-3.718V85.863l9.956%205.757c.84.48%201.2%201.2%201.2%202.16v26.389c0%2012.835-9.957%2022.552-23.27%2022.552v.001Zm-28.43-26.75L47.72%20102.778c-6.599-3.84-11.036-11.996-11.036-19.913%200-9.236%205.518-17.513%2014.034-20.992v27.35c0%201.68.72%202.879%202.16%203.718l29.989%2017.393-9.837%205.638c-.84.48-1.56.48-2.399%200Zm-1.318%2019.673c-13.555%200-23.512-10.196-23.512-22.792%200-.959.12-1.919.24-2.879l23.63%2013.675c1.44.84%202.88.84%204.32%200l30.108-17.392v11.395c0%20.96-.361%201.68-1.2%202.16l-22.912%2013.194c-3.119%201.8-6.837%202.639-10.675%202.639Zm29.748%2014.274c14.515%200%2026.63-10.316%2029.39-23.991%2013.434-3.479%2022.071-16.074%2022.071-28.91%200-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557%200-17.153-13.915-29.99-29.989-29.99-3.239%200-6.358.48-9.477%201.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515%200-26.63%2010.316-29.39%2023.991-13.434%203.48-22.07%2016.074-22.07%2028.91%200%208.396%203.598%2016.553%2010.075%2022.431-.6%202.519-.96%205.038-.96%207.556%200%2017.154%2013.915%2029.989%2029.99%2029.989%203.238%200%206.357-.479%209.476-1.559%205.397%205.278%2012.835%208.637%2020.992%208.637Z'%20/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='a'%3e%3cpath%20d='M0%200h180v180H0z'%20/%3e%3c/clipPath%3e%3cclipPath%20id='b'%3e%3cpath%20d='M29.487%2029.964h121.035v119.954H29.487z'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e
+// @icon64        data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20fill='none'%3e%3cstyle%3e%20:root%20{%20--primary-fill:%20%23000;%20--secondary-fill:%20%23fff;%20}%20@media%20(prefers-color-scheme:%20dark)%20{%20:root%20{%20--primary-fill:%20%23fff;%20--secondary-fill:%20%23000;%20}%20}%20%3c/style%3e%3cg%20clip-path='url(%23a)'%3e%3crect%20width='180'%20height='180'%20fill='var(--primary-fill)'%20rx='90'%20/%3e%3cg%20clip-path='url(%23b)'%3e%3cpath%20fill='var(--secondary-fill)'%20d='M75.91%2073.628V62.232c0-.96.36-1.68%201.199-2.16l22.912-13.194c3.119-1.8%206.838-2.639%2010.676-2.639%2014.394%200%2023.511%2011.157%2023.511%2023.032%200%20.839%200%201.799-.12%202.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318%200L75.91%2073.627Zm53.499%2044.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142%2069.55l9.836-5.638c.839-.48%201.559-.48%202.399%200l22.912%2013.195c6.598%203.839%2011.035%2011.995%2011.035%2019.912%200%209.116-5.397%2017.513-13.915%2020.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834%209.837-22.55%2023.152-22.55%205.039%200%209.716%201.679%2013.676%204.678L70.993%2055.516c-1.44.84-2.16%202.039-2.16%203.719v34.787-.002Zm21.173%2012.234L75.91%2098.339V81.546l14.095-7.917%2014.094%207.917v16.793l-14.094%207.916Zm9.056%2036.467c-5.038%200-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839%202.159-2.038%202.159-3.718V85.863l9.956%205.757c.84.48%201.2%201.2%201.2%202.16v26.389c0%2012.835-9.957%2022.552-23.27%2022.552v.001Zm-28.43-26.75L47.72%20102.778c-6.599-3.84-11.036-11.996-11.036-19.913%200-9.236%205.518-17.513%2014.034-20.992v27.35c0%201.68.72%202.879%202.16%203.718l29.989%2017.393-9.837%205.638c-.84.48-1.56.48-2.399%200Zm-1.318%2019.673c-13.555%200-23.512-10.196-23.512-22.792%200-.959.12-1.919.24-2.879l23.63%2013.675c1.44.84%202.88.84%204.32%200l30.108-17.392v11.395c0%20.96-.361%201.68-1.2%202.16l-22.912%2013.194c-3.119%201.8-6.837%202.639-10.675%202.639Zm29.748%2014.274c14.515%200%2026.63-10.316%2029.39-23.991%2013.434-3.479%2022.071-16.074%2022.071-28.91%200-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557%200-17.153-13.915-29.99-29.989-29.99-3.239%200-6.358.48-9.477%201.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515%200-26.63%2010.316-29.39%2023.991-13.434%203.48-22.07%2016.074-22.07%2028.91%200%208.396%203.598%2016.553%2010.075%2022.431-.6%202.519-.96%205.038-.96%207.556%200%2017.154%2013.915%2029.989%2029.99%2029.989%203.238%200%206.357-.479%209.476-1.559%205.397%205.278%2012.835%208.637%2020.992%208.637Z'%20/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='a'%3e%3cpath%20d='M0%200h180v180H0z'%20/%3e%3c/clipPath%3e%3cclipPath%20id='b'%3e%3cpath%20d='M29.487%2029.964h121.035v119.954H29.487z'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e
 // @match         *://chatgpt.com/*
-// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.8.0/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.8.2/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes