Estoy creando una extensión de Chrome que requiere autenticación MetaMask.
Empecé a desarrollarlo como una aplicación web, pero como extensión de Chrome, no detecta MetaMask...
Este es el código de mi aplicación web en este momento:
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);¿Hay alguna forma de migrar la aplicación web a una extensión de Chrome?
Asi es como se hace.
Instale metamask-extension-provider en su proyecto https://github.com/MetaMask/extension-provider Deberá usar browserify para compilar su complemento.
Cree un conector personalizado como este
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 }; } }Ahora puede autenticarse usando MetaMask así
Moralis.authenticate({conector: customConnector})
Creé un pequeño modelo de extensión de Chrome con reacción y agregué el inicio de sesión de metamask y el soporte web3.
https://github.com/shaheem-khanzada/chrome-extension-react-metamask-boilerplate
entonces el problema es que no podemos acceder a window.eth... directamente en la extensión, es por eso que metamask creó un módulo llamado metamask-extension-provider pero para ejecutarlo necesitamos usar el compilador browserify, así que en palabras simples, necesitamos escribir nuestro propio compilador, es por eso que creé este modelo para ayudar a otros, usa gulp para crear tareas y luego agrupar archivos usando browserify y babelify