@kudoai/chatgpt.js 3.7.1 → 3.8.1

package/starters/chrome/extension/manifest.json

@@ -3,22 +3,14 @@
   "name": "ChatGPT Extension",
   "short_name": "ChatGPT 🧩",
   "description": "A Chromium extension template to start using chatgpt.js like a boss!",
-  "version": "2025.2.21",
+  "version": "2025.5.11",
   "author": "KudoAI",
   "homepage_url": "https://github.com/KudoAI/chatgpt.js-chrome-starter",
-  "icons": {
-    "16": "icons/icon16.png",
-    "32": "icons/icon32.png",
-    "64": "icons/icon64.png",
-    "128": "icons/icon128.png"
-  },
-  "permissions": [ "activeTab", "storage" ],
+  "icons": { "16": "icons/icon16.png", "32": "icons/icon32.png", "64": "icons/icon64.png", "128": "icons/icon128.png" },
+  "permissions": ["activeTab", "storage"],
   "action": { "default_popup": "popup/index.html" },
-  "web_accessible_resources": [{
-    "matches": [ "<all_urls>" ],
-    "resources": [ "components/modals.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js" ]
-  }],
-  "content_scripts": [{ "matches": [ "https://chatgpt.com/*" ], "js": [ "content.js" ] }],
+  "web_accessible_resources": [{ "matches": ["<all_urls>"], "resources": ["components/*", "lib/*"] }],
+  "content_scripts": [{ "matches": ["https://chatgpt.com/*"], "js": ["content.js"] }],
   "background": { "service_worker": "service-worker.js" },
   "minimum_chrome_version": "88"
 }

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

@@ -5,26 +5,52 @@
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = {
-        site: /([^.]+)\.[^.]+$/.exec(new URL((await chrome.tabs.query(
-            { active: true, currentWindow: true }))[0].url).hostname)?.[1]
+    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
     }
 
     // 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) {
+        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.textContent = 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()}`)
+            } else if (entryData.type == 'link') { open(entryData.url) ; close() }
+        }
+        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) {
         const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
-        return await chrome.tabs.sendMessage(activeTab.id, { action: action, options: { ...options }})
+        return await chrome.tabs.sendMessage(activeTab.id, { action, options })
     }
 
-    function settingIsEnabled(key) { return config[key] ^ /disabled|hidden/i.test(key) }
-
     const sync = {
         fade() {
 
@@ -45,6 +71,34 @@
         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
+            categoryDiv.classList.toggle('expanded', true)
+            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
+            categoryDiv.classList.toggle('expanded', false)
+            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 +117,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,13 @@ 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%
+}
+.expanded > span { font-weight: 500 ; transform: scale(1.05) ; margin-left: 2px }
 
 /* Toggle elements */
 .toggle .track {
@@ -64,13 +70,17 @@ 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 }
+.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 (cursor: pointer) { .highlight-on-hover:hover, .toggle .track, .cjs-logo { cursor: pointer }}
 @supports (overflow: clip) { body { overflow: clip }}
+@supports selector(:has(> .cjs-logo)) {
+      footer > span:has(> .cjs-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-span { cursor: pointer }}

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

@@ -1,21 +1,19 @@
 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',
+        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',
         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 => {
@@ -33,10 +31,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.5.11
 // @license       MIT
 // @icon          https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@1fc50da/starters/greasemonkey/assets/images/icons/robot/icon48.png
 // @icon64        https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@1fc50da/starters/greasemonkey/assets/images/icons/robot/icon64.png
 // @match         *://chatgpt.com/*
-// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.7.1/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.8.1/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes