PD
🧩 Plasmo DevelopersAxel Schapmann

Quick screen change

Here is a simple code that i have developed. I was wandering how i can avoid the quick screen change. There is a login button that displays before the email is displayed. How can i avoid this ? (I did not find a solution within the documentation) 
import { useState, useEffect } from "react";
import { supabase } from "~core/supabase"; // Ensure you import Supabase correctly
import "../style.css"

export default function IndexPopup() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Check user session with Supabase when the component mounts
    const checkUserSession = async () => {
      const { data: { session }, error } = await supabase.auth.getSession();
      
      if (session) {
        setUser(session.user);
      } else {
        console.error("No active session:", error?.message);
      }
    };

    checkUserSession();
  }, []);

  // Function to navigate to options page
  const navigateToOptions = () => {
    // Open the options page of your extension
    if (chrome.runtime.openOptionsPage) {
      chrome.runtime.openOptionsPage();
    } else {
      window.open(chrome.runtime.getURL('options.html'));
    }
  };

  // Function to handle logout
  const handleLogout = async () => {
    const { error } = await supabase.auth.signOut();
    if (!error) {
      setUser(null);
    } else {
      console.error("Logout error:", error.message);
    }
  };

  return (
    <div className="...">
      <h1 className="...">
        Welcome to your Plasmo Extension!
      </h1>
      {!user ? (
        <button
          onClick={navigateToOptions}
          className="...">
          Log in / Sign up
        </button>
      ) : (
        <>
          <div className="text-sm text-gray-700">
            Logged in as: 
          </div>
          <button
            onClick={handleLogout}
            className="...">
            Log out
          </button>
        </>
      )}
    </div>
  );
}
import { useState, useEffect } from "react";
import { supabase } from "~core/supabase"; // Ensure you import Supabase correctly
import "../style.css"

export default function IndexPopup() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Check user session with Supabase when the component mounts
    const checkUserSession = async () => {
      const { data: { session }, error } = await supabase.auth.getSession();
      
      if (session) {
        setUser(session.user);
      } else {
        console.error("No active session:", error?.message);
      }
    };

    checkUserSession();
  }, []);

  // Function to navigate to options page
  const navigateToOptions = () => {
    // Open the options page of your extension
    if (chrome.runtime.openOptionsPage) {
      chrome.runtime.openOptionsPage();
    } else {
      window.open(chrome.runtime.getURL('options.html'));
    }
  };

  // Function to handle logout
  const handleLogout = async () => {
    const { error } = await supabase.auth.signOut();
    if (!error) {
      setUser(null);
    } else {
      console.error("Logout error:", error.message);
    }
  };

  return (
    <div className="...">
      <h1 className="...">
        Welcome to your Plasmo Extension!
      </h1>
      {!user ? (
        <button
          onClick={navigateToOptions}
          className="...">
          Log in / Sign up
        </button>
      ) : (
        <>
          <div className="text-sm text-gray-700">
            Logged in as: 
          </div>
          <button
            onClick={handleLogout}
            className="...">
            Log out
          </button>
        </>
      )}
    </div>
  );
}
AS
Axel Schapmann•63d ago
Does anyone have an idea ?
A
Arcane•63d ago
@Axel Schapmann has reached level 1. GG!
Want results from more Discord servers?
Add your server
More Posts
Permission Denied Error on Firefox mv2I am running a content script which has an async function that makes an api call to fetch some data Rendering issue on single page application (SPA) like youtubeI am trying to make something for youtube where i am using inline anchor. I want to inject a button Custom Font Isn't Working on TwitterI've made a simple code to change the font on websites like Stack Overflow and Twitter. It works on Build variable to indicate "background" or "content" script?Right now the only thing I can do to determine if a shared function is running in content or backgrohow can I pcik suffix for files from lib, like main.web.js & main.native.js?I am using a lib which exports both versions of files. my issue is it keeps resolving to the native useStorage makes extension window tiny.every time i use the useStorage hook my windows resizes it's driving me crazy const [datas] = useStoI am trying to console.log a string but I am not quite sure where it is. Where do I see console.logWhere do I see console.log messages written in the popup.tsx file?Unable to install storage API in my projectstarted a new project recently and the API is not getting installed locally, whenever I try to "pnpm