fix: better readme for firefox install

packages/app/README.md

@@ -57,6 +57,6 @@ yarn prod:ext
 
 ### Installing for Firefox
 1. Go to: [**about:debugging**](about:debugging)
-2. Select: "**Enable add-on debugging**"
+2. Click on "**This Firefox**"
 3. Click on: "**Load Temporary Add-on…**"
-4. Open the newly created folder "**dist**" from the project folder, and choose the "**manifest.json**" file.
+4. Open the newly created folder "**dist**" from the project folder, and choose the "**manifest.json**" file.

packages/connect/src/auth.ts

@@ -70,6 +70,9 @@ export const authenticate = async ({
 
   const popup = popupCenter({
     url: `${authURL.origin}/index.html#/${path}?${urlParams.toString()}`,
+    // If the extension is installed, dont worry about popup blocking
+    // Otherwise, firefox will open the popup and a new tab.
+    skipPopupFallback: !!window.BlockstackProvider,
   });
 
   setupListener({ popup, authRequest, finished, authURL, userSession });

packages/connect/src/popup.ts

@@ -3,6 +3,7 @@ interface PopupOptions {
   title?: string;
   w?: number;
   h?: number;
+  skipPopupFallback?: boolean;
 }
 
 // Width 2px wider than in-page dialog.
@@ -18,6 +19,7 @@ export const popupCenter = ({
   title = defaultTitle,
   w = defaultWidth,
   h = defaultHeight,
+  skipPopupFallback,
 }: PopupOptions) => {
   const win = window;
   // Safari reports an incorrect browser height
@@ -66,5 +68,8 @@ export const popupCenter = ({
   }
 
   // no popup options, just open the auth page
+  if (skipPopupFallback) {
+    return newWindow;
+  }
   return window.open(url);
 };

packages/test-app/components/app.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider, Box, theme, Text, Flex, CSSReset, Button, Stack } from '
 import { Connect, AuthOptions, useConnect } from '@blockstack/connect';
 import { UserSession, AppConfig } from 'blockstack';
 
-const icon = `${document.location.href}/assets/messenger-app-icon.png`;
+const icon = `${document.location.origin}/assets/messenger-app-icon.png`;
 let authOrigin = 'http://localhost:8080';
 // In order to have deploy previews use the same version of the authenticator,
 // we detect if this is a 'deploy preview' and change the origin to point to the