Focus Mode sample extension tutorial is missing two consts

[Jakedalus]

⚠️ This is for issues with the https://developer.chrome.com site, not Chromium itself. If you want to file a bug with Chromium (the open-source project behind Google Chrome and other browsers), please use https://crbug.com.

Describe the bug Step 4 of the Focus Mode tutorial is missing the consts extensions and webstore which are used in the addListener

To Reproduce Steps to reproduce the behavior:

1. Go to Step 4
2. See that the two consts aren't defined anywhere in the tutorial writeup

Expected behavior The consts should be defined above the addListener call

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[AmySteam]

@Jakedalus Thanks for catching this! 🙂 👍

[azigler]

@AmySteam Related to this issue, the tutorial instructions you to make your manifest.json look like this:

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable reading mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

But without an actions property in your manifest.json, onClicked will be undefined for chrome.action in background.js with this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

Looking at the example code, it has this in the manifest.json:

...
"action": {
  "default_icon": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
},
...

I added "action": {} to my manifest.json and was able to finish the tutorial successfully (after adding the two consts mentioned in this this PR).

Great tutorial! Really enjoying learning about V3! 🎉

[AmySteam]

@azigler Glad to hear you are enjoying the tutorial! 😄

Looks like I added the action key in Step #3. 🤔 I tried to explain the different keys in separate steps, but I may have to tweak it a bit so that other developers don't have this problem.

I'm happy you were able to complete it in the end! 🎉

[azigler]

@azigler Glad to hear you are enjoying the tutorial! 😄

Looks like I added the action key in Step #3. 🤔 I tried to explain the different keys in separate steps, but I may have to tweak it a bit so that other developers don't have this problem.

I'm happy you were able to complete it in the end! 🎉

Oops, I didn't catch that part. Thanks for pointing it out!

[AmySteam]

Fixed with #3993