remove shadow dom

This commit is contained in:
SethBurkart123
2024-03-31 07:36:37 +11:00
parent 51cfb27fc5
commit e095e7a7c5
3 changed files with 0 additions and 62 deletions
-4
View File
@@ -1,7 +1,6 @@
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;
@@ -17,7 +16,4 @@ 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')
} }
-17
View File
@@ -1,17 +0,0 @@
@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;
}
-41
View File
@@ -1,41 +0,0 @@
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 />);
}