This guide will walk you through the process of building a browser extension with Web3Auth Plug and Play No Modal SDK.

Quick Start

npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/chrome-extension-no-modal-example w3a-chrome-extension-demo && cd w3a-chrome-extension-demo && npm install && npm run build

• In your browser go to chrome://extensions
• Enable Developer mode
• Click on Load unpacked and select the build folder from the folder path mentioned above

The extension should now be installed and you can click on the extension icon to interact with it.

End product of this guide:

Once logged in you can have all the features Web3Auth provides and along with blockchain libraries like ethers.js, web3.js, etc you can interact with the blockchain.

How it works?

We can integrate @web3auth/no-modal as well as @web3auth/modal to build a browser extension with Web3Auth. You can read more about both the SDKs in the SDKs section. The login flow of the user is as follows:

Prerequisites

• For Web Apps: A basic knowledge of JavaScript is required to use Web3Auth SDK.
• For Mobile Apps: For the Web3Auth Mobile SDKs, you have a choice between iOS, Android, React Native & Flutter. Please refer to the Web3Auth SDK Reference for more information.
• Create a Web3Auth account on the Web3Auth Dashboard
• Chrome Extension

We will be building the Chrome extension with create-react-app in this guide.