Connect to MetaMask via chrome extension

Question

I am making a chrome extension that requires MetaMask authentication.
I started developing it as a web application, but as a chrome extension, it doesn't detect MetaMask...

This is my web application code right now:

function toggleButton() {
    const loginButton = document.getElementById("login-button");
    if (!window.ethereum) {
        loginButton.innerText = "Install MetaMask";
        loginButton.addEventListener("click", () => {
            window.open("https://metamask.io");
        });
        return false;
    }

    loginButton.addEventListener("click", loginWithMetaMask);
}

async function loginWithMetaMask() {
    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }).catch((e) => {
        console.error(e.message);
        return;
    });

    if (!accounts) {
        return;
    }

    const userWallet = document.getElementById("user-wallet");
    userWallet.innerText = accounts[0];
}

window.addEventListener("DOMContentLoaded", toggleButton);

Is there a way to migrate the web application to a chrome extension?

Answer 1

This is how to do it.

1. Install metamask-extension-provider in your project https://github.com/MetaMask/extension-provider You will need to use browserify to compile your plugin.

2. Create a custom connector like this

class customConnector extends Moralis.AbstractWeb3Connector {
    async activate() {
    const provider = createMetaMaskProvider();
    if (!provider) {
      console.error("MetaMask provider not detected.");
      throw new Error("MetaMask provider not detected.");
    }
    const [accounts, chainId] = await Promise.all([
      provider.request({
        method: 'eth_requestAccounts',
      }),
      provider.request({ method: 'eth_chainId' }),
    ]);
    const account = accounts[0] ? accounts[0].toLowerCase() : null;

    this.chainId = provider.chainId;
    this.account = provider.selectedAddress;
    this.provider = provider;

    this.subscribeToEvents(provider);

    return { provider, chainId, account };
  }
}

3. Now you can authenticate using MetaMask like this

   Moralis.authenticate({ connector: customConnector })

Answer 2

I have created a small boilerplate of chrome extension with react and added metamask login and web3 support.

https://github.com/shaheem-khanzada/chrome-extension-react-metamask-boilerplate

so the problem is we cannot access window.eth... directly in the extension that is why metamask created a module called metamask-extension-provider but in order to run this we need to use browserify compiler so in simple words, we need to write our own compiler that's why I created this boilerplate to help others it uses gulp to create task and then bundle files using browserify and babelify