如何将元掩码连接到 dapp？答案

【问题标题】：How to connect metamask to dapp?如何将元掩码连接到 dapp？
【发布时间】：2021-10-07 20:56:54
【问题描述】：

我正在构建一个 dapp，我希望它连接到 metamask。我从https://docs.metamask.io/guide/getting-started.html#basic-considerations 得到了下面的代码。 Metamask 已安装在我的浏览器上，但无法正常工作。当浏览器加载页面时，控制台会写入MetaMask not installed!。当我单击enableEthereumButton 时，控制台给了我一个错误：

 demo.js:16 Uncaught (in promise) ReferenceError: ethereum is not defined
    at getAccount (demo.js:16)
    at HTMLButtonElement.<anonymous> (demo.js:12)
getAccount @ demo.js:16
(anonymous) @ demo.js:12

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Dapp</title>
</head>
<body>

  <button class="enableEthereumButton">Enable Ethereum</button>
  <h2>Account: <span class="showAccount"></span></h2>

<script src="demo.js"></script>
</body>
</html>

demo.js

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask is installed!');
 }
else{
      console.log('MetaMask not installed!');
}

const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}

我错过了什么？我按照上面提供的网站上的说明进行操作。

【问题讨论】：

问题是我从 file:///C:/Users/.../index.html 运行 index.html 文件。当我从网络服务器运行它时，一切正常。

标签： javascript web3js metamask

【解决方案1】：

这就是问题所在，Metamask 需要一个普通的主机来注入（例如 localhost），它不会在你自己的工作站上打开的随机文件上注入，因此你的验证找不到 window.ethereum 对象的原因。

另外，根据您运行项目的方式，我会将 ethereumButton 常量放在 window.onload 函数中，以避免查询选择器因为它尚不存在而找不到它。

我会做以下事情：

window.onload = function() {
   const ethereumButton = 
   document.querySelector('.enableEthereumButton');

   ethereumButton.addEventListener('click', () => {
       if (typeof window.ethereum !== 'undefined') {
           getAccount();
       } else {
           alert('Please install MetaMask');
       }
   });
};

async function getAccount() {
   const showAccount = document.querySelector('.showAccount');
   const accounts = await ethereum.request({ method: 
   'eth_requestAccounts' });
   const account = accounts[0];
   showAccount.innerHTML = account;
}

【讨论】：

【解决方案2】：

@slaven tojic 在 Chrome 中安装 Metamask 扩展后，你激活了吗？
从设置中打开扩展或在浏览器中打开一个选项卡并输入 chrome://extensions/.
检查 Metamask 块，是否打开切换按钮。如果不激活它。
此外，在浏览器上固定 Metamask 扩展 -> 检查以下图像。 Chrome MetaMask extension setting &Metamask after activation

在此之后检查您的代码是否正常工作。如果您已经完成了上述设置，那么肯定还有其他问题。
此外，在您的代码中，您指的是帐户 [0]。您是使用 Testnet 帐户连接还是本地帐户（使用 Ganache https://www.trufflesuite.com/ganache）。
如果您使用的是本地 Ganache 服务器，则必须在 MetaMask 中对其进行配置。你可以找到很多关于相同的文章。如果您已经关注此附加信息，请忽略它。

【讨论】：