How to read Blob synchronously in Javascript?

Question

I'm writing a chrome extension to intercept WebSocket traffic, by hooking the function WebSocket.send, like:

var _send = WSObject.send
WSObject.send = function (data) {
    arguments[0] = my_hook_function(data)
    _send.apply(this, arguments)
}

function my_hook_function(data) {
    // how to read the data here synchronously?
    return data
}

The my_hook_function should be synchronous. The type of data is Blob, I can't find a synchronous API for reading the Blob. Google says there is FileReaderSync but I tried in console and this class does not exist.

How to solve it?

Emiel Zuurbier · Accepted Answer · 2022-01-19 12:02:47Z

There isn't a synchronous FileReader in client-side JavaScript. And you can't make it synchronous either. So instead you should make everything async.

Use the regular FileReader object and wrap it inside of a Promise. By using async / await you can wait for the file reader to be finished before continuing and sending over the value.

var _send = WSObject.send
WSObject.send = async function(data) {
  const result = await my_hook_function(data);
  _send.call(this, result);
};

function my_hook_function(data) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = ({ target }) => resolve(target.result);
    reader.onerror = error => reject(error);
    reader.readAsText(data);
  });
}

Sidenote: If WSObject.send expects a single argument, then the .call method will suffice. It's similar to .apply with the only difference that .call expects one or more arguments to pass, and .apply an array of arguments.

Also, try to avoid the arguments object and use rest parameters if possible.

fuweichin · Accepted Answer · 2023-08-29 10:07:57Z

0

Synchrounous XHR can help, but it is deprecated in main thread. You may use URL.createObjectURL, XMLHttpRequest#overrideMimeType to achieve that. see CodePen snippet FileReaderSync equivalent for main thread

Another approach is to migrate to web worker and use FileReaderSync.

answered Aug 29, 2023 at 10:07

fuweichin

2,00023 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to read Blob synchronously in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related