diff --git a/starters/chrome/extension/content.js b/starters/chrome/extension/content.js index c354077df..d97f0f68e 100644 --- a/starters/chrome/extension/content.js +++ b/starters/chrome/extension/content.js @@ -14,6 +14,9 @@ // Import APP data const { app } = await chrome.storage.sync.get('app') + + // Export DEPENDENCIES to imported resources + dom.dependencies.import({ env }) // for env.scheme modals.dependencies.import({ app, env }) // for app data + env.scheme // Add CHROME MSG listener diff --git a/starters/chrome/extension/lib/dom.js b/starters/chrome/extension/lib/dom.js index 69bb0cba7..3310e0f57 100644 --- a/starters/chrome/extension/lib/dom.js +++ b/starters/chrome/extension/lib/dom.js @@ -1,4 +1,10 @@ window.dom = { + + dependencies: { + import(dependencies) { // { env) } + for (const name in dependencies) this[name] = dependencies[name] } + }, + create: { elem(elemType, attrs = {}) { const elem = document.createElement(elemType) @@ -13,14 +19,15 @@ window.dom = { } }, - fillStarryBG(targetNode) { // requires https://assets.aiwebextensions.com/styles/css/-rising-stars.min.css + fillStarryBG(targetNode) { // requires https://assets.aiwebextensions.com/styles/rising-stars/css/.min.css + if (targetNode.querySelector('[id*=stars]')) return const starsDivsContainer = document.createElement('div') starsDivsContainer.style.cssText = 'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner + 'height: 100% ; width: 100% ; border-radius: 15px ; overflow: clip ;' // bound innards exactly by targetNode + 'z-index: -1'; // allow interactive elems to be clicked ['sm', 'med', 'lg'].forEach(starSize => { const starsDiv = document.createElement('div') - starsDiv.id = `${ chatgpt.isDarkMode() ? 'white' : 'black' }-stars-${starSize}` + starsDiv.id = `${ this.dependencies.env.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}` starsDivsContainer.append(starsDiv) }) targetNode.prepend(starsDivsContainer)