Detect if Browser Supports MetaMask

MetaMask is a popular browser extension that allows users to interact with Ethereum-based applications. It is available for Chrome, Firefox, Brave, Edge, and Opera. In this post, we will explore how to detect if a user's browser is compatible with MetaMask.

One way to check for compatibility is to simply check if the window.ethereum object is present. This object is only defined in browsers that have MetaMask installed (including the metamask browser on mobile devices), so if it is present, we can assume that the browser is compatible.

if (!!window.ethereum) {
	return true;
}

However, we may also want to check for compatibility even if MetaMask is not installed. In this case, we can check the user's browser type and exclude mobile browsers, as MetaMask is not currently available on mobile.

const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

if (isCompatible && !isMobile) {
	return true;
}

Putting it all together, we can create a function that returns a boolean indicating whether the browser is compatible with MetaMask.

function isMetaMaskSupportedBrowser() {
	// If the user has MetaMask installed, we can assume they are on a supported browser
	if (!!window.ethereum) {
		return true;
	}

	const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
	const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

	return isCompatible && !isMobile;
}

This function can be useful for displaying a warning or error message to users who are on an unsupported browser, or for limiting the functionality of an application to only supported browsers.