@kudoai/chatgpt.js 3.3.5 → 3.4.0

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

@@ -0,0 +1,138 @@
+(async () => {
+
+    // 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 = { 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.dependencies.import({ app }) // for src's using app.urls.assetHost
+
+    // Define FUNCTIONS
+
+    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 }) }
+
+    const sync = {
+        fade() {
+
+            // Update toolbar icon
+            const iconDimensions = [16, 32, 64, 128], iconPaths = {}
+            iconDimensions.forEach(dimension => iconPaths[dimension] = `../icons/${
+                config.extensionDisabled ? 'faded/' : '' }icon${dimension}.png` )
+            chrome.action.setIcon({ path: iconPaths })
+
+            // 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')
+                })
+        },
+
+        configToUI(options) { return sendMsgToActiveTab('syncConfigToUI', options) }
+    }
+
+    // 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)
+        Object.keys(sync).forEach(key => sync[key]()) // sync fade + storage to UI
+        notify(`${chrome.runtime.getManifest().name} ${ this.checked ? 'ON' : 'OFF' }`)
+    }
+
+    // Create CHILD menu entries on chatgpt.com
+    if (env.site == 'chatgpt') {
+        await settings.load(settings.availKeys)
+
+        // 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' }),
+                  menuLabel = dom.create.elem('label', { class: 'menu-icon' }),
+                  menuLabelSpan = document.createElement('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')
+            }
+
+            // 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 = () => {
+                    settings.save(key, !config[key]) ; sync.configToUI({ updatedKey: key })
+                    notify(`${settings.controls[key].label} ${ /disabled|hidden/i.test(key) != config[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
+    }
+
+    // Create/append FOOTER container
+    const footer = document.createElement('footer')
+    document.body.append(footer)
+
+    // Create/append CHATGPT.JS footer logo
+    const cjsDiv = dom.create.elem('div', { class: 'chatgpt-js' })
+    const cjsLogo = dom.create.elem('img', {
+        title: 'Powered by chatgpt.js',
+        src: `${app.urls.cjsMediaHost}/images/badges/powered-by-chatgpt.js-faded.png?a439ab6` })
+    cjsLogo.onmouseover = cjsLogo.onmouseout = event => cjsLogo.src = `${
+        app.urls.cjsMediaHost}/images/badges/powered-by-chatgpt.js${ event.type == 'mouseover' ? '' : '-faded' }.png?a439ab6`
+    cjsLogo.onclick = () => chrome.tabs.create({ url: app.urls.chatgptJS })
+    cjsDiv.append(cjsLogo) ; footer.append(cjsDiv)
+
+    // 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' })
+    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() }
+    moreExtensionsSpan.append(moreExtensionsIcon) ; footer.append(moreExtensionsSpan)
+
+    // Hide loading spinner
+    document.querySelectorAll('[class^="loading"]').forEach(elem => elem.style.display = 'none')
+
+})()

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

@@ -1,9 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
-        <link href="/popup/style.css" rel="stylesheet">
+        <link href="style.css" rel="stylesheet">
+        <meta charset="UTF-8">
     </head>
     <body>
+        <div class="loading-bg">
+            <span class="loading-spinner"></span>
+        </div>
         <div class="menu-header">
             <div class="logo">
                 <img width=26 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@f0cdfc9/starters/chrome/extension/icons/icon32.png">
@@ -16,47 +20,6 @@
                 </label>
             </div>
         </div>
-        <!-- Sub-menu items
-        <div class="menu">
-            <div class="menu-item menu-area">
-                <label class="toggle-switch menu-icon">
-                    <input type="checkbox">
-                    <span class="slider"></span>
-                </label>
-                <span >Toggle Label 1</span>
-            </div>
-            <div class="menu-item menu-area">
-                <label class="toggle-switch menu-icon">
-                    <input type="checkbox">
-                    <span class="slider"></span>
-                </label>
-                <span >Toggle Label 2</span>
-            </div>
-            <div class="menu-item menu-area">
-                <label class="toggle-switch menu-icon">
-                    <input type="checkbox">
-                    <span class="slider"></span>
-                </label>
-                <span >Toggle Label 3</span>
-            </div>
-        </div>
-        -->
-        <footer>
-            <div class="chatgpt-js"><a title="Powered by chatgpt.js" href="https://chatgpt.js.org" target="_blank" rel="noopener"><img src="https://media.chatgptjs.org/images/badges/powered-by-chatgpt.js-faded.png?main"></a></div>
-            <span title="Check for Updates" class="menu-icon menu-area" style="right:58px ; padding-top: 7px" >
-                <img width=15 height=15 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@258bec1/starters/chrome/media/images/icons/refresh/icon16.png" style="margin-top: 0.04rem">
-            </span>
-            <span title="Support" class="menu-icon menu-area" style="right:30px ; padding-top: 9px " >
-                <a title="Support" href="https://github.com/KudoAI/chatgpt.js-chrome-starter/issues" target="_blank" rel="noopener">
-                    <img width=15 height=13 src="https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@258bec1/starters/chrome/media/images/icons/question-mark/icon16.png" style="margin-bottom: 0.04rem">
-                </a>
-            </span>
-            <span title="More ChatGPT add-ons" class="menu-icon menu-area" style="right:2px ; padding-top: 7px " >
-                <a title="More ChatGPT add-ons" href="https://github.com/adamlui/chatgpt-userscripts" target="_blank" rel="noopener">
-                    <svg width=16 height=16 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M899.901 600.38H600.728v299.173c0 74.383-179.503 74.383-179.503 0V600.38H122.051c-74.384 0-74.384-179.503 0-179.503h299.173V121.703c0-74.384 179.503-74.384 179.503 0v299.174H899.9c74.385 0 74.385 179.503.001 179.503z"/></svg>
-                </a>
-            </span>
-        </footer>
-        <script src="popup.js"></script>
+        <script src="controller.js"></script>
     </body>
 </html>

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

@@ -1,6 +1,6 @@
 /* General size */
-html { height: fit-content }
-body { width: max-content ; height: 85px !important ; margin: 0 }
+html { height: fit-content ; min-height: 50px }
+body { width: max-content ; margin: 0 ; overflow: clip }
 
 /* General font */
 body, button, input, select, textarea {
@@ -10,11 +10,20 @@ body, button, input, select, textarea {
 a { color: #999 ; text-decoration: none }
 a:focus, a:hover { text-decoration: underline ; color: inherit }
 
+/* Loading elems */
+.loading-bg { background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111; }
+.loading-spinner {
+    border: 8px solid #f3f3f3 ; border-top: 8px solid #3498db ; border-radius: 50% ;
+    width: 15vh ; height: 15vh ; animation: spin 1s linear infinite ;
+    position: absolute ; top: calc(50% - 7.5vh - 8px) ; left: calc(50% - 7.5vh)
+}
+@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}
+
 /* Header */
 .menu-header {
     border-bottom: solid 1px lightgrey ; padding: 5px 5px 5px 0; margin: 0 ;
     display: flex; background: white ; align-items: center }
-.logo { margin: 4px 10px 4px 12px }
+.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 }
@@ -46,9 +55,9 @@ a:focus, a:hover { text-decoration: underline ; color: inherit }
 .toggle-switch input[type="checkbox"]:checked + .slider::before { transform: translateX(9px) } /* move knob right when toggled */
 
 /* Footer */
-footer { font-size: 12px ; text-align: center ; color: #999 ; background: #f5f5f5 ; height: 40px ; padding-top: 3px }
-footer > .menu-icon { position: absolute ; bottom: 4px ; opacity: 0.7 }
-.chatgpt-js { position: absolute ; bottom: 0.65rem ; left: 0.7rem }
+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 }
 
 /* Master toggle effects */
 .disabled { opacity: 0.3 ; pointer-events: none }

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

@@ -0,0 +1,38 @@
+// Init APP data
+const app = {
+    symbol: '🤖', version: chrome.runtime.getManifest().version,
+    urls: {
+        assetHost: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js-chrome-starter',
+        cjsMediaHost: 'https://media.chatgptjs.org',
+        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.sync.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/' })
+})
+
+// Sync settings to activated tabs
+chrome.tabs.onActivated.addListener(activeInfo =>
+    chrome.tabs.sendMessage(activeInfo.tabId, { action: 'syncConfigToUI' }))
+
+// Show ABOUT modal on ChatGPT when toolbar button clicked
+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' })
+    }
+})

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

@@ -3,13 +3,13 @@
 // @description   A Greasemonkey template to start using chatgpt.js like a boss
 // @author        chatgpt.js
 // @namespace     https://chatgpt.js.org
-// @version       2024.10.11
+// @version       2024.12.20
 // @license       MIT
+// @icon          https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@3.4.0/starters/greasemonkey/media/images/icons/robot/icon48.png
+// @icon64        https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@3.4.0/starters/greasemonkey/media/images/icons/robot/icon64.png
 // @match         *://chatgpt.com/*
 // @match         *://chat.openai.com/*
-// @icon          https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@3.3.5/starters/greasemonkey/media/images/icons/robot/icon48.png
-// @icon64        https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@3.3.5/starters/greasemonkey/media/images/icons/robot/icon64.png
-// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.3.5/dist/chatgpt.min.js
+// @require       https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.4.0/dist/chatgpt.min.js
 // @grant         GM_getValue
 // @grant         GM_setValue
 // @noframes
@@ -22,22 +22,22 @@
 (async () => {
 
     // Init config
-    const config = { prefix: 'chatgptScript' }; loadSetting('skipAlert');
+    const config = { prefix: 'chatgptScript' } ; loadSetting('skipAlert')
 
     // Print chatgpt.js methods
-    await chatgpt.isLoaded(); chatgpt.printAllFunctions(); // to console
+    await chatgpt.isLoaded() ; chatgpt.printAllFunctions() // to console
 
     // Show alert
-    if (!config.skipAlert) {
+    if (!config.skipAlert)
         chatgpt.alert('≫ ChatGPT script loaded! 🚀', // title
             'Success! Press Ctrl+Shift+' // msg
                 + ( navigator.userAgent.indexOf('Firefox') > -1 ? 'K' : 'J' )
                 + ' to view all chatgpt.js functions.',
             function getHelp() { // button
-                window.open('https://github.kudoai.com/chatgpt.js-greasemonkey-starter/issues', '_blank', 'noopener'); },
+                window.open('https://github.kudoai.com/chatgpt.js-greasemonkey-starter/issues', '_blank', 'noopener') },
             function dontShowAgain() { // checkbox
-                saveSetting('skipAlert', !config.skipAlert); });
-    }
+                saveSetting('skipAlert', !config.skipAlert) }
+        )
 
     // Your code here...
     // Your code here...
@@ -47,7 +47,7 @@
     // Your code here...
 
     // Define HELPER functions
-    function loadSetting(...keys) { keys.forEach(key => { config[key] = GM_getValue(config.prefix + '_' + key, false); });}
-    function saveSetting(key, value) { GM_setValue(config.prefix + '_' + key, value); config[key] = value; }
+    function loadSetting(...keys) { keys.forEach(key => config[key] = GM_getValue(config.prefix + '_' + key, false)) }
+    function saveSetting(key, value) { GM_setValue(config.prefix + '_' + key, value) ; config[key] = value }
 
 })();

package/starters/greasemonkey/docs/README.md

@@ -5,3 +5,5 @@
 <br>
 
 <img src="../media/images/screenshots/chatgpt-userscript-on.png">
+
+_For advanced Greasemonkey API methods, see: https://wiki.greasespot.net/Greasemonkey_Manual:API_

package/starters/chrome/extension/background.js

@@ -1,14 +0,0 @@
-const allowedHosts = ['chatgpt.com', 'chat.openai.com'];
-
-// Add install/update actions
-chrome.runtime.onInstalled.addListener((details) => {
-    chrome.storage.local.set({ 'chatgptJS_extensionDisabled': false }); // auto-enable
-    if (details.reason == 'install') chrome.tabs.create({ url: 'https://chatgpt.com/' }); // open ChatGPT
-});
-
-// Sync extension state/settings when ChatGPT tab active
-chrome.tabs.onActivated.addListener((activeInfo) => {
-    chrome.tabs.get(activeInfo.tabId, (tab) => {
-        if (allowedHosts.includes(new URL(tab.url).hostname)) {
-            chrome.tabs.sendMessage(tab.id, { action: 'syncExtension' });
-}});});

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

@@ -1,24 +0,0 @@
-const config = {
-    prefix: 'chatgptJS', appSymbol: '🤖', appName: 'ChatGPT Extension',
-    ghRepoURL: 'https://github.kudoai.com/chatgpt.js-chrome-starter' };
-
-const settings = {
-
-    load: function() {
-        const keys = ( // original array if array, else new array from multiple args
-            Array.isArray(arguments[0]) ? arguments[0] : Array.from(arguments));
-        return Promise.all(keys.map((key) => { // resolve promise when all keys load
-            return new Promise((resolve) => { // resolve promise when single key value loads
-                chrome.storage.local.get(config.prefix + '_' + key, (result) => { // load from Chrome
-                    config[key] = result[config.prefix + '_' + key] || false; resolve();
-    });});}));},
-
-    save: function(key, value) {
-        const obj = {} ; obj[config.prefix + '_' + key] = value;
-        chrome.storage.local.set(obj); // save to Chrome
-        config[key] = value; // save to memory
-    }
-
-};
-
-export { config, settings };

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

@@ -1,92 +0,0 @@
-(async () => {
-
-    // Import settings-utils.js
-    const { config, settings } = await import(chrome.runtime.getURL('lib/settings-utils.js'));
-
-    // Initialize popup toggles
-    settings.load('extensionDisabled')
-        .then(function() { // restore extension/toggle states
-            masterToggle.checked = !config.extensionDisabled;
-            updateGreyness();
-        });
-
-    // Add main toggle click-listener
-    const toggles = document.querySelectorAll('input'),
-          masterToggle = toggles[0];
-    masterToggle.addEventListener('change', function() {    
-        settings.save('extensionDisabled', !this.checked);
-        syncExtension() ; updateGreyness();
-        notify(config.appName + ( this.checked ? ' ON' : ' OFF' ));
-    });
-
-    // Add update-check span click-listener
-    const updateSpan = document.querySelector('span[title*="update" i]');
-    updateSpan.addEventListener('click', () => {
-        window.close(); // popup
-        chrome.runtime.requestUpdateCheck((status, details) => {
-            alertToUpdate(status === 'update_available' ? details.version : '');
-    });});
-
-    // Add Support span click-listener
-    const supportLink = document.querySelector('a[title*="support" i]'),
-          supportSpan = supportLink.parentNode;
-    supportSpan.addEventListener('click', (event) => {
-        if (event.target == supportSpan) supportLink.click(); // to avoid double-toggle
-    });
-
-    // Add More Add-ons span click-listener
-    const moreAddOnsLink = document.querySelector('a[title*="more" i]'),
-          moreAddOnsSpan = moreAddOnsLink.parentNode;
-    moreAddOnsSpan.addEventListener('click', (event) => {
-        if (event.target == moreAddOnsSpan) moreAddOnsLink.click(); // to avoid double-toggle
-    });
-
-    // Add Powered by chatgpt.js hover-listener
-    const chatGPTjsHostPath = 'https://media.chatgptjs.org/images/badges/',
-          chatGPTjsImg = document.querySelector('.chatgpt-js img');
-    chatGPTjsImg.addEventListener('mouseover', () => {
-        chatGPTjsImg.src = chatGPTjsHostPath + 'powered-by-chatgpt.js.png'; });
-    chatGPTjsImg.addEventListener('mouseout', () => {
-      chatGPTjsImg.src = chatGPTjsHostPath + 'powered-by-chatgpt.js-faded.png'; });
-
-    // Define FEEDBACK functions
-
-    function notify(msg, position) {
-        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-            chrome.tabs.sendMessage(tabs[0].id, { 
-                action: 'notify', msg: msg, position: position || 'bottom-right' });
-    });}
-    
-    function alertToUpdate(version) {
-        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-            chrome.tabs.sendMessage(tabs[0].id, { 
-                action: 'alertToUpdate', args: version });
-    });}
-
-    // Define SYNC functions
-
-    function syncExtension() {
-        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-            chrome.tabs.sendMessage(tabs[0].id, { action: 'syncExtension' });
-    });}
-
-    function updateGreyness() {
-
-        // Updated toolbar icon
-        const iconDimensions = [16, 32, 64, 128], iconPaths = {};
-        iconDimensions.forEach((dimension) => {
-            iconPaths[dimension] = '../icons/'
-                + (config.extensionDisabled ? 'faded/' : '')
-                + 'icon' + dimension + '.png';
-        });
-        chrome.action.setIcon({ path: iconPaths });
-
-        // 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');
-            });
-    }
-
-})();