PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.61k stars 369 forks source link

[BUG] No `plasmo-csui` element for some websites #1113

Open gusye1234 opened 1 month ago

gusye1234 commented 1 month ago

What happened?

Hi, I'm writing a content script UI for my plugin. I want it to be displayed on three website(e.g. A, B, C). It woks on website A and B, but not C.

I looked into what happened in C. I found out that seems like C will reload the DOM after the injection of content script UI. So my plugin UI will appear at beginning(less that 0.1 second) then disappear. And the final DOM of website C doesn't contain plasmo-csui at all.

Version

Latest

What OS are you seeing the problem on?

No response

What browsers are you seeing the problem on?

Chrome

Relevant log output

// my content script UI code
const PlasmoOverlay = () => {
    console.log("PlasmoOverlay rendering")
    const [isReady, setIsReady] = useState(false)

    useEffect(() => {
        const timer = setTimeout(() => setIsReady(true), 2000) // 2 second delay
        return () => clearTimeout(timer)
    }, [])
    // console.log(isReady, isVisible)

    if (!isReady) return null
    console.log("Hello Mookies")
    return (
        <div id="mookies-container" className="z-[999] rounded-xl flex flex-row items-center justify-start gap-2 bg-transparent fixed bottom-1/4 -right-10 hover:-translate-x-10 transition-transform duration-300  p-1 hover:backdrop-blur-md">
            <img src={iconImage} alt="icon" className="w-6 h-6" />
            <div className="flex flex-col items-center justify-start gap-2">
                <Button variant="default" size="icon" className="rounded-full hover:bg-green-600" onClick={handleClick}>
                    <ArrowRightIcon />
                </Button>
                <Button variant="default" size="icon" className="rounded-full hover:bg-green-600">
                    <ArrowLeftIcon />
                </Button>
            </div>
        </div>
    )
}

export default PlasmoOverlay

(OPTIONAL) Contribution

Code of Conduct

keyiwu commented 4 weeks ago

the same for me.

gusye1234 commented 3 weeks ago

ChatGPT.com can be used to reproduce this.