@kudoai/chatgpt.js 3.6.2 → 3.7.0

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

@@ -77,12 +77,12 @@ window.dom = {
             const computedDimensions = { width: 0, height: 0 }
             elems.forEach(elem => {
                 const elemStyle = getComputedStyle(elem) ; if (elemStyle.display == 'none') return
-                if (dimensionsToCompute.includes('width'))
-                    computedDimensions.width += elem.getBoundingClientRect().width
-                        + parseFloat(elemStyle.marginLeft) + parseFloat(elemStyle.marginRight)
-                if (dimensionsToCompute.includes('height'))
-                    computedDimensions.height += elem.getBoundingClientRect().height
-                        + parseFloat(elemStyle.marginTop) + parseFloat(elemStyle.marginBottom)
+                Object.keys(computedDimensions).forEach(dimension => {
+                    if (dimensionsToCompute.includes(dimension))
+                        computedDimensions[dimension] += elem.getBoundingClientRect()[dimension]
+                            + parseFloat(elemStyle[`margin${dimension == 'width' ? 'Left' : 'Top'}`])
+                            + parseFloat(elemStyle[`margin${dimension == 'width' ? 'Right' : 'Bottom'}`])
+                })
             })
 
             // Return computed dimensions

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

@@ -17,13 +17,13 @@ window.settings = {
 
     load(...keys) {
         return Promise.all(keys.flat().map(async key => // resolve promise when all keys load
-            window.config[key] = (await chrome.storage.sync.get(key))[key]
+            window.config[key] = (await chrome.storage.local.get(key))[key]
                 ?? this.controls[key]?.defaultVal ?? this.controls[key]?.type == 'toggle'
         ))
     },
 
     save(key, val) {
-        chrome.storage.sync.set({ [key]: val }) // save to Chrome extension storage
+        chrome.storage.local.set({ [key]: val }) // save to Chrome extension storage
         window.config[key] = val // save to memory
     }
 };

package/starters/chrome/extension/manifest.json

@@ -3,7 +3,7 @@
   "name": "ChatGPT Extension",
   "short_name": "ChatGPT 🧩",
   "description": "A Chromium extension template to start using chatgpt.js like a boss!",
-  "version": "2025.2.11",
+  "version": "2025.2.21",
   "author": "KudoAI",
   "homepage_url": "https://github.com/KudoAI/chatgpt.js-chrome-starter",
   "icons": {

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

@@ -5,37 +5,41 @@
         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] }
+    const env = {
+        site: /([^.]+)\.[^.]+$/.exec(new URL((await chrome.tabs.query(
+            { active: true, currentWindow: true }))[0].url).hostname)?.[1]
+    }
 
-    // Import APP data
-    const { app } = await chrome.storage.sync.get('app')
-    icons.import({ app }) // for srcs using app.urls.assetHost
+    // Import DATA
+    const { app } = await chrome.storage.local.get('app')
+    icons.import({ app }) // for src's using app.urls.assetHost
 
     // Define FUNCTIONS
 
+    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 }})
     }
 
-    function notify(msg, pos = 'bottom-right') { sendMsgToActiveTab('notify', { msg, pos }) }
+    function settingIsEnabled(key) { return config[key] ^ /disabled|hidden/i.test(key) }
 
     const sync = {
         fade() {
 
-            // Update toolbar icon
+            // Toolbar icon
             chrome.action.setIcon({ path: Object.fromEntries(
                 Object.keys(chrome.runtime.getManifest().icons).map(dimension =>
                     [dimension, `../icons/${ config.extensionDisabled ? 'faded/' : '' }icon${dimension}.png`]
             ))})
 
-            // Update menu contents
-            document.querySelectorAll('div.logo, div.menu-title, div.menu')
-                .forEach(elem => {
-                    elem.classList.remove(masterToggle.checked ? 'disabled' : 'enabled')
-                    elem.classList.add(masterToggle.checked ? 'enabled' : 'disabled')
-                })
+            // 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
+            })
         },
 
         configToUI(options) { return sendMsgToActiveTab('syncConfigToUI', options) }
@@ -44,97 +48,85 @@
     // Run MAIN routine
 
     // Init MASTER TOGGLE
-    const masterToggle = document.querySelector('input')
-    await settings.load('extensionDisabled')
-    masterToggle.checked = !config.extensionDisabled ; sync.fade()
-    masterToggle.onchange = () => {
-        settings.save('extensionDisabled', !config.extensionDisabled)
+    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' })
+    }
+    masterToggle.div.append(masterToggle.switch) ; masterToggle.switch.append(masterToggle.track)
+    await settings.load('extensionDisabled') ; masterToggle.switch.classList.toggle('on', !config.extensionDisabled)
+    masterToggle.div.onclick = () => {
+        env.extensionWasDisabled = config.extensionDisabled
+        masterToggle.switch.classList.toggle('on') ; settings.save('extensionDisabled', !config.extensionDisabled)
         Object.keys(sync).forEach(key => sync[key]()) // sync fade + storage to UI
-        notify(`${chrome.runtime.getManifest().name} ${ this.checked ? 'ON' : 'OFF' }`)
+        notify(`${app.name} ${ this.checked ? 'ON' : 'OFF' }`)
     }
 
     // Create CHILD menu entries on chatgpt.com
     if (env.site == 'chatgpt') {
+        const childEntriesDiv = dom.create.elem('div') ; document.body.append(childEntriesDiv)
         await settings.load(Object.keys(settings.controls))
-
-        // Create/insert child section
-        const togglesDiv = dom.create.elem('div', { class: 'menu' })
-        document.querySelector('.menu-header').insertAdjacentElement('afterend', togglesDiv)
-
-        // Create/insert child entries
         Object.keys(settings.controls).forEach(key => {
-
-            // Init elems
-            const menuItemDiv = dom.create.elem('div', {
-                class: 'menu-item menu-area', title: settings.controls[key].helptip || '' })
-            const menuLabel = dom.create.elem('label', { class: 'menu-icon' })
-            const menuLabelSpan = dom.create.elem('span')
-            let menuInput, menuSlider
-            menuLabelSpan.textContent = settings.controls[key].label
-            if (settings.controls[key].type == 'toggle') {
-                menuInput = dom.create.elem('input', { type: 'checkbox' })
-                menuInput.checked = /disabled|hidden/i.test(key) ^ config[key]
-                menuSlider = dom.create.elem('span', { class: 'slider' })
-                menuLabel.append(menuInput, menuSlider)
-                menuLabel.classList.add('toggle-switch')
-            } else if (settings.controls[key].type == 'prompt') {
-                menuLabel.innerText = settings.controls[key].symbol
-                menuLabel.classList.add('menu-prompt')
+            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}`
             }
 
-            // Assemble/append elems
-            menuItemDiv.append(menuLabel, menuLabelSpan)
-            togglesDiv.append(menuItemDiv)
-
-            // Add listeners
-            if (settings.controls[key].type == 'toggle') {
-                menuItemDiv.onclick = () => menuInput.click()
-                menuInput.onclick = menuSlider.onclick = event => // prevent double toggle
-                    event.stopImmediatePropagation()
-                menuInput.onchange = () => {
+            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} ${
-                        /disabled|hidden/i.test(key) != config[key] ? 'ON' : 'OFF' }`)
+                    notify(`${settings.controls[key].label} ${ settingIsEnabled(key) ? 'ON' : 'OFF' }`)
                 }
-            } else if (settings.controls[key].type == 'prompt') {
-                // custom logic for each prompt based on key name
             }
         })
-
-        sync.fade() // in case master toggle off
     }
 
+    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 cjsDiv = dom.create.elem('div', { class: 'chatgpt-js' })
+    const cjsSpan = dom.create.elem('span', { class: 'cjs-span' })
     const cjsLogo = dom.create.elem('img', {
-        title: 'Powered by chatgpt.js',
-        src: `${app.urls.cjsAssetHost}/images/badges/powered-by-chatgpt.js-faded.png?b2a1975` })
-    cjsLogo.onmouseover = cjsLogo.onmouseout = event => cjsLogo.src = `${
-        app.urls.cjsAssetHost}/images/badges/powered-by-chatgpt.js${
-            event.type == 'mouseover' ? '' : '-faded' }.png?b2a1975`
-    cjsLogo.onclick = () => chrome.tabs.create({ url: app.urls.chatgptJS })
-    cjsDiv.append(cjsLogo) ; footer.append(cjsDiv)
+        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 ChatGPT Extension',
-        class: 'menu-icon menu-area', style: 'right:30px ; padding-top: 2px' })
-    const aboutIcon = icons.create({ name: 'questionMark', width: 15, height: 13, style: 'margin-bottom: 0.04rem' })
+        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' })
     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 menu-area', style: 'right:2px ; padding-top: 2px' })
-    const moreExtensionsIcon = icons.create({ name: 'plus', size: 16 })
-    moreExtensionsSpan.onclick = () => { chrome.tabs.create({ url: app.urls.relatedExtensions }) ; close() }
+        class: 'menu-icon highlight-on-hover', style: 'right:2px ; padding-top: 2px' })
+    const moreExtensionsIcon = icons.create('plus')
+    moreExtensionsSpan.onclick = () => { open(app.urls.relatedExtensions) ; close() }
     moreExtensionsSpan.append(moreExtensionsIcon) ; footer.append(moreExtensionsSpan)
 
-    // Remove loading spinner
-    document.querySelectorAll('[class^=loading]').forEach(elem => elem.remove())
+    // 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()))
 
 })()

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

@@ -13,12 +13,7 @@
                 <img alt="" width=26 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png">
             </div>
             <div class="menu-title">ChatGPT Extension</div>
-            <div class="main-toggle">
-                <label class="toggle-switch menu-area menu-icon">
-                    <input type="checkbox">
-                    <span class="slider"></span>
-                </label>
-            </div>
+            <div class="master-toggle"></div>
         </div>
         <script src="controller.js"></script>
     </body>

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

@@ -1,15 +1,14 @@
-/* General size */
+/* General */
 html { height: fit-content ; min-height: 89px }
-body { width: max-content ; margin: 0 ; overflow: clip }
-
-/* General font */
-body, button, input, select, textarea {
+body {
+    width: max-content ; 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 ;
-    font-size: .905rem ; user-select: none
+        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif    
 }
-a { color: #999 ; text-decoration: none }
-a:focus, a:hover { text-decoration: underline ; color: inherit }
+
+/* Color/fade mods */
+.highlight-on-hover:hover { background: rgb(100,149,237) }
+.disabled { opacity: 0.3 ; pointer-events: none }
 
 /* Loader */
 .loading-bg {
@@ -32,46 +31,46 @@ a:focus, a:hover { text-decoration: underline ; color: inherit }
 @keyframes loader-rotate { 
     0% { transform: scaleY(1) rotate(0deg) } 49.99% { transform: scaleY(1) rotate(135deg) }
     50% { transform: scaleY(-1) rotate(0deg) } 100% { transform: scaleY(-1) rotate(-135deg) }
-}  
+}
 
 /* Header */
 .menu-header {
-    border-bottom: solid 1px lightgrey ; padding: 5px 5px 5px 0; margin: 0 ;
-    display: flex; background: white ; align-items: center }
+    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 }
 .menu-title { font-size: 0.85rem ; font-weight: 600 ; padding-right: 3px }
-.menu-icons > .toggle-switch { transform: scale(1.1) } /* make master toggle bigger */
-.main-toggle { margin-left: auto ; display: flex }
+.master-toggle { margin-left: auto ; display: flex }
 
 /* Menu item elements */
-.menu-item {    
+.menu-entry {
     position: relative ; align-items: center ; border-bottom: 1px solid lightgrey ;
-    display: flex ; min-height: 2rem ; padding-right: 14px ; white-space: nowrap ; font-size: 91%
+    display: flex ; min-height: 2rem ; padding: 0 14px 0 2px ; white-space: nowrap ; font-size: 91%
 }
 .menu-icon { padding: 8px }
-.menu-area:focus, .menu-area:hover { background: rgb(100,149,237) ; cursor: pointer } /* add hover color/cursor */    
-.menu-item:hover span:not(.slider) { filter: invert(1) } /* invert setting labels on hover */
-.menu-item > label > .slider { transform: scale(0.95) ; top: 1px } /* make child toggles smaller */
+.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 */
 
 /* Toggle elements */
-.toggle-switch input[type="checkbox"] { display: none } /* hide checkbox from toggles */
-.toggle-switch .slider { /* style sliders */
-    background-color: white;  display: block; border: 1px solid black; border-radius: 7px ; 
-    position: relative ; top: 0.05rem ; height: 10px ; width: 18px ; cursor: pointer ;
+.toggle .track {
+    display: block ; border-radius: 7px ; position: relative ; transform: scale(0.95) ; background: white ; 
+    border: 1px solid black ; top: 1px ; height: 10px ; width: 18px ; transition: background 0.08s ease-in-out
 }
-.toggle-switch .slider::before { /* style slider knobs */
-    position: absolute ; height: 0.625rem ; width: 0.625rem ; left: -0.04rem ; top: -0.05rem ;
-    border: 1px solid black ; border-radius: 50% ; background-color: white ; content: ""
+.toggle.on .track { background: black ; transition: background 0.15s ease-in-out }
+.toggle .track::before { /* knob */
+    content: "" ; position: absolute ; height: 0.625rem ; width: 0.625rem ; left: -0.04rem ; top: -0.05rem ;
+    border: 1px solid black ; border-radius: 50% ; background: white ; transition: transform 0.08s ease-in-out
 }
-.toggle-switch input[type="checkbox"]:checked + .slider { background-color: black } /* color active slider */
-.toggle-switch input[type="checkbox"]:checked + .slider::before { transform: translateX(9px) } /* toggle knob right */
-
+.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 {
+    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 }
-.chatgpt-js { position: absolute ; bottom: -.25rem ; left: 0.7rem ; cursor: pointer }
+.cjs-span { position: absolute ; bottom: -.25rem ; left: 0.7rem }
+.cjs-span img { opacity: 0.5 } .cjs-span:hover img { opacity: 1 ; transition: 0.25s }
 
-/* Master toggle effects */
-.disabled { opacity: 0.3 ; pointer-events: none }
-.enabled { opacity: 1 }
+/* 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 }}

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

@@ -1,5 +1,8 @@
+const chatgptURL = 'https://chatgpt.com'
+
 // Init APP data
 const app = {
+    name: chrome.runtime.getManifest().name,
     version: chrome.runtime.getManifest().version, symbol: '🤖', cssPrefix: 'chatgpt-extension',
     author: { name: 'KudoAI', url: 'https://kudoai.com' },
     urls: {
@@ -12,12 +15,12 @@ const app = {
         support: 'https://github.com/KudoAI/chatgpt.js-chrome-starter/issues'
     }
 }
-chrome.storage.sync.set({ app }) // save to Chrome storage
+chrome.storage.local.set({ app }) // save to Chrome storage
 
 // Launch CHATGPT on install
 chrome.runtime.onInstalled.addListener(details => {
-    if (details.reason == 'install')
-        chrome.tabs.create({ url: 'https://chatgpt.com/' })
+    if (details.reason == 'install') // to exclude updates
+        chrome.tabs.create({ url: chatgptURL })
 })
 
 // Sync SETTINGS to activated tabs
@@ -29,13 +32,11 @@ chrome.runtime.onMessage.addListener(async req => {
     if (req.action == 'showAbout') {
         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: 'https://chatgpt.com/' })
-        if (activeTab != chatgptTab) await new Promise(resolve => // after new tab loads
-            chrome.tabs.onUpdated.addListener(async function statusListener(tabId, info) {
-                if (tabId == chatgptTab.id && info.status == 'complete') {
-                    chrome.tabs.onUpdated.removeListener(statusListener)
-                    setTimeout(resolve, 2500)
-        }}))
-        chrome.tabs.sendMessage(chatgptTab.id, { action: 'showAbout' })
+            : await chrome.tabs.create({ url: chatgptURL })
+        if (activeTab != chatgptTab) 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' }))
     }
 })

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.11
+// @version       2025.2.21
 // @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.6.2/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.7.0/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes