Chrome -Erweiterungs -Tailwind -CSS beeinträchtigt die Websites, die ich besuche
Posted: 13 Apr 2025, 06:49
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>
@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!
Hier sind meine Dateien: < /p>
Code: Select all
manifest.jsonCode: 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.tsxCode: 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!