@kudoai/chatgpt.js 3.7.1 → 3.8.0

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

@@ -6,8 +6,8 @@
 
     // Init ENV context
     const env = {
-        site: /([^.]+)\.[^.]+$/.exec(new URL((await chrome.tabs.query(
-            { active: true, currentWindow: true }))[0].url).hostname)?.[1]
+        site: new URL((await chrome.tabs.query({ active: true, currentWindow: true }))[0].url)
+            .hostname.split('.').slice(-2, -1)[0] // extract 2nd-level domain
     }
 
     // Import DATA
@@ -16,6 +16,35 @@
 
     // Define FUNCTIONS
 
+    function createMenuEntry(entryData) {
+        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 || '' }` }),
+            label: dom.create.elem('span')
+        }
+        entry.label.textContent = entryData.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 || '⚙️'
+            if (entryData.status) entry.label.textContent += ` — ${entryData.status}`
+        }
+        if (entryData.type == 'category') entry.div.append(icons.create('caretDown', { size: 11, class: 'menu-caret' }))
+        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()}`)
+            }
+        }
+        entry.div.append(entry.leftElem, entry.label)
+        return entry.div
+    }
+
     function notify(msg, pos = 'bottom-right') { sendMsgToActiveTab('notify', { msg, pos }) }
 
     async function sendMsgToActiveTab(action, options) {
@@ -23,8 +52,6 @@
         return await chrome.tabs.sendMessage(activeTab.id, { action: action, options: { ...options }})
     }
 
-    function settingIsEnabled(key) { return config[key] ^ /disabled|hidden/i.test(key) }
-
     const sync = {
         fade() {
 
@@ -45,6 +72,32 @@
         configToUI(options) { return sendMsgToActiveTab('syncConfigToUI', options) }
     }
 
+    function toggleCategorySettingsVisiblity(category, { 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`,
+                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
+                row.style.transition = 'none' ; row.style.opacity = 0 })
+            catChildrenDiv.offsetHeight // force reflow to insta-apply reset
+            catChild.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' }))
+        } else { // hide category settings
+            Object.assign(catChildrenDiv.style, { height: 0, transition: '' })
+            Object.assign(caret.style, { transform: 'rotate(-90deg)', transition: '' }) // point it right
+        }
+    }
+
     // Run MAIN routine
 
     // Init MASTER TOGGLE
@@ -63,66 +116,55 @@
     }
 
     // Create CHILD menu entries on chatgpt.com
+    const footer = document.querySelector('footer')
     if (env.site == 'chatgpt') {
-        const childEntriesDiv = dom.create.elem('div') ; document.body.append(childEntriesDiv)
         await settings.load(Object.keys(settings.controls))
-        Object.keys(settings.controls).forEach(key => {
-            const controlType = settings.controls[key].type
-
-            // Init entry's elems
-            const entry = {
-                div: dom.create.elem('div', {
-                    class: 'menu-entry highlight-on-hover', title: settings.controls[key].helptip || '' }),
-                leftElem: dom.create.elem('div', { class: `menu-icon ${ controlType || '' }` }),
-                label: dom.create.elem('span')
-            }
-            entry.label.textContent = settings.controls[key].label
-            entry.div.append(entry.leftElem, entry.label) ; childEntriesDiv.append(entry.div)
-            if (controlType == 'toggle') { // add track to left, init knob pos
-                entry.leftElem.append(dom.create.elem('span', { class: 'track' }))
-                entry.leftElem.classList.toggle('on', settingIsEnabled(key))
-            } else { // add symbol to left, append status to right
-                entry.leftElem.innerText = settings.controls[key].symbol
-                entry.label.innerText += `— ${settings.controls[key].status}`
-            }
-
-            entry.div.onclick = () => {
-                if (controlType == 'toggle') {
-                    entry.leftElem.classList.toggle('on')
-                    settings.save(key, !config[key]) ; sync.configToUI({ updatedKey: key })
-                    notify(`${settings.controls[key].label} ${ settingIsEnabled(key) ? 'ON' : 'OFF' }`)
-                }
-            }
+        const menuEntriesDiv = dom.create.elem('div') ; footer.before(menuEntriesDiv)
+
+        // Group controls by category
+        const categorizedCtrls = {}
+        Object.entries(settings.controls).forEach(([key, ctrl]) =>
+            ( categorizedCtrls[ctrl.category || 'general'] ??= {} )[key] = { ...ctrl, key: key })
+
+        // Create/append general controls
+        Object.values(categorizedCtrls.general || {}).forEach(ctrl => menuEntriesDiv.append(createMenuEntry(ctrl)))
+
+        // 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)))
         })
     }
 
+    // AUTO-EXPAND categories
+    document.querySelectorAll('.menu-entry:has(.menu-caret)').forEach(categoryDiv => {
+        if (settings.categories[categoryDiv.id]?.autoExpand)
+            toggleCategorySettingsVisiblity(categoryDiv.id, { transitions: false })
+    })
+
     sync.fade() // based on master toggle
 
-    // Create/append FOOTER container
-    const footer = dom.create.elem('footer') ; document.body.append(footer)
-
-    // Create/append CHATGPT.JS footer logo
-    const cjsSpan = dom.create.elem('span', { class: 'cjs-span' })
-    const cjsLogo = dom.create.elem('img', {
-        src: `${app.urls.cjsAssetHost}/images/badges/powered-by-chatgpt.js.png?b2a1975` })
-    cjsSpan.onclick = () => { open(app.urls.chatgptJS) ; close() }
-    cjsSpan.append(cjsLogo) ; footer.append(cjsSpan)
-
-    // Create/append ABOUT footer button
-    const aboutSpan = dom.create.elem('span', {
-        title: `About ${app.name}`,
-        class: 'menu-icon highlight-on-hover', style: 'right:30px ; padding-top: 2px' })
-    const aboutIcon = icons.create('questionMark', { width: 15, height: 13, style: 'margin-bottom: 0.04rem' })
+    // 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() }
+
+    // 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() }
-    aboutSpan.append(aboutIcon) ; footer.append(aboutSpan)
 
-    // Create/append RELATED EXTENSIONS footer button
-    const moreExtensionsSpan = dom.create.elem('span', {
-        title: 'More AI Extensions',
-        class: 'menu-icon highlight-on-hover', style: 'right:2px ; padding-top: 2px' })
-    const moreExtensionsIcon = icons.create('plus')
+    // 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() }
-    moreExtensionsSpan.append(moreExtensionsIcon) ; footer.append(moreExtensionsSpan)
 
     // Remove LOADING SPINNER after imgs load
     Promise.all([...document.querySelectorAll('img')].map(img =>

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

@@ -8,13 +8,19 @@
         <div class="loading-bg">
             <span class="loading-spinner"></span>
         </div>
-        <div class="menu-header">
+        <header>
             <div class="logo">
-                <img alt="" width=26 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png">
+                <img src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png"
+                     width=26 alt="">
             </div>
             <div class="menu-title">ChatGPT Extension</div>
             <div class="master-toggle"></div>
-        </div>
+        </header>
+        <footer>
+            <span><img class="cjs-logo"></span>
+            <span class="about-span menu-icon highlight-on-hover"></span>
+            <span class="more-extensions-span menu-icon highlight-on-hover"></span>
+        </footer>
         <script src="controller.js"></script>
     </body>
 </html>

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

@@ -8,6 +8,8 @@ body {
 
 /* 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 }
 
 /* Loader */
@@ -34,7 +36,7 @@ body {
 }
 
 /* Header */
-.menu-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 }
@@ -47,9 +49,12 @@ body {
     display: flex ; min-height: 2rem ; padding: 0 14px 0 2px ; white-space: nowrap ; font-size: 91%
 }
 .menu-icon { padding: 8px }
-.menu-entry:hover span:not(.track), .menu-entry:hover .caret { filter: invert(1) } /* invert setting labels on hover */
 .menu-entry > label > .track { transform: scale(0.95) ; top: 1px } /* make child toggles smaller */
-.menu-prompt { margin-left: 2px } /* align non-toggle items */
+.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%
+}
 
 /* Toggle elements */
 .toggle .track {
@@ -64,13 +69,16 @@ body {
 .toggle.on .track::before { transform: translateX(9px) ; transition: transform 0.15s ease-in-out }
   
 /* Footer */
-footer {
-    font-size: 12px ; text-align: center ; color: #999 ; background: #f5f5f5 ; height: 40px ; line-height: 40px }
-footer > .menu-icon { position: absolute ; bottom: -10px ; opacity: 0.7 }
-.cjs-span { position: absolute ; bottom: -.25rem ; left: 0.7rem }
-.cjs-span img { opacity: 0.5 } .cjs-span:hover img { opacity: 1 ; transition: 0.25s }
+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 }
+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 }
 
 /* Non-baseline features */
 @supports (overflow: clip) { body { overflow: clip }}
 @supports (user-select: none) { body, button, input, select, textarea { user-select: none }}
-@supports (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .cjs-span { cursor: pointer }}
+@supports (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .cjs-logo { cursor: pointer }}

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

@@ -6,9 +6,8 @@ const app = {
     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',
+        assetHost: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js-chrome-starter@latest',
         chatgptJS: 'https://chatgptjs.org',
-        cjsAssetHost: 'https://assets.chatgptjs.org',
         contributors: 'https://docs.chatgptjs.org/#-contributors',
         gitHub: 'https://github.com/KudoAI/chatgpt.js-chrome-starter',
         relatedExtensions: 'https://aiwebextensions.com',
@@ -33,10 +32,11 @@ chrome.runtime.onMessage.addListener(async req => {
         const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
         const chatgptTab = new URL(activeTab.url).hostname == 'chatgpt.com' ? activeTab
             : await chrome.tabs.create({ url: chatgptURL })
-        if (activeTab != chatgptTab) new Promise(resolve => // after new tab loads
+        if (activeTab != chatgptTab) await new Promise(resolve => // after new tab loads
             chrome.tabs.onUpdated.addListener(function loadedListener(tabId, changeInfo) {
                 if (tabId == chatgptTab.id && changeInfo.status == 'complete') {
                     chrome.tabs.onUpdated.removeListener(loadedListener) ; setTimeout(resolve, 500)
-        }})).then(() => chrome.tabs.sendMessage(chatgptTab.id, { action: 'showAbout' }))
+        }}))
+        chrome.tabs.sendMessage(chatgptTab.id, { action: 'showAbout' })
     }
 })

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

@@ -3,12 +3,12 @@
 // @description   A Greasemonkey template to start using chatgpt.js like a boss
 // @author        chatgpt.js
 // @namespace     https://chatgpt.js.org
-// @version       2025.2.21.1
+// @version       2025.4.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
 // @match         *://chatgpt.com/*
-// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.7.1/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.8.0/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes