MetaMask does not inject window.ethereum: Uncaught (in promise) TypeError: Cannot read property ‘request’ of undefined

To start, let me mention this is an in-browser project, so i can only use

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

So a few months back I made a dapp, which worked fine even tho I never set a provider, so I guessed it used the ones given by MetaMask. However, i am using the guide here the only issue is the following code,

var account_global, connected = false;

async function connect() {
    if (!connected) {
        var wei;
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); // Waits for connection to MetaMask.
        account_global = accounts[0];
        web3.eth.defaultAccount = account_global;
        console.log(account_global.toString() + " connected!");
        connected = true;
        console.log(account_global);
    }
}

connect();

This code used to output the address of the metamask user after they approved metamask on my dapp, however I am receiving the error

Uncaught (in promise) TypeError: Cannot read property 'request' of undefined

The error just says that, my actual goal if i have to add providers and all is to use the ones from metamask, and allow connecting to metamask, the rest of the functions such as transfer or others i know how to handle them, it just seems that my issues come when i try loading the page.

I dont have an ether node to use, not planning on using nodejs either, only a single html file displaying the Metamask address, hence using the in-browser web3js.

I hope its just me not realizing something simple, because I cant seem to find the reason I cannot use web3js right now.

Answer

Solved the mystery, seems to be just like the error code showed

Uncaught (in promise) TypeError: Cannot read property 'request' of undefined

genuinely meant that window.ethereum was undefined, so for no exact reason MetaMask would not inject ethereum, noticed that after reading Metamask and Web3js documentation, that my issue had nothing to do with their code, in fact i am gonna end up using the code shown on this answer.

https://ethereum.stackexchange.com/a/78987

The issues seeems that no matter the browser Metamask would not inject, so i tested it on multiple websites that usually require Metamask to connect and other normal sites just as google.com, to my surprise every site would have Metamask injecting ethereum apart from my own test site, so it meant that my site was cursed or something, or just the fact that Metamask does not inject on unhosted websites (just had the files on my destop to test), instead on an actual host it did inject and my tests were working on those sites.

Conclusion

Metamask requires a normal host to inject, it wont inject on a random file opened on your own workstation.