🧩 Plasmo Developers•16mo ago

content.tsx only consistently works if refresh page

I am trying to create a browser extension for GitHub. For now, I just want to add a button on a page using a content.tsx. It works, but I often find it necessary to refresh the page for the button to appear. Trying to figure out if I am doing something wrong or if the code needs to get more complicated and add a custom MutationObserver or something like this. I have several customizations like this example. Some of them seem to work more consistently than others, which always require Refresh. I am thinking it maybe has to do with the specifics of the page and how much it has been converted to React by GitHub. Here is example:

import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor
  } from "plasmo"
  import { buttonStyles } from './styles'
  
  export const config: PlasmoCSConfig = {
    matches: ["https://github.com/*"]
  }
  
  export const getShadowHostId = () => "orghome-id"
  
  export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
    document.querySelector("#org-profile-repositories > div > div.my-3 > div > form > div > div.d-flex.flex-wrap")
  
  const OrgHomeInline = () => {
      const handleClick = () => {
          window.open("https://customhost/new")
      }
  
      return (<button onClick={handleClick} style={buttonStyles}>
        "New Repository"
      </button>)
    }
  
  export default OrgHomeInline

import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor
  } from "plasmo"
  import { buttonStyles } from './styles'
  
  export const config: PlasmoCSConfig = {
    matches: ["https://github.com/*"]
  }
  
  export const getShadowHostId = () => "orghome-id"
  
  export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
    document.querySelector("#org-profile-repositories > div > div.my-3 > div > form > div > div.d-flex.flex-wrap")
  
  const OrgHomeInline = () => {
      const handleClick = () => {
          window.open("https://customhost/new")
      }
  
      return (<button onClick={handleClick} style={buttonStyles}>
        "New Repository"
      </button>)
    }
  
  export default OrgHomeInline

1 Reply

markphipOP•16mo ago

I notice on the pages that are worst offenders, GitHub is just doing an XHR fetch so it is behaving like a SPA. Any pointers on how to detect the page changes and establish an inline anchor in this scenario? If I add a console.log(el) in my code where I query to add the anchor, I can see it being called over and over and returning null when it does not work. As a side note, I notice when it does find content it still is called over and over. Is this normal behavior or am I supposed to be doing something to stop once it finds where to insert code?

Gaming

Programming

content.tsx only consistently works if refresh page