🧩 Plasmo Developers•2mo ago

redirect between tabs page and content

Hey, i trying to create a extension that put a button in a github issue. In the simplest form all the button does is 2 api calls. But the additive is i want to add auth and found tab pages are the go to for this. The idea is when the button is clicked the user is redirected to tab page, where they log in, i then redirect them back to github issue. I wasnt sure how i could redirect them to the tab page. tried:
chrome.tabs.create({ url: `chrome-extension://${chrome.runtime.id}/tabs/auth.html` })
chrome.tabs.create({ url: `chrome-extension://${chrome.runtime.id}/tabs/auth.html` })
but get Cannot read properties of undefined (reading 'create') the runtime id does seem to work ~~update: looks like i need to pass this to the background as message which seems to work. now to figure out to to redirect back from the tabs page after the auth and store the auth info~~ any suggestion on improving this idea would are also appreciated. for the auth i am using amplify auth found this thread for the suggestion https://discord.com/channels/946290204443025438/1070189779838324807/1070254686118092801

1 Reply

ykethan•2mo ago

update: this seemed to work, now to see if i can store the auth info and make api calls.

import type { WithAuthenticatorProps } from "@aws-amplify/ui-react"
import { withAuthenticator } from "@aws-amplify/ui-react"
import { getCurrentUser } from "aws-amplify/auth"

import "@aws-amplify/ui-react/styles.css"

import { Amplify } from "aws-amplify"
import { useEffect, useState } from "react"

import { Storage } from "@plasmohq/storage"

import config from "../amplify_outputs.json"

Amplify.configure(config)

interface Props extends WithAuthenticatorProps {
  isPassedToWithAuthenticator: boolean
}

const storage = new Storage()

function AuthPage({ signOut, user }: Props) {
  const [redirecting, setRedirecting] = useState(true)

  useEffect(() => {
    const handleRedirect = async () => {
      try {
        const currentUser = await getCurrentUser()
        if (currentUser) {
          const redirectUrl = await storage.get("redirectUrl")
          if (redirectUrl) {
            await storage.remove("redirectUrl")
            window.location.href = redirectUrl
          }
        }
      } catch (error) {
        console.error("User not authenticated", error)
      } finally {
        setRedirecting(false)
      }
    }

    handleRedirect()
  }, [])

  if (redirecting) return <p>Loading...</p>

  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  )
}

export default withAuthenticator(AuthPage)

export async function getStaticProps() {
  return {
    props: {
      isPassedToWithAuthenticator: true
    }
  }

import type { WithAuthenticatorProps } from "@aws-amplify/ui-react"
import { withAuthenticator } from "@aws-amplify/ui-react"
import { getCurrentUser } from "aws-amplify/auth"

import "@aws-amplify/ui-react/styles.css"

import { Amplify } from "aws-amplify"
import { useEffect, useState } from "react"

import { Storage } from "@plasmohq/storage"

import config from "../amplify_outputs.json"

Amplify.configure(config)

interface Props extends WithAuthenticatorProps {
  isPassedToWithAuthenticator: boolean
}

const storage = new Storage()

function AuthPage({ signOut, user }: Props) {
  const [redirecting, setRedirecting] = useState(true)

  useEffect(() => {
    const handleRedirect = async () => {
      try {
        const currentUser = await getCurrentUser()
        if (currentUser) {
          const redirectUrl = await storage.get("redirectUrl")
          if (redirectUrl) {
            await storage.remove("redirectUrl")
            window.location.href = redirectUrl
          }
        }
      } catch (error) {
        console.error("User not authenticated", error)
      } finally {
        setRedirecting(false)
      }
    }

    handleRedirect()
  }, [])

  if (redirecting) return <p>Loading...</p>

  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  )
}

export default withAuthenticator(AuthPage)

export async function getStaticProps() {
  return {
    props: {
      isPassedToWithAuthenticator: true
    }
  }

Gaming

Programming

redirect between tabs page and content