How does MetaMask inject Web3?

Question

I'm just getting started with Solidity and Truffle, and I'm quite confused regarding this example code:

App = {
  web3Provider: null,
  contracts: {},
...
  initWeb3: function() {
    // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
            App.web3Provider = web3.currentProvider;
            web3 = new Web3(web3.currentProvider);
        } else {
             // If no injected web3 instance is detected, fallback to the TestRPC.
            App.web3Provider = new web3.providers.HttpProvider('http://localhost:8545');
            web3 = new Web3(App.web3Provider);
        }
    return App.initContract();
  },
...
}

In the InitWeb3 function, it checks the type of a variable named web3, but it doesn't seem to be instantiated anywhere. I read that programs like MetaMask can "inject" a web3 instance, but how does this work? How does my program see it?

Answer 1

The MetaMask WebExtension uses a contentscript to write a script tag into the DOM of every web page you visit. This script tag exposes the web3 API, and allows your application to query it and propose transactions to the user.

If you don't see web3 available, it's possible you're seeing a known bug in Chromium, and should wait a little longer. Usually the document ready event is late enough to see the injected web3 take effect.

Answer 2

The Chrome plugin Metamask inject a global variable web3 in your browser. You can see it in your console browser, you have this message MetaMask - injected web3 and you can see the web3 object by taping web3 in your console. MetaMask is a proxy between the server side and your browser interface. Your program can see this variable only when it's loading with your browser.