Can I connect Solana wallet(e.g. Phantom) from my own Chrome Extension?

I have made Solana DeFi in React+TS+Vite and I'm going to build it as a Chrome extension.

Everything is okay but I can't connect wallet(e.g. Phantom).

It can't detect installed wallets automatically and it navigates to their websites when I select wallet in wallet modal after added manually.

How can I deal with?

Here's my walletProvdier.

import { FC, ReactNode, useMemo } from 'react'
import {
  ConnectionProvider,
  WalletProvider,
} from '@solana/wallet-adapter-react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { WalletModalProvider } from '../components/Swap/WalletAdapterReactUi/src/index'
import { clusterApiUrl } from '@solana/web3.js'
import {
  PhantomWalletAdapter,
  LedgerWalletAdapter,
  TorusWalletAdapter,
  SolflareWalletAdapter,
} from '@solana/wallet-adapter-wallets'

import '../components/Swap/WalletAdapterReactUi/styles.css'

const SolanaWalletProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const network = WalletAdapterNetwork.Mainnet
  const endpoint = useMemo(() => clusterApiUrl(network), [network])

  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new LedgerWalletAdapter(),
      new TorusWalletAdapter(),
      new SolflareWalletAdapter(),
    ],
    [network],
  )

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}

export default SolanaWalletProvider

I tried to connect wallet on my own chrome extension but it just navigates to their websites instead of opening wallet extension popup.

It is impossible to connect Phantom Wallet on other chrome browser yet because it doesn't support any provider API.

Use Solfare instead of Phantom.