@kudoai/chatgpt.js 3.3.5 → 3.5.0

package/starters/chrome/docs/README.md

@@ -28,7 +28,7 @@
 
 <br>
 
-<img src="../media/images/screenshots/extension-loaded.png">
+<img src="../images/screenshots/extension-loaded.png">
 
 ## ⚡ Installation
 
@@ -39,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:

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

@@ -0,0 +1,31 @@
+// Requires lib/dom.js
+
+window.icons = {
+    imports: {
+        import(deps) { // { app }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    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.imports.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
+    }
+};

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

@@ -0,0 +1,148 @@
+// Requires lib/chatgpt.js + lib/dom.js
+
+window.modals = {
+    stack: [], // of types of undismissed modals
+    get class() { return `${this.imports.app.cssPrefix}-modal` },
+
+    imports: {
+        import(deps) { // { app, env }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    alert(title = '', msg = '', btns = '', checkbox = '', width = '') { // generic one from chatgpt.alert()
+        const alertID = chatgpt.alert(title, msg, btns, checkbox, width),
+              alert = document.getElementById(alertID).firstChild
+        this.init(alert) // add classes + starry bg
+        return alert
+    },
+
+    open(modalType) {
+        const modal = this[modalType]() // show modal
+        this.stack.unshift(modalType) // add to stack
+        this.init(alert) // add classes + starry bg
+        this.observeRemoval(modal, modalType) // to maintain stack for proper nav
+    },
+
+    init(modal) {
+        if (!this.styles) this.stylize() // to init/append stylesheet
+        modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+        dom.fillStarryBG(modal) // add starry bg
+    },
+
+    stylize() {
+        if (!this.styles) {
+            this.styles = dom.create.elem('style') ; this.styles.id = `${this.class}-styles`
+            document.head.append(this.styles)
+        }
+        this.styles.innerText = (
+            `.${this.class} {` // modals
+              + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'
+                  + 'Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif ;'
+              + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
+              + `color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `background-image: linear-gradient(180deg, ${
+                     this.imports.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
+                                                            : '#b6ebff -296px, white 171px' }) }`
+          + `.${this.class} [class*=modal-close-btn] {`
+              + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
+              + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
+          + `.${this.class} [class*=modal-close-btn] svg { height: 10px }`
+          + `.${this.class} [class*=modal-close-btn] path {`
+              + `${ this.imports.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
+                                                           : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+          + ( this.imports.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
+                `.${this.class} [class*=modal-close-btn]:hover path { stroke: black ; fill: black }` : '' )
+          + `.${this.class} [class*=modal-close-btn]:hover { background-color: #f2f2f2 }` // hover underlay
+          + `.${this.class} [class*=modal-close-btn] svg { margin: 11.5px }` // center SVG for hover underlay
+          + `.${this.class} a {`
+              + `color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
+          + `.${this.class} h2 { font-weight: bold }`
+          + `.${this.class} button {`
+              + 'font-size: 14px ; 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
+              + `border: 1px solid ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + 'padding: 8px !important ; min-width: 102px }' // resize
+          + `.${this.class} button:hover {` // add zoom, re-scheme
+              + 'transform: scale(1.055) ; color: black !important ;'
+              + `background-color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+          + ( !this.imports.env.browser.isMobile ?
+                `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+          + `.about-em { color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
+        )
+    },
+
+    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 1st
+                    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 })
+    },
+
+    about() {
+
+        // Show modal
+        const aboutModal = this.alert(
+            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            '🧠 Author: ' // msg
+                + `<a href="${this.imports.app.author.url}">${this.imports.app.author.name}</a> `
+                    + `& <a href="${this.imports.app.urls.contributors}">contributors</a>\n`
+            + `🏷️ Version: <span class="about-em">${this.imports.app.version}</span>\n`
+            + '📜 Open source code: '
+                + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
+                    + this.imports.app.urls.gitHub + '</a>\n'
+            + '⚡ Powered by: '
+                + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
+            [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
+            '', 656 // modal width
+        )
+
+        // Format text
+        aboutModal.querySelector('h2').style.cssText = (
+            'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
+        aboutModal.querySelector('p').style.cssText = (
+            'text-align: center ; overflow-wrap: anywhere ;'
+          + `margin: ${ this.imports.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
+
+        // Hack buttons
+        aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
+        aboutModal.querySelectorAll('button').forEach(btn => {
+            btn.style.cssText = 'height: 55px ; min-width: 136px ; text-align: center'
+
+            // Replace buttons w/ clones that don't dismiss modal
+            const btnClone = btn.cloneNode(true)
+            btn.parentNode.replaceChild(btnClone, btn) ; btn = btnClone
+            btn.onclick = () => this.safeWinOpen(
+                btn.textContent == 'Get Support' ? `${modals.imports.app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${modals.imports.app.urls.gitHub}/discussions`
+              : modals.imports.app.urls.relatedExtensions
+            )
+
+            // 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,37 +1,111 @@
 // 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
+    // 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))
+
+    // Init ENV context
+    const env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: getScheme() }}
+    env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
+
+    // Import APP data
+    const { app } = await chrome.storage.sync.get('app')
+
+    // Export DEPENDENCIES to imported resources
+    dom.imports.import({ env }) // for env.ui.scheme
+    modals.imports.import({ app, env }) // for app data + env.ui.scheme
+
+    // 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')
+            modals.alert(...['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 FUNCTIONS
+
+    function notify(msg, pos = '', notifDuration = '', shadow = '') {
+
+        // 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
+        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.ui.scheme == 'dark' ? '' : 'shadow')
+        const notif = document.querySelector('.chatgpt-notif:last-child')
+
+        // Append styled state word
+        if (foundState) {
+            const styledStateSpan = dom.create.elem('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)
+        }
+    }
+
+    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)
         }
-        return true;
-    });
+    }
+
+    function getScheme() {
+        return document.documentElement.className
+            || (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
+    }
+
+    // Run MAIN routine
+
+    chatgpt.printAllFunctions() // to console
 
-    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); }
-    );}});
+    // CHILL a bit if your hacks depend on delayed DOM content
+    await chatgpt.isLoaded()
+    await new Promise(resolve => setTimeout(resolve, 500)); // sleep .5s
+
+    // Add STARS styles for modals
+    ['black', 'white'].forEach(color => document.head.append(
+        dom.create.elem('link', { rel: 'stylesheet',
+            href: `https://assets.aiwebextensions.com/styles/rising-stars/dist/${
+                color}.min.css?v=0cde30f9ae3ce99ae998141f6e7a36de9b0cc2e7`
+    })))
+
+    if (config.extensionDisabled) return
+
+    if (!config.skipAlert) // alert to extension load
+        modals.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) }
+        )
+
+    // Monitor SCHEME PREF CHANGES to update modal colors + env.ui.scheme for your use
+    new MutationObserver(handleSchemePrefChange).observe( // for site scheme pref changes
+        document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
+        'change', () => requestAnimationFrame(handleSchemePrefChange))
+    function handleSchemePrefChange() {
+        const displayedScheme = getScheme()
+        if (env.ui.scheme != displayedScheme) { env.ui.scheme = displayedScheme ;  modals.stylize() }
+    }
 
     // Your code here...
     // Your code here...
@@ -39,24 +113,11 @@
     // 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...
 
-    // Define FEEDBACK functions
-
-    function notify(msg, position = '', notifDuration = '', shadow = '') {
-        chatgpt.notify(`${ config.appSymbol } ${ msg }`, position, notifDuration,
-            shadow || chatgpt.isDarkMode() ? '' : 'shadow' ); }
-
-    function alert(title = '', msg = '', btns = '', checkbox = '', width = '') {
-        return chatgpt.alert(`${ config.appSymbol } ${ title }`, msg, btns, checkbox, width );}
-
-    // Define SYNC function
-
-    syncExtension = () => {
-        settings.load('extensionDisabled').then(() => {
-            if (config.extensionDisabled) {
-                // remove your hacks
-            } else {
-                // sync each potentially updated setting passed to settings.load()
-    }});};
-
-})();
+})()