now to recap, Chrome provides extensions with many special purpose A P I. S, for example runtime alarms, Idol, etcetera. And here is a list of all the A P I. S that Chrome provides which you can use in your own extension and whenever we want to use any of these a P I s, we have to declare them in the permissions in our extensions manifest file. So out here we are going to be using the idol api which is used to detect when the machine's idle state changes. So I'll head back to the code editor and let's start off by declaring a few global variables and this is going to be happening in the main dot Js file, which you should already have in your folder but it's empty. So let's go ahead and start working on the functionality. So we have a couple of global variables. So we have const button which is equal to document get element by ID D and the I D. Is is going to be start timer. And basically what we're doing is we're getting this button here with an idea of a start timer. So that's the start button in our extension. So let's go ahead and put this in. So the I. D. Is start timer. So camel casing and then we are going to declare another variable. And let's call this display time and display time is going to be the area. The space in our Chrome extension where the time is going to be displayed. So basically we have the start button and just below the start button, we're going to be displaying, displaying the time. And let's go head back. And this, the idea for this is going to be a show timer. So let's head back. So document dot get element by ID D. And the I D out here is a show timer. Okay? And then we have another variable. So constant music is equal to document dot get element by ID D. And I'm going to be getting the audio element from my index dot html, which has an idea of audio. So get element by ID D. Audio. Okay? And now I'm going to have so we have three variables which reference dom elements, and then we're also going to have another variable. So let music interval and this this variable is a reference to the alarm sound, which is going to be played every one second. And then we also have a variable which we'll call time and time will reference the set interval method. Okay? And this is going to be used for actually updating the time everyone a second. Okay? Now let's go ahead and uh first work on detecting the active and idle state in our extension and for this part we're going to be using the Idol ap eyes, set detection interval. So let's go ahead and use uh the Crume dot idol api And for this we're going to say, well, chrome dot Idol a p I use the set detection uh set detection interval and we are going to be setting it at 15 seconds. Okay, now let's detect when the user is in active and idle states. This means that we have to listen out for when the state changes. And for this part we're actually going to be using um chrome got idol dot on state changed. And this will detect when a user moved from the idle state to active state and vice versa. And we're going to be adding a listener to our rent handler and this is going to be taking a call back a function as an argument. So I'll just put it out here. So function state. So this is going to take the state as an argument. And basically in our callback function, we're going to be displaying the state as the inner html of uh inside of a display time. Right? So we're going to be displaying the state in this show timer, P element. Okay, so out here, well say display time. Got inner html is equal to state. Eventually we will we will be changing this so that instead of showing islands uh and active States were actually just showing the time. But for now let's go ahead. And first at least verify that the ap or our extinction is correctly detecting when a user moves from idle to active state and vice versa. So let's go ahead and control. S and then let me just double check I did that. Okay, so I'm just saving everything and head back to chrome and I will remove this and once again going to upload our chrome extension, Okay, And let's try this out. So Right now I'm just going to remain idle and we'll see what happens after the 1st 15 seconds of remaining idle because remember that the set detection interval method is taking 15 seconds as an argument and there you go. So we see the state idle displayed, and once I move my mouse on the page, it now says active and after 15 seconds basically it's just going to detect the state again. So if I remain idle now there is no activity going on for 15 seconds. The active state will change once again to idle state. There you go. And if I move my mouse down and I, you know, press this button, do anything on the web page, it moves it now displays active state. Okay, So now we're going to be working on the next part and basically in our extension we only want to play the alarm sound if the state is idle, which means that you're procrastinating. So let's go ahead and start working on that next