Хромированное расширение Tailwind CSS мешает веб -сайтам, которые я посещаю ⇐ CSS

[Anonymous]

Я строю хромированное расширение. Я использую React, TypeScript, TailWindcss, пользовательскую конфигурацию WebPack. Я перезаписывал действие по умолчанию в manifest.json, поэтому щелчок значок панели инструментов запускает сообщение и открывает сценарий контента, который вводит Layover на любом сайте. Например. На веб -сайтах поиска Google есть меньшие заголовки, на Reddit у моего расширения гораздо меньший текст. Я уже пытался использовать React Shadow Dom, но это не сработало, я мог бы что -то не так.

Код: Выделить всё

manifest.json

Код: Выделить всё

{
"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

Код: Выделить всё

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!

Подробнее здесь: https://stackoverflow.com/questions/690 ... es-i-visit