PD
🧩 Plasmo DevelopersAsif

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
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
Asif
Asif•81d ago
@louis please help to solve this issue
kvnfo
kvnfo•81d ago
Did you figure this out?
Asif
Asif•81d ago
@kvnfo Custom rendering might be a solution. But in youtube, some issue happened when reached to home page
Want results from more Discord servers?
Add your server
More Posts
Custom Font Isn't Working on TwitterI've made a simple code to change the font on websites like Stack Overflow and Twitter. It works on Build variable to indicate "background" or "content" script?Right now the only thing I can do to determine if a shared function is running in content or backgrohow can I pcik suffix for files from lib, like main.web.js & main.native.js?I am using a lib which exports both versions of files. my issue is it keeps resolving to the native useStorage makes extension window tiny.every time i use the useStorage hook my windows resizes it's driving me crazy const [datas] = useStoI am trying to console.log a string but I am not quite sure where it is. Where do I see console.logWhere do I see console.log messages written in the popup.tsx file?Unable to install storage API in my projectstarted a new project recently and the API is not getting installed locally, whenever I try to "pnpmCertain websites block content scriptsMy content script UI works on nearly all websites except some, in particular Reddit. Here's what I sCreate an anchor that selects every web pagehow would i properly create an anchor that selects the top level element. the goal is to create a wiHow to send some data from background.ts to content.ts fileI am trying to send a string from background.ts file to content.ts file. But I cannot find any documIs there a way to create a project with multiple configurationsplasmo create --with-tailwindcss --with-nextjs --with-supabase only creates a project with tailwind