markphip Posts - Answer Overflow

markphip

•Created by markphip on 9/13/2023 in #👟framework

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

2 replies

Gaming

Programming