Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 of 3 tasks
gusye1234 opened this issue Oct 20, 2024 · 2 comments
Open
2 of 3 tasks

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

gusye1234 opened this issue Oct 20, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@gusye1234
Copy link

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

  • I would like to fix this BUG via a PR

Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I checked the current issues for duplicate problems.
@gusye1234 gusye1234 added the bug Something isn't working label Oct 20, 2024
@keyiwu
Copy link

keyiwu commented Oct 25, 2024

the same for me.

@gusye1234
Copy link
Author

ChatGPT.com can be used to reproduce this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants