diff --git a/package.json b/package.json
index 49bc4c48..45f8157b 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
"react-best-gradient-color-picker": "3.0.5",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.0",
+ "react-shadow": "^20.4.0",
"rimraf": "^5.0.5",
"sortablejs": "^1.15.2",
"tailwindcss": "^3.4.1",
diff --git a/src/SEQTA.ts b/src/SEQTA.ts
index d57f0e68..4ad64600 100644
--- a/src/SEQTA.ts
+++ b/src/SEQTA.ts
@@ -911,6 +911,11 @@ function addExtensionSettings() {
extensionPopup.id = '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')
extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded`
extensionIframe.id = 'ExtensionIframe'
diff --git a/src/interface/index.html b/src/interface/index.html
index 9da108fc..6aa88c5f 100644
--- a/src/interface/index.html
+++ b/src/interface/index.html
@@ -17,8 +17,7 @@
-
+
diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts
index 62acafcb..80ae55d2 100644
--- a/src/seqta/ui/ImageBackgrounds.ts
+++ b/src/seqta/ui/ImageBackgrounds.ts
@@ -1,6 +1,7 @@
import browser from 'webextension-polyfill';
import { SettingsState } from '../../types/storage';
import backgroundURL from './background/background.html?url'
+import { renderInShadowDom } from './otherFunction';
export async function appendBackgroundToUI() {
const settings = await browser.storage.local.get() as SettingsState;
@@ -16,4 +17,7 @@ export async function appendBackgroundToUI() {
background.setAttribute('excludeDarkCheck', 'true');
background.src = browser.runtime.getURL(backgroundURL);
parent!.appendChild(background);
+
+
+ renderInShadowDom('#ExtensionPopup2')
}
diff --git a/src/seqta/ui/otherFunction.css b/src/seqta/ui/otherFunction.css
new file mode 100644
index 00000000..51d129cb
--- /dev/null
+++ b/src/seqta/ui/otherFunction.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/seqta/ui/otherFunction.tsx b/src/seqta/ui/otherFunction.tsx
new file mode 100644
index 00000000..336615e2
--- /dev/null
+++ b/src/seqta/ui/otherFunction.tsx
@@ -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 (
+
+ hi there
+
+
+ );
+};
+
+// 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();
+};
+const hostElement = document.querySelector('nothing')!;
+
+if (hostElement) {
+ const element = document.createElement('div');
+ hostElement.appendChild(element);
+
+ const root1 = ReactDOM.createRoot(element);
+
+ root1.render();
+}
\ No newline at end of file