MetaMask – How to Check Whether MetaMask Is Installed?

What metamask do is inject javascript into the document when you access it. The browser will execute this javascript, and is that execution that will define de variable web3.

But when you are accessing a document by accessing the file (your url will start with file://) then metamask will not inject the javascript, so the variable web3 will be undefined.

Try accessing your file through a web server of some sort and it will work.

Currently, Metamask doesn't provide any such functionality. A discussion is going on to make some relative update. You can stay tuned: https://github.com/MetaMask/metamask-extension/issues/1190