Keeping FileSystemDirectoryHandle object in Chrome Extension

Question

I'm working on Chrome extension. Inside popup I can run window.showDirectoryPicker(), which returns object of type FileSystemDirectoryHandle.

My problem is that after changing tab in browser popup is automatically closed, so object is destroyed.

My question is: is there any way to pass this object to any other context (for example to ServiceWorker or other window)?

Or if it is not possible, is there any way for invoking window.showDirectoryPicker() inside extension's ServiceWorker?

score 2 · Answer 1 · answered Dec 09 '21 at 19:59

Send the handle via the standard service worker messaging from an extension page:
```
(async () => {
  const handle = await window.showDirectoryPicker();
  const swr = await navigator.serviceWorker.ready;
  swr.active.postMessage(handle);
})();
```
In the service worker, use self.onmessage = e => { console.log(e) };
Note that it'll print in the background devtools.

Copy from one extension page to another extension page that is currently open via getViews:

chrome.tabs.create({url: 'another.html'}, async tab => {
  await new Promise(resolve => {
    chrome.tabs.onUpdated.addListener(function onUpdated(tabId) {
      if (tabId === tab.id) {
        chrome.tabs.onUpdated.removeListener(onUpdated);
        resolve();
      }
    });
  });
  const wnd = chrome.extension.getViews({tabId: tab.id})[0];
  wnd._handle = handle;
  // `another` page will see a global variable `window._handle`
});

Send via BroadcastChannel within the extension pages or the service worker.
Save it in IndexedDB and reuse it in the future.

Keeping FileSystemDirectoryHandle object in Chrome Extension

1 Answers1