Add documentation for event listeners

[perklet]

I am new to js async/await functions. I thought that events such as chrome.browserAction.onClicked.addListener were also promisified (well, because they have callbacks). sadly, I was wrong. could you please add a clarification says that eventlistners are not async-able.

[KeithHenry]

As a listener will fire each time the event happens it doesn't work as a single Promise. It might be a good fit for an async iterator though (currently coming in Chrome 60 behind a flag).

I'll add a clarification.

[perklet]

async iterator sounds fun, I haven't even heard about it. BTW, excellent work.

[KeithHenry]

If you have Chrome Canary I've written a proof of concept you can play with here: https://github.com/KeithHenry/event-generator

When the async iterator feature goes live (Chrome 60 or 61, probably) I'll add it to this project.

Cheers :-)

[KeithHenry]

Added clarification to documentation. I've incremented the version, but will hold off bower and npm updates for such a small docs change, as I want to see what the plan is with observable/async-iterator functionality in the next Chrome (>v60) first.

[avalanche1]

So.. wad up with async itearators? Chrome 78 is in the backyard :)

[KeithHenry]

@avalanche1 it's on my todo list, but it's a fair amount of work. PRs welcome :-)

[KeithHenry]

@avalanche1 I've had a dig into using async itearators - there are already lots of observer-pattern wrappers out there (I wrote one for DOM events), allowing you to do something like:

for await (const e of observe(chrome.browserAction.onClicked.addListener)) {
    // clicked

However, stitching that into the API the way that callbacks become promises is messy. Instead of a promise that persists for one iteration we have an async iterable that we don't want to create automatically.

I think a wrapper that turns every ...on{Event}.addListener into an async iterable might be out. Users will need to opt in to something with some kind of helper method.

I'll keep looking in to that.

[avalanche1]

Maybe it would be easier to just wrap it with rx.js observable... https://stackoverflow.com/a/51052780/4507580

[KeithHenry]

@avalanche1 exactly - you can use your own observable easily enough.

[fernaoguerra]

HI Guys, I know this is closed and I am new to this JS thing... I am having a hard time getting elements from the site on the background.js and use it on the chrome.browserAction.onClicked.addListener.

I looked at the example, but was still not able to figure it out.

Here is my code:

chrome.browserAction.onClicked.addListener(getDataFromTicker);

async function getDataFromTicker(){
    var ticker = document.title.split(" ")[0].slice(0,-1)
    console.log(ticker)
    console.log("Test")
    return ticker;
  }

I can see the "Test" log. But it looks like console.log(ticker) is empty.

Any good soul can help me getting this code to work with this lib?

Thanks!

[avalanche1]

@fernaoguerra your problem is unrelated to this issue. Your code doesnt work because you are running it in the background script (evidently; chrome.browserAction listenders dont work anywhere else) whose title is always "". You should do some message passing between BS and the content-script that is loaded on the page whose title you're trying to read. Also, remove the async part from your function since there are no promises inside of it.