Chrome扩展中无法连接Solana钱包（如Phantom）的问题求助

核心原因 #

Chrome扩展的运行环境与普通网页存在差异：

• 钱包扩展（如Phantom）注入的window.solana对象无法被默认适配器检测到
• 钱包适配器默认使用网页端跳转链接（如https://phantom.app），而非扩展专属协议（如phantom://）
• 扩展权限限制导致无法与钱包扩展建立通信

分步解决方法 #

1. 适配钱包适配器的扩展环境 #

修改钱包适配器初始化参数，强制适配扩展环境的检测逻辑与连接方式：

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({
        // 显式指定扩展注入的window.solana对象
        provider: typeof window !== 'undefined' ? (window as any).solana : undefined,
        // 替换为Phantom扩展协议链接
        linkUrl: 'phantom://',
        // 禁用网页端安装跳转
        installUrl: ''
      }),
      new LedgerWalletAdapter(),
      new TorusWalletAdapter(),
      new SolflareWalletAdapter({
        provider: typeof window !== 'undefined' ? (window as any).solflare : undefined,
        linkUrl: 'solflare://'
      }),
    ],
    [network],
  )

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

export default SolanaWalletProvider

2. 配置Chrome扩展Manifest权限 #

在manifest.json中添加必要权限，允许与钱包扩展通信：

{
  "manifest_version": 3,
  "permissions": ["scripting", "activeTab"],
  "externally_connectable": {
    "matches": [
      "chrome-extension://*",
      "https://phantom.app/*",
      "https://solflare.com/*"
    ]
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'; connect-src https://api.mainnet-beta.solana.com"
  }
}

• externally_connectable：允许扩展与指定钱包扩展/域名建立通信
• content_security_policy：放行Solana节点的连接地址，避免CSP拦截

3. 优化自动检测逻辑 #

手动检测钱包是否已安装，补充适配器的自动检测缺陷：

// 在SolanaWalletProvider组件中添加useEffect
import { useEffect } from 'react';
import { useWallet } from '@solana/wallet-adapter-react';

// ... 其他代码保持不变

useEffect(() => {
  // 手动检测Phantom钱包
  if (typeof window !== 'undefined' && (window as any).solana?.isPhantom) {
    const { connect } = useWallet();
    connect(); // 触发自动连接
  }
}, []);

4. 调整Vite打包配置 #

如果使用vite-plugin-chrome-extension，确保配置适配扩展环境：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { chromeExtension } from 'vite-plugin-chrome-extension';

export default defineConfig({
  plugins: [react(), chromeExtension()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'manifest.json',
    },
  },
});

关键注意事项 #

• Manifest V3对权限和CSP限制严格，所有外部连接必须在配置中声明
• 不同钱包的扩展注入对象不同（如Solflare是window.solflare），需对应适配
• 测试时需加载打包后的正式扩展，避免开发服务器临时页面的环境差异

内容的提问来源于stack exchange，提问作者Genesis Solutions