Added app.cssPrefix to avoid potential selector pollution + modal styles ↞ [auto-sync from https://github.com/KudoAI/chatgpt.js-chrome-starter]

Author: kudo-sync-bot

starters/chrome/extension/components/modals.js

@@ -2,15 +2,17 @@
 
 window.modals = {
     stack: [], // of types of undismissed modals
+    get class() { return `${this.dependencies.app.cssPrefix}-modal` },
 
     dependencies: {
-        import(dependencies) { // { app }
+        import(dependencies) { // { app, env }
             for (const name in dependencies) this[name] = dependencies[name] }
     },
 
     alert(title = '', msg = '', btns = '', checkbox = '', width = '') {
         const alertID = chatgpt.alert(title, msg, btns, checkbox, width),
               alert = document.getElementById(alertID).firstChild
+        this.init(alert) // add class
         return alert
     },
 
@@ -23,6 +25,54 @@ window.modals = {
         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
+    },
+
+    stylize() {
+        if (!this.styles) {
+            this.styles = document.createElement('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.dependencies.env.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `background-image: linear-gradient(180deg, ${
+                     this.dependencies.env.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.dependencies.env.scheme == 'dark' ? 'stroke: white ; fill: white'
+                                                           : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+          + ( this.dependencies.env.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.dependencies.env.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.dependencies.env.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.dependencies.env.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+          + ( !this.dependencies.env.browser.isMobile ?
+                `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+          + `.about-em { color: ${ this.dependencies.env.scheme == 'dark' ? 'white' : 'green' } !important }`
+        )
+    },
+
     observeRemoval(modal, modalType) { // to maintain stack for proper nav
         const modalBG = modal.parentNode
         new MutationObserver(([mutation], obs) => {

starters/chrome/extension/content.js

@@ -7,9 +7,12 @@
     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 = { scheme: getScheme() }}
+
     // Import APP data
     const { app } = await chrome.storage.sync.get('app')
-    modals.dependencies.import({ app })
+    modals.dependencies.import({ app, env }) // for app data + env.scheme
 
     // Add CHROME MSG listener
     chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html
@@ -24,7 +27,7 @@
     // Init SETTINGS
     await settings.load(Object.keys(settings.controls), 'skipAlert')
 
-    // Define FEEDBACK functions
+    // Define FUNCTIONS
 
     function notify(msg, pos = '', notifDuration = '', shadow = '') {
 
@@ -47,8 +50,6 @@
         }
     }
 
-    // Define SYNC function
-
     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) {
@@ -62,6 +63,11 @@
         }
     }
 
+    function getScheme() {
+        return document.documentElement.className
+            || (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
+    }
+
     // Run MAIN routine
 
     chatgpt.printAllFunctions() // to console

starters/chrome/extension/service-worker.js

@@ -1,6 +1,6 @@
 // Init APP data
 const app = {
-    symbol: '🤖', version: chrome.runtime.getManifest().version,
+    version: chrome.runtime.getManifest().version, symbol: '🤖', cssPrefix: 'chatgpt-extension',
     urls: {
         assetHost: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js-chrome-starter',
         cjsMediaHost: 'https://media.chatgptjs.org',