Add experminetal cross-browser support.

Author: DisboxApp

package-lock.json

@@ -16,7 +16,7 @@
     "bootstrap": "^5.1.3",
     "fetch-jsonp": "^1.2.1",
     "js-sha256": "^0.9.0",
-    "native-file-system-adapter": "^2.0.1",
+    "native-file-system-adapter": "^3.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",

package.json

@@ -15,8 +15,7 @@ import NavigationBar from './NavigationBar';
 import PathParts from './PathParts';
 import SearchBar from './SearchBar';
 import ThemeSwitch from './ThemeSwitch';
-
-const EXTENSION_URL = "https://chrome.google.com/webstore/detail/disboxdownloader/jklpfhklkhbfgeencifbmkoiaokeieah";
+import ExtensionDialog from './ExtensionDialog.js';
 
 const darkTheme = createTheme({
     palette: {
@@ -60,20 +59,8 @@ function App() {
     const [currentAction, setCurrentAction] = useState("");
     const [showProgress, setShowProgress] = useState(false);
     const [progressValue, setProgressValue] = useState(-1);
-    const [showExtensionDialog, setShowExtensionDialog] = useState(false);
-
 
     useEffect(() => {
-        try {
-            chrome.runtime.sendMessage("jklpfhklkhbfgeencifbmkoiaokeieah", { message: {} }, response => {
-                if (!response || !response.installed) {
-                    setShowExtensionDialog(true);
-                }
-            });
-        } catch {
-            setShowExtensionDialog(true);
-        }
-
         const webhookUrl = localStorage.getItem("webhookUrl");
         async function init() {
             if (webhookUrl) {
@@ -307,23 +294,7 @@ function App() {
             <NavigationBar />
             <ThemeProvider theme={theme ? darkTheme : lightTheme}>
                 <CssBaseline />
-                <Dialog open={showExtensionDialog} onClose={() => { setShowExtensionDialog(false) }}>
-                    <DialogTitle>Warning</DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>
-                            Disbox recommends using the official Disbox chrome extension for
-                            better download speeds and increased security.
-                        </DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => { setShowExtensionDialog(false) }}>Remind me later</Button>
-                        <Button variant="contained" onClick={() => {
-                            setShowExtensionDialog(false);
-                            window.open(EXTENSION_URL, "_blank").focus();
-                        }} >Install</Button>
-                    </DialogActions>
-                </Dialog>
-
+                <ExtensionDialog/>
                 <Snackbar
                     message=""
                     anchorOrigin={{ vertical: 'bottom', horizontal: 'right', }}
@@ -391,7 +362,7 @@ function App() {
                             showColumnRightBorder={false}
                             onCellEditCommit={onCellEditCommit}
                             onCellDoubleClick={onCellDoubleClick}
-                        />
+                                                    />
                     </div>
                 </div>
             </ThemeProvider>

src/App.js

@@ -0,0 +1,43 @@
+/*global chrome*/
+import React, { useEffect, useState } from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+
+const EXTENSION_URL = "https://chrome.google.com/webstore/detail/disboxdownloader/jklpfhklkhbfgeencifbmkoiaokeieah";
+
+var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
+
+export default function ExtensionDialog() {
+    const [showExtensionDialog, setShowExtensionDialog] = useState(false);
+
+    useEffect(() => {
+        try {
+            chrome.runtime.sendMessage("jklpfhklkhbfgeencifbmkoiaokeieah", { message: {} }, response => {
+                if (!response || !response.installed) {
+                    setShowExtensionDialog(true);
+                }
+            });
+        } catch {
+            setShowExtensionDialog(true);
+        }
+    }, []);
+
+    return (<Dialog open={showExtensionDialog} onClose={() => { setShowExtensionDialog(false) }}>
+        <DialogTitle>Downloads may be slow</DialogTitle>
+        <DialogContent>
+            <DialogContentText>
+                Disbox recommends using {!isChrome && "Google Chrome with"} the official Disbox Chrome extension for
+                better download speeds and increased security.
+            </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={() => { setShowExtensionDialog(false) }}>Remind me later</Button>
+            <Button variant="contained" onClick={() => {
+                setShowExtensionDialog(false);
+                window.open(EXTENSION_URL, "_blank").focus();
+            }} >Install</Button>
+        </DialogActions>
+    </Dialog>
+    );
+}

src/ExtensionDialog.js

@@ -1,5 +1,7 @@
 import * as mime from 'react-native-mime-types';
 import { FILE_DELIMITER } from "./disbox-file-manager";
+import { showSaveFilePicker } from "native-file-system-adapter";
+
 
 export function getMimeType(name) {
     return mime.lookup(name) || 'application/octet-stream';
@@ -17,7 +19,7 @@ export async function pickLocationAsWritable(suggestedName) {
             accept: {[mimeType]: [extension] }
         }]
     }
-    const fileHandler = await window.showSaveFilePicker(pickerConfig);
+    const fileHandler = await showSaveFilePicker(pickerConfig);
     return await (await fileHandler.createWritable()).getWriter();
 }