[SOLVED] Is it possible to run moralis login using chrome extension?

Moralis General
#1

I am thinking to create a chrome extension that requires logging in to a crypto wallet.

Is it possible?

#2

I think that it should be possible, but I don’t know on what problems you will get down the line

#3

The problem which I am currently facing is

“Uncaught ReferenceError: Moralis is not defined”

As external scripts are allowed in the chrome extension.

#4

Just searched on google and found this: https://stackoverflow.com/questions/7781851/loading-external-javascript-in-google-chrome-extension
don’t know if it helps

#5

It seems to load the scripts the from the web paths. but for some reason it is showing me the same error.

I may have to explore other ways

#6

hmm it could work with walletconnect (i doubt it will work with metamask as its plugin calling another plugin which i think doesnt work in chrome)

we havent tested this so you are first explorer

1 Like
#7

Hi all,
I managed to call metamask from an other chrome extension using this: https://github.com/DimensionDev/extension-provider
However, when I integrate Moralis, I got the error
“Non ethereum enabled browser”.
I think it’s because Im not running Moralis through a live server, problem is: client side, chrome extensions are not running through live server…
So my question is: do you know how to directly pass the injected web3 provider object, or account, to Moralis in order to login and get Moralis user object, instead of calling Moralis.authenticate() ? I need moralis user id and moralis username associated with the account in order for my app to work. Thanks a lot !

#8

you may be able to do a custom function for the provider: https://docs.moralis.io/moralis-server/users/crypto-login#custom-wallet-login

1 Like
#9

Did you find a working solution for this?

#10

Can you provide some more hints? I guess you are referring to:

const web3Provider = await Moralis.enableWeb3();

How can we login with Metamask using the web3Provider directly instead of using Moralis.authenticate()?

#11

it may be different now with latest SDK update: Moralis JS-SDK v1.0.0 [beta] (Ethers.js support)

there was setEnableWeb3 function in the past

#12

Can you provide some insight, on why a custom function would work better for Metamask? Than the one already provided? The problem here:

Is that window.ethereum is not available in the context of a chrome plugin.

#13

“you may be able to do a custom function for the provider”

Do you think this will solve the problem with MetaMask?

#14

I don’t know if it will solve it, for some wallets you could use a custom function

#15

SOLVED. I will need a few days to put together a working example, but I am now able to communicate with MetaMask extension from my extension using a Custom Function for the provider.

:partying_face:

3 Likes
#16

@emorling Can you explain exactly how you achieved this? I am stuck on this since days

#17

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.

  1. 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 };
  }
}
  1. Now you can authenticate using MetaMask like this

Moralis.authenticate({ connector: customConnector })

1 Like