Get currentUser in contentScript React chrome extension

Question

I'm currently developing a chrome extension with React.js. The user login in the popup(App.js) and then I need to get the userID in the contentScript.js, but the user is always null even if the popup indicate that the user is login.

How can I share the current user with my contentScript ? I succeed to get the current user when rooting in the popup but not in contentScript.

Here's a part of my code where I have this problem:

ContentScript.js:

if(typeof init === 'undefined') {
  const init = function() {
    // Adding the extension to the document
    const extensionRoot = document.createElement('div')
    extensionRoot.id = 'extension'
    document.body.appendChild(extensionRoot)

    // Render the extension to get the script working
    const container = document.getElementById('extension')
    const root = createRoot(container)
    root.render(
      <AuthProvider>
        <Page />
      </AuthProvider>
    )
  }
  
  init();
}

export default function Page() {
  const { currentUser } = useAuth() // Current user is null even if im login
  console.log("Current user: ", currentUser.uid)
  
  return (
    <div></div>
    )
 }

AutContext.js:

const AuthContext = createContext()

export function useAuth() {
    return useContext(AuthContext)
}

export function AuthProvider({ children }) {
    const [currentUser, setCurrentUser] = useState()
    
    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            setCurrentUser(user)
        })
        return unsubscribe
    }, []) 
    
    const value = {
        currentUser
        // other...
    }

    return (
        <AuthContext.Provider value={value}>
            {!loading && children}
        </AuthContext.Provider>
    )
}

score 0 · Answer 1 · answered Jul 24 '22 at 10:19

I think you have to use messages to communicate between scripts, e.g. https://dev.to/ahmad_ali/chrome-extension-anatomy-and-how-its-parts-communicate-9bm

I use AWS to authenticate users, here is what I followed to have the user authenticate Login to chrome extension via website with AWS amplify

Get currentUser in contentScript React chrome extension

1 Answers1