Metamask is not defined when it's connected to local network

Question

I have Metamask connected to the local Ganache network, but I am getting the "No web3? You should consider trying MetaMask!" message, so apparently Metamask isn't being used. How would I get it to use Metamask?

Answer 1

Are you running your 'html' file as 'http://' or 'file://' ? Because, this won't work in file:// method.

Just verified it locally. I've ganache running on HTTP://127.0.0.1:8545 and used node js (app.js) and index.html files.

index.html

<script type="text/javascript" src="D:\TestEth\capestoneEthILP\html\js\web3.js"></script>
<script type="text/javascript">
    var web3js;
    if(typeof web3 != 'undefined'){
        web3js = new Web3(web3.currentProvider);
        console.log("found web3?")
    }else{
        console.log("No Web3!");
        web3js = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
    }
</script>

app.js

const express = require('express')
const app = express()
var path = require('path');

// viewed at http://localhost:8080
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, () => console.log('Example app listening on port 3000!'));

Open Node js..

C:\Users\mk\Desktop>node app.js
Example app listening on port 3000!

And the console output was like this...

Not allowed to load local resource: file:///D:/TestEth/capestoneEthILP/html/js/web3.js
(index):6 found web3?
(index):1 Error in event handler for (unknown): TypeError: Cannot read property 'state' of null
    at CSRecorder.onQueryStateCompleted (chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/content_scripts/recorder.js:106:18)
inpage.js:9 MetaMask: web3 will be deprecated in the near future in favor of the ethereumProvider 
https://github.com/MetaMask/faq/blob/master/detecting_metamask.md#web3-deprecation
get @ inpage.js:9
(anonymous) @ VM82:1
ContentLoader.js:28 failed to get content script

Answer 2

Resolved:

Metamask doesn't only works within the browser, so include all the contract calling logic in the frontend code.

Answer provided by smarx in the comments