Google Chrome page preload causes weirdness with MetaMask

Hey everyone,

While testing my app’s wallet connectivity in several different browsers, I learned about a feature in Google Chrome called “Preload pages for faster browsing and searching”. Basically, if this feature is enabled (and it is by default), while you are entering a URL in the top bar, Chrome will look at the auto-completed URL and potentially fetch the contents before you are even finished typing. Clearing Chrome’s cache effectively disables the feature because the browser no longer has any information about what URLs can be auto-completed.

This feature seems reasonable, but it introduces some weirdness with MetaMask – if I configure my app to eagerly connect to an injected provider on load, the MetaMask connection dialogue pops up before I’ve even navigated to the app’s home page. (Oddly, this means that the preloading feature not only fetches my bundled JS file but also executes it.) What’s more, MetaMask RPC calls do not work on the first load – after making an async call to ```wallet_switchEthereumChain`, for example, the request never resolves. Refreshing the page, however, makes the problem go away, which makes me think that something happens between the time the initial preload is made by Chrome and the time the page is fully rendered which breaks MetaMask’s functionality somehow.

For reference, I’m running Google Chrome on Windows 11.

1 Like

Hello @TheAnchovyThatAteNY !
Welcome to MetaMask community )

Thats right. Similar behavior is observed in Safari when you click on a link but don’t follow it - this not only fetches bundled JS file and execute it.

As for the function wallet_switchEthereumChain there is nothing strange about this behavior, because the documentation has a clarification:

As with any method that causes a confirmation to appear, wallet_switchEthereumChain should only be called as a result of direct user action, such as the click of a button.

2 Likes

Thanks for the reply. I am seeing this behavior even when I initiate wallet actions through user clicks. I make a call like

await window.ethereum.request({method: 'eth_requestAccounts'});

and I am left hanging, because the above await does not even resolve to an error.

I’d also like to point out that I have only run into this problem using Windows and Google Chrome with preloading turned on. I have never seen this happen on Firefox or Brave, and have even used Google Chrome with preloading on MacOS and Linux without any issues.

Not sure how close my problem is to the one in issue #14283 in MetaMask-extension on Github, but both occur on Windows and Chrome and have the common theme of having to reload the browser after the initial load to get MetaMask connectivity working. Would be glad to hear from anyone who encountered something similar.

1 Like