how do I access host filesystem within devtool?

Skip to first unread message

Shi Yan

Aug 11, 2020, 11:35:11 AM8/11/20
to Chrome DevTools
I want to build an IDE to facilitate scraper development. 

The IDE will be a devTool. But I need to be able to open files/folders and write to them. The "Sources" tab in devtool can do that. How do I do the same in my devtool extension?


Aug 12, 2020, 10:37:04 AM8/12/20
to Chrome DevTools
You can utilize Native File System to open files and folders and read or write the contents.

Aug 13, 2020, 12:46:29 PM8/13/20
to Chrome DevTools
I tried this, totally not working.
await window.chooseFileSystemEntries(options) doesn't work either

Aug 13, 2020, 1:05:25 PM8/13/20
to Chrome DevTools
Uncaught (in promise) DOMException: Failed to execute 'chooseFileSystemEntries' on 'Window': Cross origin sub frames aren't allowed to show a file picker.
    at (chrome-extension://nadpfibhpdomkeafkmcoapimjohefkob/script.js:55:17)


Aug 13, 2020, 9:35:32 PM8/13/20
to Chrome DevTools
User action is required, which can be achieved using click or other mouse event, then, in main window

    const dir = await showDirectoryPicker();
    // set mode to readwrite for app/data directory
    const status = await dir.requestPermission({ mode: 'readwrite' });
    let fileHandle = await dir.getFileHandle('file', {
                                  create: true

To communicate with Chromium extension or Chromium app you can use messaging. This code uses Native Messaging and Native File System, messages are sent to and from main window to Chromium app, after setting permissions for location.origin by reading and re-writing manifest.json to dynamically set externally_connectable permissions for the site.

Reply all
Reply to author
0 new messages