Usage in Chrome Extension

[ChenCodes]

Hi there!

Thank you for creating this repo. I have a question around usage of this library in a Chrome Extension.

I am using a React/Typescript setup for my extension.

Here is what my manifest.json file looks like.

{
    "version": "1.0.0",
    "manifest_version": 3,
    "name": "React Chrome Extension",
    "description": "This is a Chrome extension built with React and TypeScript",
    "action": {
        "default_popup": "dist/js/index.html",
        "default_title": "React Chrome Extension"
    },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "identity",
        "identity.email"
    ],
    "host_permissions": [
        "https://www.googleapis.com/"
    ],
    "key": "HIDDEN",
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://accounts.google.com/gsi/client;"
    }
}

Here is my App.tsx file:

import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const loadGoogleScript = () => {
      const script = document.createElement('script');
      script.src = '../public/google_client.js'; // due to the CSP issue, i have downloaded the contents of https://accounts.google.com/gsi/client into a local file called google_client.js and am referencing that in <script> in my index.html file
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
    };

    loadGoogleScript();
  }, []);

  return (
    <GoogleOAuthProvider clientId={CLIENT_ID}>
      <div className="App" style={{
        height: '100vh',
        width: '300px',
      }}>
      <GoogleLogin onSuccess={(res) => console.log(res)} />
      </div>
    </GoogleOAuthProvider>
  );
}

export default App;

When the extension loads, it looks like the component doesn't get rendered properly, when I go to inspect the element, it seems to only show an empty div with a height of 40px.

I'd appreciate any thoughts / suggestions on what the issue may be! Thank you.

[flazouh]

I have the same problem @ChenCodes @MomenSherif Any idea what to do here for the component to render, or when using the

const login = useGoogleLogin({
		onSuccess: (tokenResponse) => {
			return console.log(tokenResponse);
		},
		flow: "auth-code",
	});

there is nothing happening when clicking a button that calls this

[Ahmed-Ibrahim-Anter]

the same @flazouh there is nothing happening when clicking a button that calls this
Non-OAuth Error: _.rj {message: 'Popup window closed', stack: 'Error: Popup window closed\n at new _.rj (https:… (https://accounts.google.com/gsi/client:223:551)', type: 'popup_closed'}
i tried every thing that i found
last one
server: { headers: { "Cross-Origin-Opener-Policy": "same-origin-allow-popups", "Cross-Origin-Embedder-Policy": "require-corp", }, },