@kudoai/chatgpt.js 3.3.4 → 3.4.0

package/starters/chrome/docs/README.md

@@ -1,3 +1,5 @@
+<a id="top"></a>
+
 <div align="center">
     <h6>
         <picture>
@@ -26,7 +28,7 @@
 
 <br>
 
-<img src="../media/images/screenshots/extension-loaded.png">
+<img src="../images/screenshots/extension-loaded.png">
 
 ## ⚡ Installation
 
@@ -37,36 +39,38 @@
 3. Visit `chrome://extensions` in Chrome (or any Chromium browser)
 
 4. Ensure **Develper mode** toggle is activated<br>
-![](../media/images/screenshots/developer-mode-toggle.png)
+![](../images/screenshots/developer-mode-toggle.png)
 
 5. Click **Load unpacked**<br><br>
-<img src="../media/images/screenshots/load-unpacked-button.png">
+<img src="../images/screenshots/load-unpacked-button.png">
 <br>
 
 6. In pop-up window, select the **extension** folder > click **Select Folder**<br><br><br>
-<img src="../media/images/screenshots/select-extension-folder.png"><br><br>
+<img src="../images/screenshots/select-extension-folder.png"><br><br>
 
 That's it! **ChatGPT Extension** will now appear in extension list:
 
 <br>
 
-<img src="../media/images/screenshots/chatgpt-extension-in-list.png">
+<img src="../images/screenshots/chatgpt-extension-in-list.png">
 
 <p><br>
 
-**💡 TIP:** _To reflect changes from source code, click **Reload** on extension tile + reload any Chrome tabs extension scripts are running on:_
+**💡 TIP:** _To reflect changes from source code, click **Reload** on extension tile + reload any Chrome tabs content scripts are running on:_
 
 <div align="center">
 
 <br>
 
-<img src="../media/images/screenshots/reload-extension-button.png">
-<img src="../media/images/screenshots/reload-page-button.png">
+<img src="../images/screenshots/reload-extension-button.png">
+<img src="../images/screenshots/reload-page-button.png">
 
 <p><br>
 
 </div>
 
+_For advanced Chrome API methods, see: https://developer.chrome.com/docs/extensions/reference/api_
+
 ## 🤖 Made with chatgpt.js
 
 These are some of the extensions featured by Google that use chatgpt.js:
@@ -90,4 +94,4 @@ These are some of the extensions featured by Google that use chatgpt.js:
 
 #
 
-<a href="https://github.com/KudoAI/chatgpt.js-chrome-starter/issues">Get Help</a> / <a href="#">Back to top ↑</a>
+<a href="https://github.com/KudoAI/chatgpt.js-chrome-starter/issues">Get Help</a> / <a href="#top">Back to top ↑</a>

package/starters/chrome/extension/components/icons.js

@@ -0,0 +1,32 @@
+// Requires lib/dom.js
+
+window.icons = {
+
+    dependencies: {
+        import(dependencies) { // { app }
+            for (const name in dependencies) this[name] = dependencies[name] }
+    },
+
+    create({ name, size = 16, width, height, ...additionalAttrs }) {
+        const iconData = icons[name],
+              iconAttrs = { width: width || size, height: height || size, ...additionalAttrs }
+        if (iconData.type == 'svg') {
+            const svg = dom.create.svgElem('svg', { viewBox: iconData.viewBox, ...iconAttrs  })
+            iconData.elems.forEach(([tag, attrs]) => svg.append(dom.create.svgElem(tag, attrs)))
+            return svg
+        } else // img w/ src
+            return dom.create.elem('img', { src: iconData.src, ...iconAttrs })
+    },
+
+    plus: {
+        type: 'svg',  viewBox: '0 0 1024 1024',
+        elems: [
+            [ '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' }]
+        ]
+    },
+
+    questionMark: {
+        type: 'png',
+        get src() { return `${icons.dependencies.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
+    }
+};

package/starters/chrome/extension/components/modals.js

@@ -0,0 +1,121 @@
+// Requires lib/chatgpt.js + lib/dom.js
+
+window.modals = {
+    stack: [], // of types of undismissed modals
+
+    dependencies: {
+        import(dependencies) { // { app, siteAlert }
+            for (const name in dependencies) this[name] = dependencies[name] }
+    },
+
+    open(modalType) {
+        this.stack.unshift(modalType) // add to stack
+        const modal = this[modalType]() // show modal
+        modal.classList.add('chatgpt-infinity-modal')
+        modal.onmousedown = this.dragHandlers.mousedown
+        dom.fillStarryBG(modal) // fill BG w/ rising stars
+        this.observeRemoval(modal, modalType) // to maintain stack for proper nav
+    },
+
+    observeRemoval(modal, modalType) { // to maintain stack for proper nav
+        const modalBG = modal.parentNode
+        new MutationObserver(([mutation], obs) => {
+            mutation.removedNodes.forEach(removedNode => { if (removedNode == modalBG) {
+                if (this.stack[0] == modalType) { // new modal not launched, implement nav back logic
+                    this.stack.shift() // remove this modal type from stack
+                    const prevModalType = this.stack[0]
+                    if (prevModalType) { // open it
+                        this.stack.shift() // remove type from stack since re-added on open
+                        this.open(prevModalType)
+                    }
+                }
+                obs.disconnect()
+            }})
+        }).observe(modalBG.parentNode, { childList: true, subtree: true })
+    },
+
+    dragHandlers: {
+        mousedown(event) { // find modal, attach listeners, init XY offsets
+            if (event.button != 0) return // prevent non-left-click drag
+            if (getComputedStyle(event.target).cursor == 'pointer') return // prevent drag on interactive elems
+            modals.dragHandlers.draggableElem = event.currentTarget
+            modals.dragHandlers.draggableElem.style.cursor = 'grabbing'
+            event.preventDefault(); // prevent sub-elems like icons being draggable
+            ['mousemove', 'mouseup'].forEach(event => document.addEventListener(event, modals.dragHandlers[event]))
+            const draggableElemRect = modals.dragHandlers.draggableElem.getBoundingClientRect()
+            modals.dragHandlers.offsetX = event.clientX - draggableElemRect.left +21
+            modals.dragHandlers.offsetY = event.clientY - draggableElemRect.top +12
+        },
+
+        mousemove(event) { // drag modal
+            if (modals.dragHandlers.draggableElem) {
+                const newX = event.clientX - modals.dragHandlers.offsetX,
+                      newY = event.clientY - modals.dragHandlers.offsetY
+                Object.assign(modals.dragHandlers.draggableElem.style, { left: `${newX}px`, top: `${newY}px` })
+            }
+        },
+
+        mouseup() { // remove listeners, reset modals.dragHandlers.draggableElem
+            modals.dragHandlers.draggableElem.style.cursor = 'inherit';
+            ['mousemove', 'mouseup'].forEach(event =>
+                document.removeEventListener(event, modals.dragHandlers[event]))
+            modals.dragHandlers.draggableElem = null
+        }
+    },
+
+    about() {
+
+        // Init styles
+        const headingStyle = 'font-size: 1.15rem',
+              pStyle = 'position: relative ; left: 3px',
+              pBrStyle = 'position: relative ; left: 4px ',
+              aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple
+
+        // Init buttons
+        const modalBtns = [
+            function getSupport(){ modals.safeWinOpen(`${modals.dependencies.app.urls.gitHub}/issues`) },
+            function rateUs() { modals.safeWinOpen(`${modals.dependencies.app.urls.gitHub}/discussions`) },
+            function moreAiExtensions(){ modals.safeWinOpen(modals.dependencies.app.urls.relatedExtensions) }
+        ]
+
+        // Show modal
+        const aboutModal = this.dependencies.siteAlert(
+            `${this.dependencies.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            `<span style="${headingStyle}"><b>🏷️ <i>Version</i></b>: </span>`
+                + `<span style="${pStyle}">${this.dependencies.app.version}</span>\n`
+            + `<span style="${headingStyle}"><b>⚡ <i>Powered by</i></b>: </span>`
+                + `<span style="${pStyle}">`
+                    + `<a style="${aStyle}" href="${this.dependencies.app.urls.chatgptJS}" target="_blank"`
+                        + ' rel="noopener">chatgpt.js</a></span>\n'
+            + `<span style="${headingStyle}"><b>📜 <i>Open source code</i></b>:</span>\n`
+                + `<span style="${pBrStyle}"><a href="${this.dependencies.app.urls.gitHub}" target="_blank"`
+                    + ` rel="nopener">${this.dependencies.app.urls.gitHub}</a></span>`,
+            modalBtns, '', 451
+        )
+
+        // Format text
+        aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px'
+        aboutModal.querySelector('p').style.cssText = 'text-align: center'
+
+        // Hack buttons
+        aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
+        aboutModal.querySelectorAll('button').forEach(btn => {
+            btn.style.cssText = 'cursor: pointer !important ; height: 43px'
+
+            // Prepend emoji
+            if (/support/i.test(btn.textContent))
+                btn.textContent = '🧠 ' + btn.textContent
+            else if (/rate/i.test(btn.textContent))
+                btn.textContent = '⭐ ' + btn.textContent
+            else if (/extensions/i.test(btn.textContent))
+                btn.textContent = '🧠 ' + btn.textContent
+
+            // Hide Dismiss button
+            else btn.style.display = 'none'
+        })
+
+        return aboutModal
+    },
+
+    safeWinOpen(url) { open(url, '_blank', 'noopener') } // to prevent backdoor vulnerabilities
+};

package/starters/chrome/extension/content.js

@@ -1,62 +1,136 @@
 // NOTE: This script relies on the powerful chatgpt.js library @ https://chatgpt.js.org
 // © 2023–2024 KudoAI & contributors under the MIT license
-// Source: https://github.com/KudoAI/chatgpt.js
-// Latest minified release: https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js/chatgpt.min.js
 
 (async () => {
 
-    // Import libs
-    const { config, settings } = await import(chrome.runtime.getURL('lib/settings-utils.js'));
-    await import(chrome.runtime.getURL('lib/chatgpt.js'));
-
-    // Add Chrome action msg listener
-    chrome.runtime.onMessage.addListener((request) => {
-        if (request.action === 'notify') notify(request.msg, request.position);
-        else if (request.action === 'alert') alert(request.title, request.msg, request.btns);
-        else if (typeof window[request.action] === 'function') {
-            const args = Array.isArray(request.args) ? request.args // preserve array if supplied
-                       : request.args !== undefined ? [request.args] : []; // convert to array if single or no arg
-            window[request.action](...args); // call expression functions
-        }
-        return true;
-    });
+    // Import JS resources
+    for (const resource of ['components/modals.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js'])
+        await import(chrome.runtime.getURL(resource))
 
-    await chatgpt.isLoaded();
-    chatgpt.printAllFunctions(); // to console
-    settings.load('skipAlert').then(() => {
-        if (!config.skipAlert) {
-            chatgpt.alert('≫ ChatGPT extension loaded! 🚀', // title
-                'Success! Press Ctrl+Shift+J to view all chatgpt.js methods.', // msg
-                function getHelp() { // button
-                    window.open(config.ghRepoURL + '/issues', '_blank', 'noopener'); },
-                function dontShowAgain() { // checkbox
-                    settings.save('skipAlert', !config.skipAlert); }
-    );}});
+    // Init ENV context
+    const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
 
-    // Your code here...
-    // Your code here...
-    // Your code here...
-    // Your code here...
-    // Your code here...
-    // Your code here...
+    // Import APP data
+    const { app } = await chrome.storage.sync.get('app')
+    modals.dependencies.import({ app, siteAlert })
+
+    // Add CHROME MSG listener
+    chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html
+        if (req.action == 'notify')
+            notify(...['msg', 'pos', 'notifDuration', 'shadow'].map(arg => req.options[arg]))
+        else if (req.action == 'alert')
+            siteAlert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => req.options[arg]))
+        else if (req.action == 'showAbout') chatgpt.isLoaded().then(() => { modals.open('about') })
+        else if (req.action == 'syncConfigToUI') syncConfigToUI(req.options)
+    })
+
+    // Init SETTINGS
+    await settings.load(Object.keys(settings.controls), 'skipAlert')
 
     // Define FEEDBACK functions
 
-    function notify(msg, position = '', notifDuration = '', shadow = '') {
-        chatgpt.notify(`${ config.appSymbol } ${ msg }`, position, notifDuration,
-            shadow || chatgpt.isDarkMode() ? '' : 'shadow' ); }
+    function notify(msg, pos = '', notifDuration = '', shadow = '') {
 
-    function alert(title = '', msg = '', btns = '', checkbox = '', width = '') {
-        return chatgpt.alert(`${ config.appSymbol } ${ title }`, msg, btns, checkbox, width );}
+        // Strip state word to append colored one later
+        const foundState = ['ON', 'OFF'].find(word => msg.includes(word))
+        if (foundState) msg = msg.replace(foundState, '')
+
+        // Show notification
+        siteAlert(`${app.symbol} ${msg}`, pos, notifDuration,
+            shadow || chatgpt.isDarkMode() ? '' : 'shadow' )
+        const notif = document.querySelector('.chatgpt-notif:last-child')
+
+        // Append styled state word
+        if (foundState) {
+            const styledStateSpan = document.createElement('span')
+            styledStateSpan.style.cssText = `color: ${
+                foundState == 'OFF' ? '#ef4848 ; text-shadow: rgba(255, 169, 225, 0.44) 2px 1px 5px'
+                                    : '#5cef48 ; text-shadow: rgba(255, 250, 169, 0.38) 2px 1px 5px' }`
+            styledStateSpan.append(foundState) ; notif.append(styledStateSpan)
+        }
+    }
+
+    function siteAlert(title = '', msg = '', btns = '', checkbox = '', width = '') {
+        const alertID = chatgpt.alert(title, msg, btns, checkbox, width)
+        return document.getElementById(alertID).firstChild
+    }
 
     // Define SYNC function
 
-    syncExtension = () => {
-        settings.load('extensionDisabled').then(() => {
-            if (config.extensionDisabled) {
-                // remove your hacks
-            } else {
-                // sync each potentially updated setting passed to settings.load()
-    }});};
+    async function syncConfigToUI(options) { // eslint-disable-line
+        await settings.load('extensionDisabled', Object.keys(settings.controls)) // load from Chrome storage to content.js config
+        if (config.extensionDisabled) {
+            // Remove all hacks
+        } else {
+            // Add/remove hacks to reflect each potentially updated setting per settings.controls in lib/settings.mjs
+            // e.g. if you created toolbar popup toggle to hide ChatGPT footer using hiddenFooter key...
+            // ...here you would use options?.updatedKey == 'hiddenFooter' && config.hiddenFooter...
+            // ...to conditionally append/remove hidden footer style...
+            // ...(initial style creation + append if config.hiddenFooter would go in main routine)
+        }
+    }
+
+    // Run MAIN routine
+
+    chatgpt.printAllFunctions() // to console
+
+    // CHILL a bit if your hacks depend on delayed DOM content
+    await chatgpt.isLoaded()
+    await new Promise(resolve => setTimeout(resolve, 500)) // sleep .5s
+
+    // Add/update TWEAKS style
+    const tweaksStyleUpdated = 1732627011377 // timestamp of last edit for this file's tweaksStyle
+    let tweaksStyle = document.getElementById('tweaks-style') // try to select existing style (from your other extensions)
+    if (!tweaksStyle || parseInt(tweaksStyle.getAttribute('last-updated')) < tweaksStyleUpdated) {
+        if (!tweaksStyle) { // outright missing, create/id/attr/append it first
+            tweaksStyle = dom.create.elem('style', {
+                id: 'tweaks-style', 'last-updated': tweaksStyleUpdated.toString() })
+            document.head.append(tweaksStyle)
+        }
+        tweaksStyle.innerText = (
+            '[class$="-modal"] { z-index: 13456 ; position: absolute }' // to be click-draggable
+          + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+          + '.chatgpt-modal button {'
+              + 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels
+              + 'border-radius: 0 !important ;' // square borders
+              + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
+              + 'cursor: pointer !important ;' // add finger cursor
+              + 'padding: 5px !important ; min-width: 102px }' // resize
+          + '.chatgpt-modal button:hover {' // add zoom, re-scheme
+              + 'transform: scale(1.055) ; color: black !important ;'
+              + `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }`
+          + ( !env.browser.isMobile ? '.modal-buttons { margin-left: -13px !important }' : '' )
+        )
+    }; // eslint-disable-line
+
+    // Add STARS styles for modals
+    ['black', 'white'].forEach(color => document.head.append(
+        dom.create.elem('link', { rel: 'stylesheet',
+            href: `https://assets.aiwebextensions.com/styles/css/${color}-rising-stars.min.css?v=542104c`
+    })))
+
+    if (config.extensionDisabled) return
+
+    if (!config.skipAlert) // alert to extension load
+        chatgpt.alert('≫ ChatGPT extension loaded! 🚀', // title
+            'Success! Press Ctrl+Shift+J to view all chatgpt.js methods.', // msg
+            function getHelp() { // button
+                chrome.tabs.create({ url: `${app.urls.gitHub}/issues` }) },
+            function dontShowAgain() { // checkbox
+                settings.save('skipAlert', !config.skipAlert) }
+        )
+
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
+    // Your code here...
 
-})();
+})()