Moved chatbar from content.js to lib/chatbar.js ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/chatgpt-widescreen]

kudo-sync-bot · kudo-sync-bot · commit af6130a035b7 · 2025-02-09T07:16:11.000-08:00
diff --git a/chromium/extension/content.js b/chromium/extension/content.js
@@ -7,8 +7,9 @@
 
     // Import JS resources
     for (const resource of [
-        'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'components/buttons.js', 'components/modals.js'])
-            await import(chrome.runtime.getURL(resource))
+        'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js',
+        'components/buttons.js', 'components/modals.js'
+    ]) await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
     const env = {
@@ -21,6 +22,7 @@
           { sites } = await chrome.storage.sync.get('sites')
 
     // Export DEPENDENCIES to imported resources
+    chatbar.imports.import({ env, sites }) // for env.site + sites.selectors
     dom.imports.import({ env }) // for env.ui.scheme
     modals.imports.import({ app, env }) // for app data + env.ui.scheme
     settings.imports.import({ env }) // to load/save active tab's settings using env.site
@@ -77,53 +79,6 @@
         }
     }
 
-    const chatbar = {
-
-        get() {
-            let chatbar = document.querySelector(sites[env.site].selectors.input)
-            const lvlsToParent = env.site == 'chatgpt' ? 3 : 2
-            for (let i = 0 ; i < lvlsToParent ; i++) chatbar = chatbar?.parentNode
-            return chatbar
-        },
-
-        isDark() {
-            return env.site != 'chatgpt' ? undefined
-                : getComputedStyle(document.getElementById('composer-background') || document.documentElement)
-                    .backgroundColor == 'rgb(48, 48, 48)'
-        },
-
-        isTall() {
-            return env.site == 'poe' ? true
-                : env.site == 'perplexity' ? this.get()?.getBoundingClientRect().height > 60
-                : /* chatgpt */ !!this.get()?.nextElementSibling
-        },
-
-        tweak() {
-            if (env.site != 'chatgpt') return
-            const chatbarDiv = chatbar.get() ; if (!chatbarDiv) return
-            const inputArea = chatbarDiv.querySelector(sites[env.site].selectors.input) ; if (!inputArea) return
-            if (chatgpt.canvasIsOpen()) inputArea.parentNode.style.width = '100%'
-            else if (!env.tallChatbar) { // narrow it to not clash w/ buttons
-                const widths = { chatbar: chatbarDiv.getBoundingClientRect().width }
-                const visibleBtnTypes = [...buttons.getTypes.visible(), 'send']
-                visibleBtnTypes.forEach(type =>
-                    widths[type] = buttons[type]?.getBoundingClientRect().width
-                            || document.querySelector(`${sites.chatgpt.selectors.btns.send}, ${
-                                sites.chatgpt.selectors.btns.stop}`)?.getBoundingClientRect().width || 0 )
-                const totalBtnWidths = visibleBtnTypes.reduce((sum, btnType) => sum + widths[btnType], 0)
-                inputArea.parentNode.style.width = `${ // expand to close gap w/ buttons
-                    widths.chatbar - totalBtnWidths -43 }px`
-                inputArea.style.width = '100%' // rid h-scrollbar
-            }
-        },
-
-        reset() { // all tweaks for popup master toggle-off
-            const chatbarDiv = chatbar.get() ; if (!chatbarDiv) return
-            const inputArea = chatbarDiv.querySelector(sites.chatgpt.selectors.input)
-            if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
-        }
-    }
-
     const toggle = {
 
         mode(mode, state = '') {
diff --git a/chromium/extension/lib/chatbar.js b/chromium/extension/lib/chatbar.js
@@ -0,0 +1,54 @@
+window.chatbar = {
+
+    imports: {
+        import(deps) { // { env, sites }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    get() {
+        const site = this.imports.env.site
+        let chatbar = document.querySelector(this.imports.sites[site].selectors.input)
+        const lvlsToParent = site == 'chatgpt' ? 3 : 2
+        for (let i = 0 ; i < lvlsToParent ; i++) chatbar = chatbar?.parentNode
+        return chatbar
+    },
+
+    isDark() {
+        return this.imports.env.site.site != 'chatgpt' ? undefined
+            : getComputedStyle(document.getElementById('composer-background') || document.documentElement)
+                .backgroundColor == 'rgb(48, 48, 48)'
+    },
+
+    isTall() {
+        const site = this.imports.env.site
+        return site == 'poe' ? true
+             : site == 'perplexity' ? this.get()?.getBoundingClientRect().height > 60
+             : /* chatgpt */ !!this.get()?.nextElementSibling
+    },
+
+    tweak() {
+        const site = this.imports.env.site ; if (site != 'chatgpt') return
+        const sites = this.imports.sites
+        const chatbarDiv = this.get() ; if (!chatbarDiv) return
+        const inputArea = chatbarDiv.querySelector(sites[site].selectors.input) ; if (!inputArea) return
+        if (chatgpt.canvasIsOpen()) inputArea.parentNode.style.width = '100%'
+        else if (!this.isTall()) { // narrow it to not clash w/ buttons
+            const widths = { chatbar: chatbarDiv.getBoundingClientRect().width }
+            const visibleBtnTypes = [...buttons.getTypes.visible(), 'send']
+            visibleBtnTypes.forEach(type =>
+                widths[type] = buttons[type]?.getBoundingClientRect().width
+                        || document.querySelector(`${sites.chatgpt.selectors.btns.send}, ${
+                            sites.chatgpt.selectors.btns.stop}`)?.getBoundingClientRect().width || 0 )
+            const totalBtnWidths = visibleBtnTypes.reduce((sum, btnType) => sum + widths[btnType], 0)
+            inputArea.parentNode.style.width = `${ // expand to close gap w/ buttons
+                widths.chatbar - totalBtnWidths -43 }px`
+            inputArea.style.width = '100%' // rid h-scrollbar
+        }
+    },
+
+    reset() { // all tweaks for popup master toggle-off
+        const chatbarDiv = this.get() ; if (!chatbarDiv) return
+        const inputArea = chatbarDiv.querySelector(this.imports.sites.chatgpt.selectors.input)
+        if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
+    }
+}
diff --git a/chromium/extension/manifest.json b/chromium/extension/manifest.json
@@ -18,7 +18,10 @@
   "action": { "default_popup": "popup/index.html" },
   "web_accessible_resources": [{
     "matches": [ "<all_urls>" ],
-    "resources": [ "components/buttons.js", "components/modals.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js" ]
+    "resources": [
+      "components/buttons.js", "components/modals.js",
+      "lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js"
+    ]
   }],
   "content_scripts": [{
     "matches": [ "https://chatgpt.com/*", "https://www.perplexity.ai/*", "https://poe.com/*" ],
diff --git a/firefox/extension/content.js b/firefox/extension/content.js
@@ -7,8 +7,9 @@
 
     // Import JS resources
     for (const resource of [
-        'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'components/buttons.js', 'components/modals.js'])
-            await import(chrome.runtime.getURL(resource))
+        'lib/chatbar.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js',
+        'components/buttons.js', 'components/modals.js'
+    ]) await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
     const env = {
@@ -21,6 +22,7 @@
           { sites } = await chrome.storage.sync.get('sites')
 
     // Export DEPENDENCIES to imported resources
+    chatbar.imports.import({ env, sites }) // for env.site + sites.selectors
     dom.imports.import({ env }) // for env.ui.scheme
     modals.imports.import({ app, env }) // for app data + env.ui.scheme
     settings.imports.import({ env }) // to load/save active tab's settings using env.site
@@ -77,53 +79,6 @@
         }
     }
 
-    const chatbar = {
-
-        get() {
-            let chatbar = document.querySelector(sites[env.site].selectors.input)
-            const lvlsToParent = env.site == 'chatgpt' ? 3 : 2
-            for (let i = 0 ; i < lvlsToParent ; i++) chatbar = chatbar?.parentNode
-            return chatbar
-        },
-
-        isDark() {
-            return env.site != 'chatgpt' ? undefined
-                : getComputedStyle(document.getElementById('composer-background') || document.documentElement)
-                    .backgroundColor == 'rgb(48, 48, 48)'
-        },
-
-        isTall() {
-            return env.site == 'poe' ? true
-                : env.site == 'perplexity' ? this.get()?.getBoundingClientRect().height > 60
-                : /* chatgpt */ !!this.get()?.nextElementSibling
-        },
-
-        tweak() {
-            if (env.site != 'chatgpt') return
-            const chatbarDiv = chatbar.get() ; if (!chatbarDiv) return
-            const inputArea = chatbarDiv.querySelector(sites[env.site].selectors.input) ; if (!inputArea) return
-            if (chatgpt.canvasIsOpen()) inputArea.parentNode.style.width = '100%'
-            else if (!env.tallChatbar) { // narrow it to not clash w/ buttons
-                const widths = { chatbar: chatbarDiv.getBoundingClientRect().width }
-                const visibleBtnTypes = [...buttons.getTypes.visible(), 'send']
-                visibleBtnTypes.forEach(type =>
-                    widths[type] = buttons[type]?.getBoundingClientRect().width
-                            || document.querySelector(`${sites.chatgpt.selectors.btns.send}, ${
-                                sites.chatgpt.selectors.btns.stop}`)?.getBoundingClientRect().width || 0 )
-                const totalBtnWidths = visibleBtnTypes.reduce((sum, btnType) => sum + widths[btnType], 0)
-                inputArea.parentNode.style.width = `${ // expand to close gap w/ buttons
-                    widths.chatbar - totalBtnWidths -43 }px`
-                inputArea.style.width = '100%' // rid h-scrollbar
-            }
-        },
-
-        reset() { // all tweaks for popup master toggle-off
-            const chatbarDiv = chatbar.get() ; if (!chatbarDiv) return
-            const inputArea = chatbarDiv.querySelector(sites.chatgpt.selectors.input)
-            if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
-        }
-    }
-
     const toggle = {
 
         mode(mode, state = '') {
diff --git a/firefox/extension/lib/chatbar.js b/firefox/extension/lib/chatbar.js
@@ -0,0 +1,54 @@
+window.chatbar = {
+
+    imports: {
+        import(deps) { // { env, sites }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    get() {
+        const site = this.imports.env.site
+        let chatbar = document.querySelector(this.imports.sites[site].selectors.input)
+        const lvlsToParent = site == 'chatgpt' ? 3 : 2
+        for (let i = 0 ; i < lvlsToParent ; i++) chatbar = chatbar?.parentNode
+        return chatbar
+    },
+
+    isDark() {
+        return this.imports.env.site.site != 'chatgpt' ? undefined
+            : getComputedStyle(document.getElementById('composer-background') || document.documentElement)
+                .backgroundColor == 'rgb(48, 48, 48)'
+    },
+
+    isTall() {
+        const site = this.imports.env.site
+        return site == 'poe' ? true
+             : site == 'perplexity' ? this.get()?.getBoundingClientRect().height > 60
+             : /* chatgpt */ !!this.get()?.nextElementSibling
+    },
+
+    tweak() {
+        const site = this.imports.env.site ; if (site != 'chatgpt') return
+        const sites = this.imports.sites
+        const chatbarDiv = this.get() ; if (!chatbarDiv) return
+        const inputArea = chatbarDiv.querySelector(sites[site].selectors.input) ; if (!inputArea) return
+        if (chatgpt.canvasIsOpen()) inputArea.parentNode.style.width = '100%'
+        else if (!this.isTall()) { // narrow it to not clash w/ buttons
+            const widths = { chatbar: chatbarDiv.getBoundingClientRect().width }
+            const visibleBtnTypes = [...buttons.getTypes.visible(), 'send']
+            visibleBtnTypes.forEach(type =>
+                widths[type] = buttons[type]?.getBoundingClientRect().width
+                        || document.querySelector(`${sites.chatgpt.selectors.btns.send}, ${
+                            sites.chatgpt.selectors.btns.stop}`)?.getBoundingClientRect().width || 0 )
+            const totalBtnWidths = visibleBtnTypes.reduce((sum, btnType) => sum + widths[btnType], 0)
+            inputArea.parentNode.style.width = `${ // expand to close gap w/ buttons
+                widths.chatbar - totalBtnWidths -43 }px`
+            inputArea.style.width = '100%' // rid h-scrollbar
+        }
+    },
+
+    reset() { // all tweaks for popup master toggle-off
+        const chatbarDiv = this.get() ; if (!chatbarDiv) return
+        const inputArea = chatbarDiv.querySelector(this.imports.sites.chatgpt.selectors.input)
+        if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
+    }
+}
diff --git a/firefox/extension/manifest.json b/firefox/extension/manifest.json
@@ -18,7 +18,10 @@
   "action": { "default_popup": "popup/index.html" },
   "web_accessible_resources": [{
     "matches": [ "<all_urls>" ],
-    "resources": [ "components/buttons.js", "components/modals.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js" ]
+    "resources": [
+      "components/buttons.js", "components/modals.js",
+      "lib/chatbar.js", "lib/chatgpt.js", "lib/dom.js", "lib/settings.js"
+    ]
   }],
   "content_scripts": [{
     "matches": [ "https://chatgpt.com/*", "https://www.perplexity.ai/*", "https://poe.com/*" ],
