[New sample] Open Chrome API reference page (omnibox, alarms, messaging sample)

[AmySteam]

User Story

As a web developer, I want to open extension API reference pages on Chrome, so that I can quickly learn how to use a specific extension API.

Bonus: A daily extension tip will be displayed as a popover after clicking the "tip" navigation list item.
(Currently, it requires Canary build and the "Experimental Web Platform features" flag enabled. The release date was moved to M114, so this approach may need to be abandoned if we want to launch before then.)

How to use it?

1. Enter the keyword "api" in the browser address bar.
2. Then, press "tab" or "space".
3. Start typing they API keyword.
4. A list the most common APIs will show or a list of past searches
5. Select the API desired, and a new page will open to the Chrome API reference page.

TODO:

• The Popover API is currently being developed. If it's not ready by the launch, then we will make adjustments. The popover was chosen to simplify the example.
• The ReadME.md will have a link to the tutorial

[sebastianbenz]

This looks great - just a super quick first pass with a few nits.

[sebastianbenz]

suggestion: move to a separate JSON file

[AmySteam]

I think we are already giving an example of how to fetch with the extension tips feature. I think, if SW supported Import assertions, I would be more open to moving this into a separate JSON file.

How about I move it into a separate JS file? 🧐😁

[sebastianbenz]

Please use async await

[AmySteam]

I used .then() here b/c the return value of the onMessage listener determines if Chrome expects sendResponse to be called.

If we use async/await, this function will return a Promise, and Chrome will always expect sendResponse to be called.

We could wrap the call to .get() in an async IIFE, but it seems like overkill for this tutorial😊

[sebastianbenz]

I didn't know that, have you got a link to where this is explained. Curious to learn how this works.

[AmySteam]

Here's the section that explain this, but I think it can be explained better:

// Don't use an async function to handle messages 
// b/c an async function always returns a Promise object
// a Promise object is always truthy 
// regardless of the value that the Promise contains
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.greeting === "hello") {
        // start a call to get a value from storage
        chrome.storage.local.get("name").then(({ name }) => {
            // this runs after the onMessage handler returns
            sendResponse(`my name is ${name}`)
        })
        // the onMessage handler should return truthy if sendResponse will be called
        return true
    }
    // the onMessage handler should return falsy if sendResponse will not be called
    return false
})

returns boolean | undefined

[sebastianbenz]

Thanks ! That's not intuitive.

One thing: maybe rename the message field from greeting to type as it better expresses what this field is used for.

[AmySteam]

@sebastianbenz Thanks for the review. I applied most of your suggestions. I wrote comments on the suggestions I had a few thoughts on.

[sebastianbenz]

Thanks! Left a few more comments, only nits.

[sebastianbenz]

nit: can you pick a name that better explains what input is?

[sebastianbenz]

I didn't know that, have you got a link to where this is explained. Curious to learn how this works.

[sebastianbenz]

This looks good, once https://github.com/GoogleChrome/chrome-extensions-samples/pull/848/files#r1144016971 is fixed.

[jpmedley]

@AmySteam, later today adding a 'latest samples' entry to 'What's new'. It would be cool to include this, but I don't know how much more work you have.