# ChromeExtensionInstall > Three-step install flow for a Chrome extension (add from the Web Store, pin, sign in) with a detected state, re-check, sign-in action and a notice for unsupported browsers. Source: https://docs.nasaqui.com/components/chrome-extension-install ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/chrome-extension-install.json ``` Walks someone through installing your browser extension: open the Web Store, pin it, sign in. It shows whether the page found the extension, marks finished steps and keeps the next one in front. Presentational: you tell it what was detected. ## When to use - Onboarding for a product that has a companion extension. ## When not to use - Extensions for other stores (Firefox, Safari): pass your own `storeUrl` and `supported`, or build a separate flow. ## Import ```tsx import { ChromeExtensionInstall } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { ChromeExtensionInstall } from "@fadymondy/nasaq/web"; declare const state: { installed: boolean; signedIn: boolean }; declare const ext: { ping(): Promise; signIn(): Promise }; export function Install() { return ( ext.ping()} onSignIn={() => ext.signIn()} /> ); } ``` ## Anatomy ``` ChromeExtensionInstall data-slot="chrome-extension-install" (data-state="missing|installed|ready") ├─ unsupported Alert when `supported` is false ├─ detected row data-slot="extension-detected": Status + Check again ├─ steps (ol) data-slot="extension-step" (data-state="done|current|todo") │ ├─ 1 Add from the store link button (data-slot="extension-store-link") │ ├─ 2 Pin "I pinned it" (the page cannot detect pinning) │ └─ 3 Sign in button, error line └─ ready Alert when all three are done ``` ## API **ChromeExtensionInstall**: every `div` prop except `children`, plus: | Prop | Type | Default | Description | | --- | --- | --- | --- | | `storeUrl` | `string` | required | The Web Store page. | | `installed` | `boolean` | required | Whether the page found the extension. | | `version` | `string` | | Shown when detected. | | `signedIn` | `boolean` | `false` | Whether the extension is signed in. | | `pinned`, `defaultPinned`, `onPinnedChange` | | uncontrolled | The person confirms pinning. | | `onCheck` | `() => Promise` | | Shows Check again. Update `installed` afterwards. | | `onSignIn` | `() => Promise` | | Runs the sign-in step. | | `supported` | `boolean` | `true` | Show a notice for browsers that cannot install it. | | `storeButton` | `ReactNode` | text | Replace the button content, for example a badge you are licensed to use. | | `labels` | `Partial` | | Override any string. | ## Examples **Unsupported browser** ```tsx import { ChromeExtensionInstall } from "@fadymondy/nasaq/web"; export const Firefox = () => ; ``` ## Accessibility - Steps are an ordered list; the current step has `aria-current="step"` and each has screen-reader text ("Step 2 of 3, current"). - The detected row is `role="status"`. Sign-in errors are `role="alert"`. ## RTL & i18n - English and Arabic strings follow the Nasaq locale; the step rail mirrors. ## Styling & tokens - Built on `Card`, `Button`, `Status`, `Alert` and `--nq-*` tokens. - Target `[data-slot="extension-step"][data-state="current"]`. ## Do / Don't - Do detect the extension with a message or a marker the extension adds to the page. - Don't claim you can detect pinning: ask. - The Chrome and Web Store marks are Google's. This component uses text; use Google's badge only under its brand rules, through `storeButton`. ## Related - [`WhatsappQrConnect`](https://docs.nasaqui.com/components/whatsapp-qr-connect) - [`IntegrationConnector`](https://docs.nasaqui.com/components/integration-connector) ## Lab https://docs.nasaqui.com/?path=/docs/components-apps-platforms-chrome-extension-install--docs ## Code ### React ```tsx import { ChromeExtensionInstall } from "@fadymondy/nasaq/web"; declare const state: { installed: boolean; signedIn: boolean }; declare const ext: { ping(): Promise; signIn(): Promise }; export function Install() { return ( ext.ping()} onSignIn={() => ext.signIn()} /> ); } ``` ### shadcn ```tsx import { ChromeExtensionInstall } from "@/components/ui/chrome-extension-install"; declare const state: { installed: boolean; signedIn: boolean }; declare const ext: { ping(): Promise; signIn(): Promise }; export function Install() { return ( ext.ping()} onSignIn={() => ext.signIn()} /> ); } ``` ### Vue ```vue ``` ### Blade ```blade ``` ### HTML + Alpine ```html

Install the browser extension

Three steps: add it, pin it, sign in.
Extension not detected yet

  1. Step 1 of 3, current: Add it from the Chrome Web Store

    Open the store page and choose Add to Chrome, then confirm in the pop-up.

    Open the Chrome Web Store

  2. Step 2 of 3, to do: Pin it to the toolbar

    Click the puzzle-piece Extensions button next to the address bar, then the pin beside the extension. It stays one click away.

    Do the step above first.

  3. Step 3 of 3, to do: Sign in from the extension

    Click the extension, then Sign in. It uses your account, so nothing is typed twice.

    Do the step above first.

```