css - Chrome 扩展 Tailwind CSS 干扰了我访问的网站

Question

我正在构建一个 chrome 扩展。我正在使用 React、Typescript、TailwindCSS、自定义 Webpack 配置。我已经覆盖了 manifest.json 中的默认操作，因此单击工具栏图标会触发一条消息并打开内容脚本，该脚本会在任何站点上注入停留。

我面临的问题是我的 Tailwind 样式会影响我访问的每个网站，有时还会影响其他网站。例如。谷歌搜索网站的标题更小，在 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": ["<all_urls>"],
            "js": ["contentScript.js"]
        }
    ]
}

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<boolean>(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 && (
                <div
                    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}
                >
                    <App />
                </div>
            )}
        </>
    );
};

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

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;
    }
}

我真诚地感谢任何帮助！

标签： cssreactjstypescript