Cannot connect to Metamask through integrating web3modal with chrome extension

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

[0xAsimetriq]

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

[iskdrews]

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!