通过 chrome 扩展连接到 MetaMask

Question

我正在制作一个需要 MetaMask 身份验证的 Chrome 扩展。
我开始将其开发为 Web 应用程序，但作为 chrome 扩展，它无法检测 MetaMask...

这是我现在的网络应用程序代码：

function toggleButton() {
    const loginButton = document.getElementById("login-button");
    if (!window.ethereum) {
        loginButton.innerText = "Install MetaMask";
        loginButton.addEventListener("click", () => {
            window.open("https://metamask.io");
        });
        return false;
    }

    loginButton.addEventListener("click", loginWithMetaMask);
}

async function loginWithMetaMask() {
    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }).catch((e) => {
        console.error(e.message);
        return;
    });

    if (!accounts) {
        return;
    }

    const userWallet = document.getElementById("user-wallet");
    userWallet.innerText = accounts[0];
}

window.addEventListener("DOMContentLoaded", toggleButton);

有没有办法将 Web 应用程序迁移到 Chrome 扩展程序？

Answer 1

这是如何做到的。

1. 在您的项目中安装 metamask-extension-provider https://github.com/MetaMask/extension-provider 您将需要使用 browserify 来编译您的插件。

2. 像这样创建一个自定义连接器

   class customConnector extends Moralis.AbstractWeb3Connector {
       async activate() {
       const provider = createMetaMaskProvider();
       if (!provider) {
         console.error("MetaMask provider not detected.");
         throw new Error("MetaMask provider not detected.");
       }
       const [accounts, chainId] = await Promise.all([
         provider.request({
           method: 'eth_requestAccounts',
         }),
         provider.request({ method: 'eth_chainId' }),
       ]);
       const account = accounts[0] ? accounts[0].toLowerCase() : null;
   
       this.chainId = provider.chainId;
       this.account = provider.selectedAddress;
       this.provider = provider;
   
       this.subscribeToEvents(provider);
   
       return { provider, chainId, account };
     }
   }
   

3. 现在您可以像这样使用 MetaMask 进行身份验证

   Moralis.authenticate({ connector: customConnector })