🧩 Plasmo Developers�PD
🧩 Plasmo Developers•2y ago•
4 replies
Asif

Rendering issue on single page application (SPA) like youtube

I am trying to make something for youtube where i am using inline anchor. I want to inject a button on every video on youtube homepage. My code is here

import cssText from "data-text:~contents/style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
import { useEffect, useState } from "react"

export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/"]
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll("a#thumbnail.ytd-thumbnail")

const HomePage = ({ anchor }) => {
  return (
    <button className="home-button-position">
      ...
    </button>
  )
}

export default HomePage


The problem is: If i land on a single video page, then i navigate to youtube home page, the buttons on every video is not rendering. But if i refresh the home page again, the buttons rendered and working fine.

How to solve this issue? Please suggest me
Was this page helpful?