0

I have the metamask extension. When I do typeof(window.ethereum) in the console for a chrome tab, I get the type as object. However if I open mywebpage.html in a tab, which is just a heading around:

<script type="text/javascript"> document.write(typeof(window.ethereum)); </script>

then this typeof is 'undefined', either on the page or on the console.

I want to write a webpage that accesses metamask, how do I do that?

1
  • How do you serve the html page? directly from the filesystem or through a web server. Which address are you using? localhost, or the lan IP. – Ismael Feb 27 at 23:29
0
  1. Create a simple html page like and store in a file named scratch.html
    <!DOCTYPE html>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <html>
    <head>
        <title>Using web3 API with MetaMask</title>
        <script src="https://cdn.jsdelivr.net/npm/web3@1.2.2/dist/web3.min.js"></script>
        <script>
            window.addEventListener('load', function () {
                if (window.ethereum) {
                    window.web3 = new Web3(ethereum);
                    ethereum.enable()
                        .then(() => {
                            console.log("Ethereum enabled");
    
                            web3.eth.getAccounts(function (err, acc) {
                                if (err != null) {
                                    self.setStatus("There was an error fetching your accounts");
                                    return;
                                }
                                if (acc.length > 0) {
                                    console.log(acc);
                                }
                            });
                        })
                        .catch(() => {
                            console.warn('User didn\'t allow access to accounts.');
                            waitLogin();
                        });
                } else {
                    console.log("Non-Ethereum browser detected. You should consider installing MetaMask.");
                }
            });
        </script>
    </head>
    </html>
  1. Run the page with a web server:
    $ python -m SimpleHTTPServer 8000

This step is important for metamask (don't open just the html file)

  1. Open your browser enter http://localhost:8000/scratch.html and connect metamask to your page. Look into the console window of your browser and you should find the current account of Metamask. Expected console output:
Ethereum enabled                                  scratch.html:18 
["<your first account number in Metamask>"]       scratch.html:26 
1
  • thanks! I didn't know I needed to use a server, and I used visual studio Live Server instead of python – pongoS Mar 2 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.