Skip to content

Latest commit

 

History

History
94 lines (54 loc) · 2.94 KB

README.md

File metadata and controls

94 lines (54 loc) · 2.94 KB

JustWeb3 Extension

The JustWeb3 Chrome Extension is a tool that populates Twitter (X) with ENS (Ethereum Name Service) domain resolution. It detects ENS names on Twitter (X) accounts (display names), tweets, and hover cards, then fetches and displays relevant ENS profile data and verifications right on the page.

Key Features

  • Automatic ENS Resolution:

    Whenever an ENS name is identified in a tweet or on a user’s profile, this extension queries the JustaName API to resolve and display associated ENS profile data.

  • Inline Profile Cards:

    On Twitter profiles displaying an ENS name, the extension injects an "ENS" button. Clicking this button shows an expanded ENS profile (powered by JustWeb3 Widget) inline.

  • Hover Cards:

    When you hover over an ENS name in a tweet, a small card appears that displays important ENS details and social verifications.

How It Works

1. Watching for ENS Names

  • The extension continuously checks elements on Twitter (X) for potential ENS names.
  • When an ENS-like string (e.g., example.eth) is found, the extension attempts to fetch and cache associated records via JustaName's hooks (useRecords from @justaname.id/react).

2. Rendering ENS Data

  • Detected ENS names will receive an "ENS" button on profiles or a clickable overlay in tweets.
  • Clicking or hovering reveals an inline ENS card powered by the @justweb3/widget, showing addresses, linked socials, and more.

3. Context and Shared State

  • The extension uses a shared context (SharedContext) to avoid re-fetching the same ENS multiple times, handling both resolvable and unresolvable names gracefully.

Installation

1. Clone or Download

Clone this repo or download the ZIP directly to get the extension source code.

2. Install Dependencies

From the root directory, run:

npm install

(or use yarn if you prefer.)

3. Build or Develop

  • Development:
npm run dev

This will open a local development server for the extension.

  • Production Build:
npm run build

or

npm run build:prod

This produces a final build/ directory that you can load into Chrome.

4. Load the Extension

  • Open Google Chrome and go to chrome://extensions.
  • Enable Developer Mode (toggle in the top right).
  • Click Load unpacked and select the build/ folder (or your dev output folder) generated by the build command.

5. Use on Twitter (X)

  • Navigate to twitter.com.
  • Whenever an ENS name is detected in a tweet, a hover card or inline button will appear.
  • On a user’s profile, you’ll see an "ENS" button on the page if an ENS name is matched. Click it to display the ENS profile card.

Support

For any questions or issues, please reach out at [email protected] or visit our website: JustaName.

Enjoy JustWeb3 — your ENS experience on Twitter (X). With JustaName’s robust resolution services, you’ll never have to wonder about an ENS name again.