Cannot connect to Metamask through integrating web3modal with chrome extension

[0xisk]

Describe the bug Trying to integrate web3model with chrome extension wallet, and I have Metamask in my browser but at the same time the web3modal is not able to read it and it outputs a page for installing MM.

SDK Version

       "@web3modal/ethereum": "^2.0.0-alpha.4",
        "@web3modal/react": "^2.0.0-alpha.4",
         "react": "^16.13.1",

To Reproduce Steps to reproduce the behavior:

1. click on connect wallet button
2. choose MM button
3. then it will appear the page of installing MM

Expected behavior To open MM extension in the same browser

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Arch Linux]
• Browser [e.g. chrome, brave]

Smartphone (please complete the following information):

Additional context

[xzilja]

Interesting, it looks like fonts are broken as well for some reason. Any chance you are running in some sort of restrictive mode that prevents certain things from loading?

I'm unable to replicate this in brave / chrome / firefox on macOS, opens metamask as expected.

As a side note, we also depend on minimum version of react v17.x in @web3modal/react

[0xisk]

Interesting, it looks like fonts are broken as well for some reason. Any chance you are running in some sort of restrictive mode that prevents certain things from loading?

Could you please illustrate more on what do you mean with restrictive mode for chrome extension?

As a side note, we also depend on minimum version of react v17.x in @web3modal/react

I will update react and test again.

[xzilja]

Could you please illustrate more on what do you mean with restrictive mode for chrome extension?

Just any non-standard browser settings you might've set up for say privacy reasons etc.

We also have a team member who uses Arch Linux and they were able to go through this flow without issues.

[xzilja]

Also, could you please outline what you are working on i.e. is this an issue with some custom extension or with official metamask one?

[xzilja]

We tried to replicate this, even on same os and version of linux, but to no success. Metamask behaves as expected. Could you give alpha.5 a go and see if this issue is still heppening there?

[xzilja]

@iskdrews we are now on alpha.8 and multiple enhancements were made. Since we can't replicate the issue on same os I'll be closing this for time being. Feel free to ping me if you are still seeing this on newer versions and can provide those further details from above comments.

[0xisk]

Hi @IljaDaderko,

Thanks for helping on resolving that, and sorry for pausing on this issue for a while.

Packages

I finished updating all the packages including react to 18.2.0:

        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-jazzicon": "^1.0.4",
        "react-redux": "^8.0.5",
        "react-router": "^6.4.3",
        "react-router-dom": "^6.4.3",

And installed the latest versions for web3modal:

        "@web3modal/ethereum": "^2.0.0-beta.7",
        "@web3modal/react": "^2.0.0-beta.7",
        "wagmi": "^0.8.8",

Issue

But unfortunately still getting the same issue where Metamask button in Web3Modal in my extension, can't reach out to my Metamask extension installed in the same browser, as you can see from the screenshot below:

Re-produce the issue

I tried also to make it easier for you to reproduce this issue. I forked this react chrome extension repo (https://github.com/iskdrews/chrome-extension-web3modal-boilerplate-react) which has react v17 and installed the latest web3modal, and got the same issue after building it.

Here are the steps to reproduce the same issue in your end:

1. Clone: https://github.com/iskdrews/chrome-extension-web3modal-boilerplate-react
2. npm install
3. npm build
4. Load your extension on Chrome following: i. Access chrome://extensions/ from your chrome browser ii. Check Developer mode iii. Click on Load unpacked extension iv. Select the build folder.
5. You can find the extension appeared in the extensions bar.

Potential solution

I think you need to integrate this package (https://github.com/MetaMask/extension-provider) for reaching out to Metamask extension provider from another WebExtensions. As you can see from this script (https://github.com/MetaMask/extension-provider/blob/master/index.js) it tries to create a connection stream to the Metamask chrome extension, so I think that might solve this issue.

Thanks in advance!

[xzilja]

Don't think there is anything we can do here on our end. Under the hood we are using wagmi (https://wagmi.sh/) for connection which in turn uses plain ethersjs / window.ethereum, so perhaps these are having issues of looking for mm outside of the extension? Could be something to do with how extension persmissions work with window object, not sure

[TomSeldon]

FYI I have the same issue- Chrome on Windows (Version 108.0.5359.125 (Official Build) (64-bit)). MetaMask Chrome extension version 10.23.2.

Don't think there is anything we can do here on our end. Under the hood we are using wagmi (https://wagmi.sh/) for connection which in turn uses plain ethersjs / window.ethereum, so perhaps these are having issues of looking for mm outside of the extension? Could be something to do with how extension persmissions work with window object, not sure

When using the wagmi examples page (https://wagmi.sh/examples/connect-wallet) I'm able to connect to MetaMask.

Also when using ConnectKit (https://docs.family.co/connectkit/try-it-out) that also works.

The web3modal example at https://web3modal-dev.pages.dev/ is unable to detect the MetaMask plugin is installed.

[xzilja]

@TomSeldon Do you by any chance have deployed example / repo I could look at? And is there a chance to test this on a non windows machine (to pinpoint this down to windows os and chrome). Bellow is my test on Chrome via macOS and everything seems to work on all urls above.

I'll try to get something going on windows next week as well to test this, but os shouldn't play a role here to be fair, just browser.

https://user-images.githubusercontent.com/3154053/209807742-869aaada-a2bb-42a8-8353-183a883f12ea.mov

[TomSeldon]

Hi @0xAsimetriq I'm sorry I don't have an example repo- I just tried the demo page (https://web3modal-dev.pages.dev/) and had this issue.

Whilst playing about with it I think I just found the problem- I had both MetaMask and Coinbase Chrome extensions installed and enabled. If I disable Coinbase, then when selecting MetaMask in web3modal it does trigger the MetaMask connection popup.

With both extensions enabled, it thinks MetaMask isn't installed.

I've not looked at the code, I'm guessing Coinbase is overwriting window.ethereum and so MetaMask's window.ethereum.isMetaMask is undefined instead of true.

wagmi examples and ConnectKit do seem to handle this scenario though, so I'm not sure what's different. Maybe they're doing something like looping through window.ethereum.providers and checking for MetaMask there? Complete guess though.

[mkeresty]

Hey, I too am making a chrome extension that I'm trying to connect with MetaMask. I've tried MetaMask-extension-provider but it didn't work. Have you had any luck connecting?

[ThomasB013]

I have the same issue. Image from https://web3modal.com/.

The one at the top of this image does not connect to the extension. The bottom one does. This is definitely confusing.

[glitch-txs]

@ThomasB013 please update to the latest version.