BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 11:44:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

shadow dom

Browse Source
This commit is contained in:
SethBurkart123
2024-03-31 07:36:20 +11:00
parent d94dd1ee12
commit 51cfb27fc5
6 changed files with 69 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -59,6 +59,7 @@
"react-best-gradient-color-picker": "3.0.5", "react-best-gradient-color-picker": "3.0.5",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.22.0", "react-router-dom": "^6.22.0",
"react-shadow": "^20.4.0",
"rimraf": "^5.0.5", "rimraf": "^5.0.5",
"sortablejs": "^1.15.2", "sortablejs": "^1.15.2",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
src/SEQTA.ts
+5
View File
@@ -911,6 +911,11 @@ function addExtensionSettings() {
extensionPopup.id = 'ExtensionPopup' extensionPopup.id = 'ExtensionPopup'
document.body.appendChild(extensionPopup) document.body.appendChild(extensionPopup)
const extensionpopup2div = document.createElement('div')
extensionpopup2div.classList.add('ExtensionPopup2')
extensionpopup2div.id = 'ExtensionPopup2'
extensionPopup.appendChild(extensionpopup2div)
const extensionIframe: HTMLIFrameElement = document.createElement('iframe') const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded` extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded`
extensionIframe.id = 'ExtensionIframe' extensionIframe.id = 'ExtensionIframe'
src/interface/index.html
+1 -2
View File
@@ -17,8 +17,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="ExtensionPopup"> <div id="ExtensionPopup"></div>
</div>
<script type="module" src="./main.tsx"></script> <script type="module" src="./main.tsx"></script>
<script type="module" src="./dark.ts"></script> <script type="module" src="./dark.ts"></script>
</body> </body>
src/seqta/ui/ImageBackgrounds.ts
+4
View File
@@ -1,6 +1,7 @@
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
import { SettingsState } from '../../types/storage'; import { SettingsState } from '../../types/storage';
import backgroundURL from './background/background.html?url' import backgroundURL from './background/background.html?url'
import { renderInShadowDom } from './otherFunction';
export async function appendBackgroundToUI() { export async function appendBackgroundToUI() {
const settings = await browser.storage.local.get() as SettingsState; const settings = await browser.storage.local.get() as SettingsState;
@@ -16,4 +17,7 @@ export async function appendBackgroundToUI() {
background.setAttribute('excludeDarkCheck', 'true'); background.setAttribute('excludeDarkCheck', 'true');
background.src = browser.runtime.getURL(backgroundURL); background.src = browser.runtime.getURL(backgroundURL);
parent!.appendChild(background); parent!.appendChild(background);
renderInShadowDom('#ExtensionPopup2')
} }
src/seqta/ui/otherFunction.css
+17
View File
@@ -0,0 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar {
display: none;
}
src/seqta/ui/otherFunction.tsx
+41
View File
@@ -0,0 +1,41 @@
import ReactDOM from 'react-dom/client';
import root from 'react-shadow';
import styles from './otherFunction.css?inline';
// Define your React component
export default function MyComponent() {
return (
<root.div>
<div className="bg-black/40 backdrop-blur-xl">hi there</div>
<style type="text/css">{styles}</style>
</root.div>
);
};
// Function to render the React component within Shadow DOM
export const renderInShadowDom = (selector: string) => {
// Find the host element
const hostElement = document.querySelector(selector);
if (!hostElement) {
console.error('Host element not found');
return;
}
const element = document.createElement('div');
hostElement.appendChild(element);
const root = ReactDOM.createRoot(element);
root.render(<MyComponent />);
};
const hostElement = document.querySelector('nothing')!;
if (hostElement) {
const element = document.createElement('div');
hostElement.appendChild(element);
const root1 = ReactDOM.createRoot(element);
root1.render(<MyComponent />);
}