Need to hook to function of the Web API, is it possible?

Question

I'm trying to hook into a function that comes with the File System Access API.

For example when the web site used the File System Access API as shown in below.


// store a reference to our file handle
let fileHandle;

async function getFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.type === 'file') {
    // run file code
  } else if (fileHandle.type === 'directory')
    // run directory code
  }

}

It is possible to hook Web APIs with JavaScript? I mean how can I stop process of the web site when it used this API?

Not entirely sure what you mean by "stop process of the web site". The API is asynchronous on purpose, so the call to open a file is not blocking. — DenverCoder9, Jan 28 '21 at 14:39

score 1 · Answer 1 · answered Feb 23 '21 at 14:51

If by "hook" you mean intercept when the function was called, then you could override the built-in function like so:

const originalShowOpenFilePicker = window.showOpenFilePicker;
window.showOpenFilePicker = (...args) => {
  console.log('Modified `showOpenFilePicker` called with these arguments:', args);
  // Block the page by calling `while (true) {}`,
  // but nor sure if this is what you mean. The
  // `return` statement below would be never reached
  // in this case. 
  return originalShowOpenFilePicker(...args);
};

Need to hook to function of the Web API, is it possible?

1 Answers1