 Ah, I love extension. Let me look for an extension to help me stay focused when reading documentation. Oh wow, this Oliver focus mode seems great. Let me install that. Oh hey Oliver, what are you doing here? Oh hey Jesslyn, I'm here to help you get started with this extension, and debug is needed along the way. Oh nice, take it away. So let me start by telling you what this extension does. Once you install this extension, you can click the extension's action icon when browsing our developer docs to enter focus mode. We'll add some CSS to the page, hiding a number of elements and letting you focus on the content. Cool, how do you feel that it's an extension, a web application? Not quite. They use very similar technologies, HTML, CSS and JavaScript, but they can be installed by a user from the Chrome Web Store and have access to special APIs that give them additional control over the browser. Think of them as a way of extending Chrome to make it your own. And if you've not built one before, we have a number of samples which make for a great starting point. Just head to the link below. I see. Hang on a minute. I have installed the extension. It doesn't seem to be working though. Um, I'm sure it worked on my machine. Well, let's debug it together and find out what went wrong. First, let's load the source code into Chrome. I'll head to chrome colon slash slash extensions, enable developer mode in the top right and choose load extension. I'll find the folder with my code and load it in. Ah, I can see there's an error already. I can click to view the errors here on the extensions page or click service worker to inspect my background context and see exactly what's happening in the console. This looks like a typo and an easy fix. I just need to make sure the method I'm calling actually exists. Ah ha, that's how you debug an extension. One question though, do you need to reload the extension every time you make changes? Great question. For some changes, you don't, but generally it's a good habit. Some changes are only picked up when you reload and it also makes sure any initialization logic you've changed can be rerun. It's super easy. You just need to click this reload button on the Chrome extensions page and you don't even need to close dev tools. Also, you might wonder why we're in a separate dev tools here. That's because we're inspecting the extension service worker, which is independent of any specific page. The UI should hopefully be familiar though. I see. While we are here, is there anything else interesting? Absolutely. On the memory panel, I can make sure I'm not using too much memory. I can even see what specific data is in memory to make sure there's nothing surprising. Hey look, if I search for developer.chrome.com, I can see one of the URLs we have as a variable. There's a lot to explore here and we only have so much time today, but I'd encourage you to take a look if it interests you. Oh, and don't forget, while DevTools is open, your service worker is kept alive and will never be terminated. Does it matter if the service worker is alive or terminated? Yes and no. If you're stepping through some code, it's helpful for the service worker to stay alive so you don't lose your place. But if you want to fully test your extension from a user's point of view, it's important to make sure it works correctly when the service worker has been terminated and then wakes back up. So when you're testing lifetime behaviour specifically, closing DevTools can be a good idea. I feel like we have learned a lot already. Somehow, the app is still not working. Why only word why? Hmm, maybe there's something wrong with a content script? Content script? Yeah, these are scripts injected by the extension into a web page. They run directly inside a page, although with some isolation from the main JavaScript environment. I see. Let's set a breakpoint to debug our scripts. While we're looking at a page in the extension section of developer.chrome.com, let's open the sources panel and select the content scripts tab. Find your extension among the others and then find the script you'd like to debug. This is the function that should be running. Let me add a breakpoint and then toggle the action. It does seem to pause. Let's hover over the message variable. Ah, there's a data property, so I need to check if message.data is focused on and not just message. Let's fix that. Cool. If you want to learn more about breakpoint debugging, definitely check out my previous video on that. Eh? There is a warning message here. What happened? Yeah, DevTools ignores content scripts by default, which changes how they behave with certain features. You can remove this file from the ignore list. Even better, if you regularly debug different content scripts and extensions, you can configure DevTools to include all content scripts by default. Nice, a small tip here. If you frequently use the content scripts tab, you can drag it to the front to assess it quicker. Oh nice, I honestly didn't know that. Oh well, seems like we have fixed all the issues. Is Oliver Focus mode working now? I hope so. Let's give it a try, shall we? Awesome, it works. Let's check it works even if the service worker is terminated. We can go to Chrome colon slash slash service worker dash internals and terminate our service worker. Look, it's still working. I think our job here is done. Yay, thanks for showing us how to debug extensions. Where can we learn more apart from this video? Sure, you can go to this link to learn the basics of extensions. Great, that's all for today. Have fun building extensions. See you for the next step to tips. Ciao!