Ayondip Posts - Answer Overflow

Ayondip

•Created by Ayondip on 7/16/2024 in #🔰newbie

How to do CSUI routing?

I'm trying to build a chrome extension with plasmo, I' using the cs ui for my extension, now my extension will have multiple pages like initially there will be welcome page then clicking on a button will lead to a diffrent page like that. but I don't know how to do this kind of routing efficiently in CSUI currently i'm using the below approch, which will get out of hand if I add more and more pages, and it is very dificult for complex routing as well. Can someone please help me with any suggesition or something?

const App=()=>{
   const [page,setPage]=useState(1);
   return (
     <>
        {
           page===1?<Page1 setPage={setPage}/> :
           page===2?<Page2 setPage={setPage}/> : <NotFound/>
       }
    </>
  )

}

const App=()=>{
   const [page,setPage]=useState(1);
   return (
     <>
        {
           page===1?<Page1 setPage={setPage}/> :
           page===2?<Page2 setPage={setPage}/> : <NotFound/>
       }
    </>
  )

}

I have created a github discussion as well https://github.com/PlasmoHQ/plasmo/discussions/1025#discussion-6940304

4 replies

PD🧩 Plasmo Developers

•Created by Ayondip on 1/17/2024 in #👾extension

Help needed In API call from extension

I am building and extension with plasmo I have one csui where I have all my code. I want to sent a request to my server, after finding it I found that messaging can be used for that my structure look like |---contents/ | |--App.tsx |---background/ | |--messages/ | |--ping.ts I am sending api requests from ping.ts and using the below approach

sendToBackground({
          name: "ping",
          body: {
            url: window.location.href
          },
          extensionId: "mgaocmjffbjkbljpagklhidgpiaaglbm"
        }).then((e) => {
          setData((o) => ({ ...o, ...e }))
        })

sendToBackground({
          name: "ping",
          body: {
            url: window.location.href
          },
          extensionId: "mgaocmjffbjkbljpagklhidgpiaaglbm"
        }).then((e) => {
          setData((o) => ({ ...o, ...e }))
        })

now for this i have to send my extension id but this id will be diffrent if i build and install it in diffrent browser, how to overcome this issue? Please some one help me

5 replies

Gaming

Programming