Chrome -Erweiterungs -Tailwind -CSS beeinträchtigt die Websites, die ich besuche ⇐ CSS

[Anonymous]

Ich baue eine Chromverlängerung. Ich verwende React, TypeScript, Tailwindcss und benutzerdefinierte Webpack -Konfiguration. Ich habe die Standardaktion in Manifest.json überschrieben. Klicken auf das Symbol für die Symbolleiste löst eine Nachricht aus und öffnet Inhaltskript, das auf einer Website eine Aufenthaltsdose injiziert. Z.B. Google -Search -Websites haben kleinere Titel, auf Reddit hat meine Erweiterung viel kleinerer Text. Ich habe bereits versucht, React Shadow Dom zu verwenden, aber es hat nicht funktioniert, ich hätte vielleicht etwas falsch gemacht. < /P>
Hier sind meine Dateien: < /p>

Code: Select all

manifest.json

Code: Select all

{
"name": "Intro",
"description": "Intro extension",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"action": {
"default_title": "Intro",
"default_icon": "icon.png"
},
"permissions": ["alarms", "contextMenus", "storage"],
"options_page": "options.html",
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [""],
"js": ["contentScript.js"]
}
]
}
< /code>
contentScript.tsx

Code: Select all

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Messages } from '../utils/types';
import '@fontsource/roboto';
import { useDelayUnmount } from '../hooks/useDelayUnmount';
import App from '../App';
import './contentScript.css';

const mountedStyle = { animation: 'inAnimation 150ms ease-in' };
const unmountedStyle = {
animation: 'outAnimation 170ms ease-out',
animationFillMode: 'forwards',
};

const ContentScriptOverlay: React.FC = () => {
const [isActive, setIsActive] = useState(false);
const showDiv = useDelayUnmount(isActive, 250);

const handleMessages = (msg: Messages) => {
if (msg === Messages.TOGGLE_OVERLAY) {
setIsActive(!isActive);
}
};

useEffect(() => {
chrome.runtime.onMessage.addListener(handleMessages);
return () => {
chrome.runtime.onMessage.removeListener(handleMessages);
};
}, [isActive]);

return (

{showDiv && (
className="overlay top-0 right-0 bg-white backdrop-filter backdrop-blur-lg bg-opacity-70 h-screen overflow-auto shadow-md"
style={isActive ? mountedStyle : unmountedStyle}
>


)}

);
};

const root = document.createElement('div');
root.setAttribute('id', 'intro-extension');
document.body.appendChild(root);
ReactDOM.render(, root);
< /code>
contentScript.css

@tailwind base;
@tailwind components;
@tailwind utilities;

#intro-extension ::-webkit-scrollbar {
width: 0px;
background: transparent;
}

.overlay {
width: 376px;
z-index: 9999;
position: fixed;
border-radius: '6px 0px 0px 6px';
}

@keyframes inAnimation {
0% {
right: -376px;
}
100% {
right: 0;
}
}

@keyframes outAnimation {
0% {
right: 0;
}
100% {
right: -376px;
}
}
< /code>
I would honestly appreciate any help!