Fix iframe detection

Fixes #138

Author: tomayac

demo/index.html

@@ -44,5 +44,21 @@ <h1>Browser-FS-Access.js Demo</h1>
       >.
     </p>
     <pre></pre>
+    <div class="iframes">
+      <h2>In same-origin iframe</h2>
+      <p>
+        If above it says "Using the File System Access API", then it should say
+        so in the iframe.
+      </p>
+      <iframe src="."></iframe>
+      <h2>In cross-origin iframe</h2>
+      <p>
+        Cross-origin iframes cannot use the File System Access API, so it uses
+        the fallback.
+      </p>
+      <iframe
+        src="https://tomayac.github.io/cross-origin-browser-fs-access/"
+      ></iframe>
+    </div>
   </body>
 </html>

demo/script.mjs

@@ -199,3 +199,7 @@ import { imageToBlob } from './image-to-blob.mjs';
   saveBlobButton.disabled = false;
   saveResponseButton.disabled = false;
 })();
+
+if (window.self !== window.top) {
+  document.querySelector('.iframes').remove();
+}

demo/style.css

@@ -34,3 +34,13 @@ img {
 code {
   font-family: ui-monospace, monospace;
 }
+
+.supported {
+  color: green;
+}
+
+iframe {
+  width: 100%;
+  height: 400px;
+  border: solid 1px #000;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-fs-access",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "File System Access API with legacy fallback in the browser.",
   "type": "module",
   "source": "./src/index.js",
@@ -50,7 +50,7 @@
   },
   "homepage": "https://github.com/GoogleChromeLabs/browser-fs-access#readme",
   "devDependencies": {
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.6.0",
     "http-server": "^14.1.1",

package.json

@@ -36,8 +36,9 @@ const supported = (() => {
     } catch {
       return false;
     }
-  } else if ('showOpenFilePicker' in self) {
-    return 'showOpenFilePicker';
+  }
+  if ('showOpenFilePicker' in self) {
+    return true;
   }
   return false;
 })();