Axel Schapmann Posts - Answer Overflow

Axel Schapmann

•Created by Axel Schapmann on 6/9/2024 in #🔰newbie

Error policy in dev, but not in build

Hello, i have an error that i can't arrive to resolve. I wanted to create a content script ui for LinkedIn. But with the "pnpm dev" i have this error :

Refused to create a TrustedTypePolicy named 'trusted-html-__plasmo-loading__' because it violates the following Content Security Policy directive: "trusted-types 'allow-duplicates' default jSecure highcharts dompurify".
     
       Uncaught TypeError: Failed to execute 'createPolicy' on 'TrustedTypePolicyFactory': Policy "trusted-html-__plasmo-loading__" disallowed.

Refused to create a TrustedTypePolicy named 'trusted-html-__plasmo-loading__' because it violates the following Content Security Policy directive: "trusted-types 'allow-duplicates' default jSecure highcharts dompurify".
     
       Uncaught TypeError: Failed to execute 'createPolicy' on 'TrustedTypePolicyFactory': Policy "trusted-html-__plasmo-loading__" disallowed.

What is strange, is taht i don't have it with the folder from the "pnpm build" command. How can i resolve this issue ?

2 replies

PD🧩 Plasmo Developers

•Created by Axel Schapmann on 4/23/2024 in #🔰newbie

Using Stripe and setup an API inside the extension

Hello ! I am able to make queries to stripe using what was explained on the website : https://docs.plasmo.com/quickstarts/with-stripe But what i don't understand, is what to put inside : PLASMO_PUBLIC_API_URI=http://localhost:8472 when it will be in production. Do you have any idea ? I won't have a server on vercel, so what should i use instead of the localhost server ?

3 replies

PD🧩 Plasmo Developers

•Created by Axel Schapmann on 2/29/2024 in #👾extension

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>
  );
}

4 replies

Gaming

Programming