0

I'm attempting to learn more about chrome extensions and the best way I learn is by looking at stuff that works and trying to understand what it is doing. Well I've gotten a decent understanding of one I've been looking at but I see quite a few odd things that I'm not really sure why they are written that way. Here is a snippet of what I'm looking at:

chrome.runtime.onMessage.addListener((o, s, c) => {
  c(),
  (function(o, s, c) {
    <code>
  })
  (o.url, o.headers)
});

What I don't understand is why the first 2 statements are separated by a comma while the 3rd is just wrapped in parenthesis. If I remove the comma, then there is an error in the console stating

Error in event handler: TypeError: c(...) is not a function

It almost seems like somehow that is linking the c function with the function after the comma. I really don't know what is happening with it and it's not the only place that I see it. In the background.js the chrome.webRequest.onSendHeaders.addListener() is separated by a comma from the next function of chrome.runtime.onMessage.addListener()

chrome.webRequest.onSendHeaders.addListener(
  <code>
),
chrome.runtime.onMessage.addListener(
  <other code>
)

Tried to look up as best I could but couldn't quite find anything that answered my question. Can anyone explain it to me?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Tapialj
  • 333
  • 2
  • 3
  • 11
  • 3
    The third are arguments to the anonymous function. Arguments have to be in parentheses. – Barmar Apr 06 '23 at 16:58
  • 3
    This seems to be minified code that has been formatted more neatly, they've used commas instead of the normal semicolons between expressions. See the [comma operator](https://stackoverflow.com/questions/3561043/what-does-a-comma-do-in-javascript-expressions) – Barmar Apr 06 '23 at 16:58
  • The code was minified when I opened it from the chrome folder, I used a website to unminify it, so that would make sense. So it might be possible to replace them with a semicolon? – Tapialj Apr 06 '23 at 17:04
  • 1
    You shouldn't try to learn from minified code, because that's going to be very frustrating. Better to find non-minified and well-commented code. – Thomas Mueller Apr 06 '23 at 17:46

1 Answers1

1

This is essentially equivalent to this code:

The minified code is using the comma operator instead of semicolon between statements.

It's using an IIFE to create a nested variable scope for <code>. (o.url, o.headers) are the arguments to the IIFE. In modern ES6 syntax this can be done using a block and let variable bindings.

I've renamed the o parameter to the listener to o1 so it doesn't conflict with the o variable in the nested block.

chrome.runtime.onMessage.addListener((o1, s, c) => {
  c(); 
  {
    let o = o1.url;
    let s = o1.headers;
    let c;
    // <code>
  }
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thank you! So it just looks like because it was minified code that I'm not quite familiar with. It definitely makes much more sense now. – Tapialj Apr 06 '23 at 17:15
  • 1
    Yes, also because block scope is an ES6 enhancement to the language. In the past, IIFEs were used for this purpose. – Barmar Apr 06 '23 at 17:16