start script: reuse tab if possible in more Chromium browsers (#1036)

Co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>

.changeset/new-eggs-admire.md

@@ -0,0 +1,24 @@
+---
+'sku': minor
+---
+
+Widen support for reusing existing browser tab to more Chromium browsers.
+
+`start` and `start-ssr` scripts would previously only reuse an existing tab in Google Chrome.
+This change adds support for the following Chromium browsers:
+
+- Google Chrome,
+- Google Chrome Canary,
+- Microsoft Edge,
+- Brave Browser,
+- Vivaldi,
+- Chromium,
+- Arc.
+
+A tab will be reused if:
+
+* The OS is macOS,
+* The user's default browser is a supported Chromium browser,
+* The user has an existing tab open in a supported Chromium browser with the exact same URL.
+
+If any of the above is not true, a new tab will be created in the user's default browser.

packages/sku/lib/openBrowser/index.js

@@ -1,33 +1,64 @@
 // Inspired by create-react-app
-// https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/openBrowser.js
+// https://github.com/facebook/create-react-app/commit/d2de54b25cc25800df1764058997e3e274bd79ac
 
 const execSync = require('node:child_process').execSync;
-const defaultBrowser = require('x-default-browser');
 const open = require('open');
 
 const isCI = require('../isCI');
 
-module.exports = (url) => {
+const OSX_CHROME = 'google chrome';
+
+const supportedChromiumBrowsers = [
+  'Google Chrome',
+  'Google Chrome Canary',
+  'Microsoft Edge',
+  'Brave Browser',
+  'Vivaldi',
+  'Chromium',
+  'Arc',
+];
+
+module.exports = async (url) => {
   if (process.env.OPEN_TAB !== 'false' && !isCI) {
-    defaultBrowser((err, res) => {
-      const useChrome = err ? false : res.isChrome;
+    const { default: getDefaultBrowser } = await import('default-browser');
+    const { name: defaultBrowser } = await getDefaultBrowser();
+
+    const availableBrowser = process.env.BROWSER;
+
+    const shouldTryOpenChromiumWithAppleScript =
+      process.platform === 'darwin' &&
+      (typeof availableBrowser !== 'string' ||
+        availableBrowser === OSX_CHROME) &&
+      supportedChromiumBrowsers.includes(defaultBrowser);
+
+    if (shouldTryOpenChromiumWithAppleScript) {
+      // Will use the first open browser found from list
+      const supportedChromiumBrowsersByPreference = new Set([
+        defaultBrowser,
+        ...supportedChromiumBrowsers,
+      ]);
 
-      if (process.platform === 'darwin' && useChrome) {
+      for (const chromiumBrowser of supportedChromiumBrowsersByPreference) {
         try {
           // Try our best to reuse existing tab
           // on OS X Google Chrome with AppleScript
-          execSync('ps cax | grep "Google Chrome"');
-          execSync(`osascript openChrome.applescript "${encodeURI(url)}"`, {
-            cwd: __dirname,
-            stdio: 'ignore',
-          });
-          return;
+          execSync(`ps cax | grep "${chromiumBrowser}"`);
+          execSync(
+            `osascript openChrome.applescript "${encodeURI(
+              url,
+            )}" "${chromiumBrowser}"`,
+            {
+              cwd: __dirname,
+              stdio: 'ignore',
+            },
+          );
+          return true;
         } catch (e) {
           // Ignore errors.
         }
       }
+    }
 
-      open(url, { url: true });
-    });
+    open(url, { url: true });
   }
 };

packages/sku/lib/openBrowser/openChrome.applescript

@@ -6,76 +6,87 @@ https://github.com/facebook/create-react-app/blob/master/packages/react-dev-util
 property targetTab: null
 property targetTabIndex: -1
 property targetWindow: null
+property theProgram: "Google Chrome"
 
 on run argv
   set theURL to item 1 of argv
 
-  tell application "Chrome"
+  -- Allow requested program to be optional,
+  -- default to Google Chrome
+  if (count of argv) > 1 then
+    set theProgram to item 2 of argv
+  end if
 
-    if (count every window) = 0 then
-      make new window
-    end if
+  using terms from application "Google Chrome"
+    tell application theProgram
 
-    -- 1: Looking for tab running debugger
-    -- then, Reload debugging tab if found
-    -- then return
-    set found to my lookupTabWithUrl(theURL)
-    if found then
-      set targetWindow's active tab index to targetTabIndex
-      tell targetTab to reload
-      tell targetWindow to activate
-      set index of targetWindow to 1
-      return
-    end if
+      if (count every window) = 0 then
+        make new window
+      end if
+
+      -- 1: Looking for tab running debugger
+      -- then, Reload debugging tab if found
+      -- then return
+      set found to my lookupTabWithUrl(theURL)
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        tell targetTab to reload
+        tell targetWindow to activate
+        set index of targetWindow to 1
+        return
+      end if
 
-    -- 2: Looking for Empty tab
-    -- In case debugging tab was not found
-    -- We try to find an empty tab instead
-    set found to my lookupTabWithUrl("chrome://newtab/")
-    if found then
-      set targetWindow's active tab index to targetTabIndex
-      set URL of targetTab to theURL
-      tell targetWindow to activate
-      return
-    end if
+      -- 2: Looking for Empty tab
+      -- In case debugging tab was not found
+      -- We try to find an empty tab instead
+      set found to my lookupTabWithUrl("chrome://newtab/")
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        set URL of targetTab to theURL
+        tell targetWindow to activate
+        return
+      end if
 
-    -- 3: Create new tab
-    -- both debugging and empty tab were not found
-    -- make a new tab with url
-    tell window 1
-      activate
-      make new tab with properties {URL:theURL}
+      -- 3: Create new tab
+      -- both debugging and empty tab were not found
+      -- make a new tab with url
+      tell window 1
+        activate
+        make new tab with properties {URL:theURL}
+      end tell
     end tell
-  end tell
+  end using terms from
 end run
 
 -- Function:
 -- Lookup tab with given url
 -- if found, store tab, index, and window in properties
 -- (properties were declared on top of file)
 on lookupTabWithUrl(lookupUrl)
-  tell application "Chrome"
-    -- Find a tab with the given url
-    set found to false
-    set theTabIndex to -1
-    repeat with theWindow in every window
-      set theTabIndex to 0
-      repeat with theTab in every tab of theWindow
-        set theTabIndex to theTabIndex + 1
-        if (theTab's URL as string) contains lookupUrl then
-          -- assign tab, tab index, and window to properties
-          set targetTab to theTab
-          set targetTabIndex to theTabIndex
-          set targetWindow to theWindow
-          set found to true
+  using terms from application "Google Chrome"
+    tell application theProgram
+      -- Find a tab with the given url
+      set found to false
+      set theTabIndex to -1
+      repeat with theWindow in every window
+        set theTabIndex to 0
+        repeat with theTab in every tab of theWindow
+          set theTabIndex to theTabIndex + 1
+          if (theTab's URL as string) contains lookupUrl then
+            -- assign tab, tab index, and window to properties
+            set targetTab to theTab
+            set targetTabIndex to theTabIndex
+            set targetWindow to theWindow
+            set found to true
+            exit repeat
+          end if
+        end repeat
+
+        if found then
           exit repeat
         end if
       end repeat
-
-      if found then
-        exit repeat
-      end if
-    end repeat
-  end tell
+    end tell
+  end using terms from
   return found
 end lookupTabWithUrl

packages/sku/package.json

@@ -138,7 +138,7 @@
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
     "wrap-ansi": "^7.0.0",
-    "x-default-browser": "^0.5.0"
+    "default-browser": "^5.2.1"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.3",