jwf-common-python 1.0.0__py3-none-any.whl

jwf_common_python/parse_subtitle/aa.vtt

@@ -0,0 +1,2364 @@
+WEBVTT
+Kind: captions
+Language: en
+
+00:00:00.160 --> 00:00:03.360
+If you want to create your own Chrome 
+extension, you're in the right place.  
+
+00:00:03.920 --> 00:00:08.640
+In this course, Raman will teach you how 
+to create a Chrome extension using the new  
+
+00:00:08.640 --> 00:00:15.920
+iteration of the web extensions platform, which is 
+called Manifest v3. Rahman is a great instructor.  
+
+00:00:16.640 --> 00:00:23.120
+And he works for pieces that app pieces that app 
+provided a grant that made this course possible,  
+
+00:00:23.120 --> 00:00:27.680
+but you don't have to use their extension to 
+follow along share in the comments what type  
+
+00:00:27.680 --> 00:00:32.240
+of Chrome extension you want to make. Now the 
+reason I want to teach about this particular  
+
+00:00:32.240 --> 00:00:38.320
+topic is I've created two web extensions in my 
+career. The first is for a previous company,  
+
+00:00:38.320 --> 00:00:43.760
+where my extension generated a significant amount 
+of revenue for the company. And the second for my  
+
+00:00:43.760 --> 00:00:49.120
+current company pieces, where our web extensions 
+play a critical part of our product stack,  
+
+00:00:49.120 --> 00:00:52.560
+and help developers across the 
+globe boost their productivity.  
+
+00:00:53.520 --> 00:00:58.320
+I'm going to be using the pieces web extensions 
+and integrations quite a bit in this video. So if  
+
+00:00:58.320 --> 00:01:03.520
+you're interested in downloading an AI coding 
+assistant that helps you save and reuse code  
+
+00:01:03.520 --> 00:01:10.560
+snippets, convert screenshots to code, and more, 
+go ahead and download pieces in the description.  
+
+00:01:10.560 --> 00:01:14.880
+And you can totally follow along. So during 
+my journey as a Chrome extension developer,  
+
+00:01:14.880 --> 00:01:20.640
+I did often notice that tutorials and 
+StackOverflow answers were using outdated versions  
+
+00:01:20.640 --> 00:01:26.000
+of the web extensions platform. My hope for you 
+after you leave this video is that you have a  
+
+00:01:26.000 --> 00:01:30.240
+resource to create a modern Chrome extension, 
+and you understand the difference between  
+
+00:01:30.800 --> 00:01:36.480
+the newer version of the web extensions 
+platform manifest v3, and older versions. Now,  
+
+00:01:36.480 --> 00:01:39.840
+before we get started, there's going to 
+be three prerequisites to this course,  
+
+00:01:40.640 --> 00:01:44.960
+the first is required, and it's that you have 
+a basic understanding of JavaScript and DOM  
+
+00:01:44.960 --> 00:01:50.160
+manipulation. The second is optional. If you 
+want to follow along with this video and code  
+
+00:01:50.160 --> 00:01:55.440
+alongside with me, you can go to the description 
+below, I'm gonna have a link to my GitHub repo,  
+
+00:01:55.440 --> 00:02:00.960
+go ahead and get cloned that and you'll be able 
+to follow along. The third is also optional.  
+
+00:02:00.960 --> 00:02:06.880
+If you totally want to follow along, you can go 
+ahead to pieces dot app and install a pieces IDE  
+
+00:02:06.880 --> 00:02:12.240
+integration along with the pieces Web Extension, 
+and you'll be able to use pieces exactly the way I  
+
+00:02:12.240 --> 00:02:17.680
+do in this video. With that, let's get started. So 
+as I mentioned before, the extension we're going  
+
+00:02:17.680 --> 00:02:22.960
+to create as a YouTube bookmarker. Basically, 
+anytime you navigate to a YouTube video page,  
+
+00:02:22.960 --> 00:02:28.000
+an icon will show up on your YouTube video player 
+to allow you to bookmark a particular timestamp on  
+
+00:02:28.000 --> 00:02:33.280
+any video. So let me show you how that's gonna 
+work. If you're on a YouTube video page, you're  
+
+00:02:33.280 --> 00:02:39.760
+gonna see this item at the bottom right, you can 
+go ahead and click that. And if you navigate to  
+
+00:02:39.760 --> 00:02:43.920
+your chrome extension icon at the top, right, 
+I've pinned, so it's showing in the toolbar,  
+
+00:02:45.680 --> 00:02:51.520
+you're going to see a new timestamp already had 
+one timestamp for 15 minutes, I added one with  
+
+00:02:51.520 --> 00:02:58.240
+an hour 18. I can go ahead and delete this one 
+because I just decided I don't want it. And our  
+
+00:02:58.240 --> 00:03:04.400
+extension is going to give us that ability to do 
+that. Now if I want to go back to my 15 minute  
+
+00:03:04.400 --> 00:03:10.960
+timestamp, you can click the play button. And it 
+goes directly back to that particular timestamp.  
+
+00:03:12.160 --> 00:03:16.240
+I can also delete this one too. And 
+when there's no bookmarks to show,  
+
+00:03:16.240 --> 00:03:17.840
+it's going to say there's no bookmarks to show.  
+
+00:03:19.520 --> 00:03:24.640
+Now we're going to add one, just so we have one on 
+this video, and I can show you how storage works.  
+
+00:03:24.640 --> 00:03:30.480
+I'm going to navigate to a new video. And in 
+this video, we have no bookmarks. So it says  
+
+00:03:30.480 --> 00:03:35.360
+there's no bookmarks to show. But if we go back 
+to our previous video where we saved a bookmark,  
+
+00:03:36.320 --> 00:03:41.840
+it's going to load that previous bookmark. 
+Now the last thing is if you navigate to a  
+
+00:03:41.840 --> 00:03:47.920
+non YouTube video page, it's going to say this 
+is not a YouTube video page in the extension UI.  
+
+00:03:49.120 --> 00:03:54.000
+And that's basically all the capabilities of this 
+chrome extension we're going to build out here,  
+
+00:03:54.000 --> 00:03:57.120
+there's going to be a lot more 
+you can do on your own afterwards.  
+
+00:03:57.120 --> 00:04:01.600
+Now I also want to mention the reason we're 
+working on creating this extension in particular,  
+
+00:04:01.600 --> 00:04:05.360
+is because it's going to show you all the 
+major parts of creating a Chrome extension,  
+
+00:04:05.360 --> 00:04:09.280
+it's going to show you how to work with 
+a content script to manipulate the DOM.  
+
+00:04:09.280 --> 00:04:13.760
+It's going to show you how to create a UI for your 
+extension. And it's going to show you how to use  
+
+00:04:13.760 --> 00:04:19.760
+service workers as background scripts, which 
+is a major part of the ship from manifest v2  
+
+00:04:19.760 --> 00:04:26.320
+to manifest v3. And to start working on 
+the extension. Once you get cloned my repo,  
+
+00:04:26.320 --> 00:04:32.080
+you can go ahead and click on the puzzle piece in 
+your Chrome browser at the top right click Manage  
+
+00:04:32.080 --> 00:04:38.640
+extensions. I'm going to go ahead and remove my 
+extension show I can show you how it works. And  
+
+00:04:38.640 --> 00:04:43.920
+you're going to see this developer mode option at 
+the top right go ahead and toggle that so it's on  
+
+00:04:44.800 --> 00:04:52.000
+click Load unpacked, then go to the repo that 
+you get cloned in mind with the boilerplate code.  
+
+00:04:53.600 --> 00:05:00.640
+Go ahead and load that. And we're going to see 
+our extension here. If we Click on this puzzle  
+
+00:05:00.640 --> 00:05:07.200
+piece and pin it. What we're going to see is this 
+basic UI, it's just going to say your bookmarks  
+
+00:05:07.200 --> 00:05:13.280
+for this video with no bookmarks, and it's just 
+going to show up everywhere. This is the default  
+
+00:05:13.280 --> 00:05:18.240
+messaging in the boilerplate code I supplied 
+and the boilerplate code will also contain all  
+
+00:05:18.240 --> 00:05:23.120
+the files you need to follow along. The best 
+place to start with creating our extension  
+
+00:05:23.120 --> 00:05:28.720
+is the manifest dot JSON file. This file is a 
+JSON file where we can specify what version of  
+
+00:05:28.720 --> 00:05:33.840
+the extensions platform we will use, among other 
+information that is going to serve as default for  
+
+00:05:33.840 --> 00:05:39.280
+loading in our extensions. Also, every extension 
+you would want to create whether it's Safari,  
+
+00:05:39.280 --> 00:05:45.040
+Mozilla, or any chromium base extension will need 
+a manifest dot JSON file. And it's probably the  
+
+00:05:45.040 --> 00:05:50.400
+single most important file in your extension, 
+because it simply just won't work without it.  
+
+00:05:51.360 --> 00:05:57.040
+In our boilerplate code already added the manifest 
+dot json file, so we don't have to spend too long  
+
+00:05:57.040 --> 00:06:00.960
+writing it out, I think it would be especially 
+helpful if I just point out some of the things  
+
+00:06:00.960 --> 00:06:07.280
+that you should note, in case you're creating your 
+own extension. So let's take a look here, as you'd  
+
+00:06:07.280 --> 00:06:13.840
+suspect, there's a name, there's a version number 
+and a description. And basically, the version  
+
+00:06:13.840 --> 00:06:18.720
+number is going to populate when you loaded in the 
+extension, the name you see is also going to be  
+
+00:06:18.720 --> 00:06:22.960
+the name of the extension when you load it in. And 
+the description is pretty self explanatory. It's  
+
+00:06:22.960 --> 00:06:28.000
+just a description of what the extension does. Now 
+things get more interesting with the permissions.  
+
+00:06:29.200 --> 00:06:32.880
+The permissions will be different depending 
+on whatever Chrome extension you're building.  
+
+00:06:33.440 --> 00:06:36.640
+For this particular extension, we're 
+going to request two permissions,  
+
+00:06:37.600 --> 00:06:43.440
+which is going to be the permission to use the 
+Chrome dot storage API, and the chrome dot tabs  
+
+00:06:43.440 --> 00:06:49.680
+API. The chrome dot storage API is to store things 
+in the user's browser for the extension. And the  
+
+00:06:49.680 --> 00:06:56.160
+second permission, which is a chrome dot tabs API, 
+is what helps us access our browser's tab system.  
+
+00:06:56.720 --> 00:07:01.680
+So we can read the tab for the extension. This is 
+basically going to help us identify what browser  
+
+00:07:01.680 --> 00:07:07.280
+tab the user is currently using, and grab the URL 
+to see if they are in a YouTube video page for  
+
+00:07:07.280 --> 00:07:12.160
+our extension. Now, the host permissions just give 
+you the ability to send cause requests to certain  
+
+00:07:12.160 --> 00:07:17.440
+host names. Our extension only deals with YouTube 
+pages. So I have a match pattern written here just  
+
+00:07:17.440 --> 00:07:22.720
+for YouTube. The service worker, as I mentioned 
+before, there's a big change between extensions,  
+
+00:07:22.720 --> 00:07:29.680
+v2, and v3. And one of the big changes is the 
+use of a service worker. As you can see here, the  
+
+00:07:29.680 --> 00:07:34.320
+other is the ability to use promises. But let's 
+just focus on service workers. For right now.  
+
+00:07:35.440 --> 00:07:39.920
+Service workers are just a JavaScript file that 
+runs separately from the main browser thread.  
+
+00:07:40.720 --> 00:07:44.880
+This means that your service worker would 
+not have access to content of a webpage,  
+
+00:07:44.880 --> 00:07:49.840
+since it is separate from main processes. 
+However, your service worker does have  
+
+00:07:49.840 --> 00:07:56.240
+capabilities to speak to your extension using the 
+extensions messaging system, which we will see  
+
+00:07:56.240 --> 00:08:01.440
+and use in our bookmarking extension. The next 
+thing I want to point out is the content scripts.  
+
+00:08:02.080 --> 00:08:06.800
+The content scripts are just files that 
+run in context of the webpages we're on.  
+
+00:08:07.600 --> 00:08:12.480
+We're going to use this to manipulate the DOM 
+of our webpage that our extension is looking at.  
+
+00:08:13.120 --> 00:08:18.560
+And here we're just specifying that our 
+content script is represented by our content  
+
+00:08:18.560 --> 00:08:25.200
+script J S file. As you can see, with the J s 
+colon content script dot j s, the last thing I  
+
+00:08:25.200 --> 00:08:33.040
+want to point out is the pop up dot HTML file down 
+here, under default pop up, this just specifies  
+
+00:08:33.040 --> 00:08:38.480
+which file was served as our UI. In our case, 
+we've specified the pop up dot HTML file, and  
+
+00:08:38.480 --> 00:08:43.360
+in that file, we specify that the corresponding 
+file that helps it with its interactivity is a  
+
+00:08:43.360 --> 00:08:48.240
+pop up.js file. With all that out of the way, 
+let's get to coding the actual extension.  
+
+00:08:48.880 --> 00:08:52.640
+We're now finally going to start 
+writing code to make our extension work.  
+
+00:08:53.280 --> 00:08:57.920
+For us even test the extension, we have to add the 
+button of the YouTube player that will allow us to  
+
+00:08:57.920 --> 00:09:03.720
+save bookmarks with timestamps. So in order for 
+us to add a button on the YouTube video player  
+
+00:09:03.720 --> 00:09:08.480
+will have to manipulate the DOM of the web 
+page we are on. What that means is we'll have  
+
+00:09:08.480 --> 00:09:13.760
+to write our logic in our content script file, 
+which operates in the context of the webpage,  
+
+00:09:13.760 --> 00:09:20.240
+as I mentioned before, so let's go ahead and add 
+some code to our content script file. We're going  
+
+00:09:20.240 --> 00:09:31.280
+to go ahead and add the following variables 
+YouTube, left, controls, and YouTube player  
+
+00:09:32.960 --> 00:09:36.880
+one is going to be for accessing the 
+YouTube player one is going to be for  
+
+00:09:36.880 --> 00:09:41.680
+accessing the controls. And this is going 
+to allow us to manipulate each of these.  
+
+00:09:42.640 --> 00:09:49.680
+But before we continue writing the logic to do DOM 
+manipulation in the context strip, we also have to  
+
+00:09:49.680 --> 00:09:54.480
+think about how our extension is even going to 
+know when we've navigated to a new web page.  
+
+00:09:54.480 --> 00:10:00.400
+And we need to know this so the content script 
+knows to execute logic to add the plus i Call to  
+
+00:10:00.400 --> 00:10:05.200
+add bookmarks for our extension. Let's go 
+ahead and go in our background.js file now.  
+
+00:10:06.000 --> 00:10:12.960
+And what we want to do here is listen to any 
+updates in our tab system and find the most  
+
+00:10:12.960 --> 00:10:19.760
+recent tab or the tab that we're on currently 
+and see if it's a YouTube page. So we're going  
+
+00:10:19.760 --> 00:10:24.240
+to have a listener, that's going to 
+listen to tabs. And if you remember,  
+
+00:10:24.240 --> 00:10:31.840
+we got permissions to access the Chrome tabs API. 
+And we're going to listen for an update to tabs.  
+
+00:10:34.880 --> 00:10:38.000
+The parameters were given is a tab ID and a tab.  
+
+00:10:43.600 --> 00:10:49.680
+What we're going to do from here is see if 
+there's a tab URL, and if there is a tab Euro.  
+
+00:10:50.880 --> 00:11:00.640
+Let's see if that Euro includes 
+youtube.com/watch. The way I came up with that  
+
+00:11:02.080 --> 00:11:07.680
+is if you look at our YouTube video, every 
+individual video has YouTube slash watch.  
+
+00:11:08.320 --> 00:11:14.160
+And we just want to make sure we're on a 
+page that has that specifically as a URL,  
+
+00:11:14.160 --> 00:11:20.160
+then what we want to do is set our query 
+parameters. And we're going to use query  
+
+00:11:20.160 --> 00:11:26.400
+parameters as a unique ID for each video. So we 
+can grab it from storage, you'll see what I mean  
+
+00:11:26.400 --> 00:11:32.640
+in a second, and I'll show you. So we're going 
+to do that by using the JavaScript split method.  
+
+00:11:35.600 --> 00:11:42.720
+What that means is basically after this question 
+mark query parameter, we're going to grab  
+
+00:11:42.720 --> 00:11:48.320
+this value. And this is going to be our unique 
+video value this right here after the equal  
+
+00:11:48.320 --> 00:11:55.440
+sign. And every video on YouTube has a different 
+value right here. So it's a pretty unique key that  
+
+00:11:55.440 --> 00:12:03.360
+will help us store videos uniquely as well in our 
+storage, and it's consistent. So then we're going  
+
+00:12:03.360 --> 00:12:13.440
+to add your URL parameters. And this is just an 
+interface to work with URLs URL search params.  
+
+00:12:17.520 --> 00:12:22.720
+And the final thing we want to do is there's 
+a messaging system that happens between  
+
+00:12:22.720 --> 00:12:26.080
+the extension, we're going to send a message  
+
+00:12:26.080 --> 00:12:33.760
+to our content script that basically says a new 
+video is loaded. And this is the video ID of  
+
+00:12:33.760 --> 00:12:40.240
+that video, and the video ID being that unique 
+video value that we saw in the URL on YouTube.  
+
+00:12:46.400 --> 00:12:52.960
+And this tab, Id send message usage that I'm doing 
+right here is all directly from documentation.  
+
+00:12:53.520 --> 00:12:59.760
+The Send Message takes a tab ID, it takes a 
+unique object. So right now I'm going to type  
+
+00:12:59.760 --> 00:13:05.840
+type. And this is a type of event is a new 
+video event. And then a video ID value,  
+
+00:13:07.440 --> 00:13:18.720
+which is going to be URL, parameters, dot get v. 
+So if we're doing URL dot get D, it's going to  
+
+00:13:18.720 --> 00:13:25.120
+grab this right here. And that's basically going 
+to be the code for that send message takes a tab  
+
+00:13:25.120 --> 00:13:30.560
+ID, it takes an object and then it can also take a 
+callback function. This object right here doesn't  
+
+00:13:30.560 --> 00:13:38.000
+have to be type or video ID, it could also be 
+something random, like I could literally pass this  
+
+00:13:38.000 --> 00:13:45.440
+and the content script will have access to 
+random, and then the string random. In our case,  
+
+00:13:45.440 --> 00:13:50.400
+the only thing that's applicable is the 
+type of the event and then the video ID,  
+
+00:13:50.400 --> 00:13:55.520
+which is a content script needs. Now in our 
+content script, we're going to add a listener that  
+
+00:13:56.240 --> 00:14:01.120
+is going to listen to any of those incoming 
+messages, we need to be able to listen to that  
+
+00:14:01.120 --> 00:14:06.480
+background.js message. So to do that, we're 
+going to end up writing the following code  
+
+00:14:07.840 --> 00:14:15.840
+to add that listener, so we're going to say on 
+message add listener. And this is going to accept  
+
+00:14:17.040 --> 00:14:24.160
+three parameters. So an object a sender, 
+and a response. And the response is,  
+
+00:14:24.160 --> 00:14:30.000
+when a message is being sent to the content 
+script, we can also send a response back where  
+
+00:14:30.000 --> 00:14:35.520
+the message is coming from. So I'm going 
+to destructure those values we're getting  
+
+00:14:40.400 --> 00:14:47.040
+and if you remember, the way I'm deconstructing 
+Type value video ID is basically we're given a  
+
+00:14:47.040 --> 00:14:54.800
+video ID right here. Later on, we're going to grab 
+a value as well, and I'm just destructuring. So  
+
+00:14:55.520 --> 00:15:02.400
+each of these are its own variable. 
+So it's a If type is equal to new,  
+
+00:15:02.400 --> 00:15:09.040
+so if the type of event is new video loaded, 
+which we're getting from the background.js file,  
+
+00:15:09.600 --> 00:15:17.440
+we want to be able to set current video, which 
+will be a global variable in the content script  
+
+00:15:18.640 --> 00:15:25.120
+as the video ID, and then we want to 
+call a function to handle any actions  
+
+00:15:25.680 --> 00:15:29.760
+with new video. So we're going to 
+call a new video loaded function.  
+
+00:15:32.240 --> 00:15:41.520
+And let's go ahead and set current video as a 
+top level variable. And that's just going to  
+
+00:15:41.520 --> 00:15:47.760
+be an empty string. But it's going to be set as 
+the string set from the background at js file,  
+
+00:15:48.480 --> 00:15:54.320
+once the message is received on this end, so let's 
+go ahead and actually see if this works at all.  
+
+00:15:55.520 --> 00:16:01.600
+I'm gonna go ahead and just 
+console dot log your parameters.  
+
+00:16:06.960 --> 00:16:16.320
+I'm gonna give this a reload. Open this, let's 
+inspect it. And we ever URL search parameters.  
+
+00:16:16.320 --> 00:16:24.000
+So we know we're getting our URL search parameters 
+now. Great. So so far, things look good.  
+
+00:16:25.600 --> 00:16:31.360
+Now, what we want to do from here is 
+create that new video loaded function.  
+
+00:16:32.080 --> 00:16:35.840
+And after we create this function and 
+all the functionality surrounding it,  
+
+00:16:36.400 --> 00:16:43.280
+we should see the YouTube player button on the 
+YouTube video. So let's go ahead and do that.  
+
+00:16:43.280 --> 00:16:49.840
+So what we're going to do is create this function 
+that we have right here called New Video loaded.  
+
+00:16:55.840 --> 00:17:02.240
+And what we probably want to do is check 
+if a bookmark button already exists,  
+
+00:17:02.240 --> 00:17:06.880
+I know the class name that this item 
+has, it's called Bookmark button  
+
+00:17:06.880 --> 00:17:11.760
+because I wrote the CSS code that's 
+going to style this whole extension.  
+
+00:17:11.760 --> 00:17:21.120
+So you could just copy this part right here. But 
+this is just some native Dom, slash JavaScript  
+
+00:17:23.280 --> 00:17:30.960
+methods that we can use. It's actually MB by 
+class name. And it's going to return an HTML  
+
+00:17:30.960 --> 00:17:36.240
+collection. So what we're going to do is grab 
+the first element that matches this class name,  
+
+00:17:36.240 --> 00:17:41.760
+bookmark button. And it's just going to 
+exist on every single YouTube video page.  
+
+00:17:43.680 --> 00:17:52.400
+So if we want to test that, we could just say 
+console dot log bookmark exists. And let's reload  
+
+00:17:52.400 --> 00:18:02.080
+this page and inspect it. Actually, let's reload 
+our extension as well. reload this page inspect,  
+
+00:18:03.520 --> 00:18:09.440
+we're probably going to get undefined 
+this is exactly what I expected.  
+
+00:18:10.240 --> 00:18:15.280
+Because we don't have any logic surrounding the 
+Bookmark button yet. And also, we're not even  
+
+00:18:15.280 --> 00:18:21.760
+setting a bookmark button right now. So if the 
+Bookmark button did exist, we would get true,  
+
+00:18:21.760 --> 00:18:26.640
+it does exist, but we're getting undefined right 
+now. So what we want to do if we're getting  
+
+00:18:26.640 --> 00:18:36.080
+that undefined or false value that a bookmark 
+button does not exist, is add some logic to say,  
+
+00:18:36.080 --> 00:18:43.440
+hey, let's add this bookmark button to any YouTube 
+player. So we're going to create an image element.  
+
+00:18:45.120 --> 00:18:55.840
+That is going to be the image we 
+click on for bookmark buttons.  
+
+00:19:00.000 --> 00:19:03.360
+As part is in, we're going to 
+add a couple of attributes.  
+
+00:19:07.840 --> 00:19:12.960
+The first thing we're going to want to do 
+is pull the image that we're using, which is  
+
+00:19:15.120 --> 00:19:20.560
+our assets slash bookmark. PNG, you already 
+have this if you're following along with the  
+
+00:19:20.560 --> 00:19:30.400
+boilerplate code. The second thing we want to do 
+is add a class. And the way we're going to add  
+
+00:19:30.400 --> 00:19:37.840
+this class is basically make it pretty dynamic 
+here. So we're gonna add a YouTube button class  
+
+00:19:41.120 --> 00:19:52.320
+with a space and then we're going to add a 
+bookmark button class in quotes. And this  
+
+00:19:52.320 --> 00:19:56.800
+is again, just some styling I have that 
+you don't need to worry about right now.  
+
+00:19:57.680 --> 00:20:02.480
+And the last thing we want to do is basically 
+on hover, we want to make a title show.  
+
+00:20:03.840 --> 00:20:06.800
+So we're just gonna say the 
+title is click to bookmark,  
+
+00:20:07.520 --> 00:20:11.840
+current timestamp. And this is just 
+a UI thing. You'll see this in a bit.  
+
+00:20:14.320 --> 00:20:21.440
+Next, what we want to show is a way to 
+grab the YouTube controls. So these are  
+
+00:20:21.440 --> 00:20:26.800
+the YouTube controls over here, we want 
+to be able to grab these left controls,  
+
+00:20:26.800 --> 00:20:33.840
+so we can add a bookmark button right here. 
+So let's go ahead and find out how to do that.  
+
+00:20:35.440 --> 00:20:41.200
+I already know how to grab this. So I'm going 
+to show you how this works. You can inspect  
+
+00:20:41.200 --> 00:20:47.120
+elements right here and find what elements they 
+exactly are. But basically, we're going to use  
+
+00:20:47.120 --> 00:20:52.160
+native JavaScript methods like we have done 
+previously to grab those controls and insert  
+
+00:20:52.160 --> 00:21:04.320
+our button. If I do document dot get elements 
+by class name. And I grab YouTube left controls,  
+
+00:21:07.040 --> 00:21:13.040
+we should get an element back, which is 
+going to be this div class over here.  
+
+00:21:14.320 --> 00:21:19.680
+And you can see that it gives us all the left 
+controls over here, where we're going to add  
+
+00:21:19.680 --> 00:21:25.040
+our button. And the second thing we're going to 
+want to do is grab the YouTube player as well.  
+
+00:21:25.040 --> 00:21:31.280
+And that's one of the global variables we set 
+in our content script. And we can also do that  
+
+00:21:33.360 --> 00:21:44.960
+by writing document dot get elements by class 
+name. And then there's this video stream class.  
+
+00:21:46.800 --> 00:21:55.360
+And we're going to grab the one at the zero with 
+index. And it grabs a whole YouTube component  
+
+00:21:55.360 --> 00:22:02.000
+right there. So now we know the two elements in 
+the DOM we need to manipulate. But let's set those  
+
+00:22:02.000 --> 00:22:10.040
+elements. First, we're going to do exactly what 
+we saw in our content over there. Document get,  
+
+00:22:10.640 --> 00:22:15.760
+actually, I'm just gonna go back and copy 
+these way easier, so don't make a mistake.  
+
+00:22:20.640 --> 00:22:25.840
+And then the second one is going to be 
+YouTube player. Go back and copy that.  
+
+00:22:32.320 --> 00:22:38.320
+Okay, so after this, what we're going to 
+want to do is add that bookmark button and  
+
+00:22:38.320 --> 00:22:44.240
+we grabbed the controls, you saw that row in 
+the player, we want to add it to that row. So  
+
+00:22:44.240 --> 00:22:49.600
+we're going to type out YouTube left controls to 
+get those left controls we stored in a variable.  
+
+00:22:50.320 --> 00:22:57.200
+And to use this native JavaScript method we can 
+use called append child, which is going to append  
+
+00:22:58.640 --> 00:23:01.120
+this bookmark element inside that row.  
+
+00:23:03.680 --> 00:23:08.000
+And then the second thing we're going to want 
+to do is probably add a listener to listen to  
+
+00:23:08.000 --> 00:23:14.000
+any clicks on our icon. So there's a correction I 
+want to make to this portion of the video, before  
+
+00:23:14.000 --> 00:23:19.760
+we continue, it's going to be very important in 
+order for your extension to work functionally.  
+
+00:23:20.720 --> 00:23:26.000
+And it's only one line of code, but it's going 
+to make such a big difference. I'm also going to  
+
+00:23:26.000 --> 00:23:30.960
+explain an important concept of Chrome extensions 
+that I neglected while I was writing this,  
+
+00:23:31.520 --> 00:23:38.000
+which is that in our manifest json file, we 
+have a match pattern for our content script.  
+
+00:23:38.000 --> 00:23:44.320
+And basically the match pattern, we currently 
+have checks if any youtube.com video is loaded.  
+
+00:23:44.320 --> 00:23:49.840
+And if it is, we're injecting our content script 
+into the context of that web page. So basically,  
+
+00:23:49.840 --> 00:23:55.840
+what that means is, anytime a youtube.com 
+page shows up, we're running a bunch of logic  
+
+00:23:56.400 --> 00:24:04.000
+using our content script. But the problem right 
+now is that our background.js file is telling  
+
+00:24:04.000 --> 00:24:09.440
+us when a new video is loaded. And the 
+event listener we're using is on updated,  
+
+00:24:09.440 --> 00:24:15.520
+which is just checking if this URL is updated. If 
+you refresh this page, the URL is not updated. So  
+
+00:24:15.520 --> 00:24:21.760
+this button actually isn't going to show up. And 
+if you continue coding without this fix right  
+
+00:24:21.760 --> 00:24:27.840
+here, you're gonna see some edge cases that you 
+might not like. So let's go ahead and fix this,  
+
+00:24:27.840 --> 00:24:34.320
+we're going to do a super simple fix. It's not the 
+best fix in the world, but it will fix the problem  
+
+00:24:34.320 --> 00:24:41.360
+here. We're just going to call a new video loaded 
+anytime our content script matches youtube.com.  
+
+00:24:42.080 --> 00:24:47.280
+And what this is going to do is call this 
+new video loaded function anytime we hit  
+
+00:24:47.280 --> 00:24:55.520
+that match pattern. The downside of this is now 
+if the background script sees it as a new video  
+
+00:24:55.520 --> 00:25:01.520
+using the on updated event listener, and there's 
+a condition that content script is injected,  
+
+00:25:01.520 --> 00:25:06.480
+we're going to hit this or call this new video 
+loaded function twice, you can fix this pretty  
+
+00:25:06.480 --> 00:25:10.800
+easily by just adding a conditional make sure 
+that doesn't happen. But to make sure everyone  
+
+00:25:10.800 --> 00:25:14.960
+is able to follow along with this correction, 
+I will not be doing that here. And we'll just  
+
+00:25:14.960 --> 00:25:19.600
+only be inserting this one line of code calling 
+the new video loaded function. Luckily, the only  
+
+00:25:19.600 --> 00:25:24.640
+thing our new video loaded function is doing is 
+adding the Bookmark button to the YouTube player.  
+
+00:25:24.640 --> 00:25:29.200
+So there's going to be no negative implications to 
+calling it twice. Since we have a condition that  
+
+00:25:29.200 --> 00:25:33.040
+checks if the button is already on the player. 
+It's just not the most efficient implementation,  
+
+00:25:33.040 --> 00:25:42.160
+which is fine for the sake of this tutorial. With 
+that, let's continue with the rest of the video.  
+
+00:25:42.160 --> 00:25:47.520
+There we go, we have the button right there. 
+But right now, if we click the button,  
+
+00:25:49.040 --> 00:25:55.680
+it's not doing anything. And there's a reason for 
+that. The reason is that we don't have any event  
+
+00:25:55.680 --> 00:26:02.640
+listener listening to click on this particular 
+byte. Let's go ahead and add the code for that.  
+
+00:26:05.200 --> 00:26:10.080
+So what we're going to do is add an event 
+listener to listen to a click for the button.  
+
+00:26:11.440 --> 00:26:16.560
+And we're literally going to use the add 
+event listener method, listen for a click,  
+
+00:26:17.360 --> 00:26:26.400
+and then call a function called add new bookmark 
+event handler. And this is a function we have not  
+
+00:26:26.400 --> 00:26:33.360
+coded yet. So to make this function work, we're 
+going to have to do the following. We're probably  
+
+00:26:33.360 --> 00:26:40.800
+going to have to figure out the timestamp of the 
+video at which point someone presses the button.  
+
+00:26:40.800 --> 00:26:45.440
+This is basically going to help us figure 
+out what our bookmark should be saved as in  
+
+00:26:45.440 --> 00:26:50.000
+storage according to its timestamp. So how 
+are we going to do that? How are we going  
+
+00:26:50.000 --> 00:26:55.520
+to figure out the YouTube video timestamp. 
+Again, YouTube makes this pretty accessible,  
+
+00:26:56.080 --> 00:27:02.160
+it can be found as an attribute. So what we're 
+going to want to do is grab the YouTube player.  
+
+00:27:03.120 --> 00:27:08.960
+And we already have a global variable that has 
+it. But I'm just going to grab it again. So we can  
+
+00:27:08.960 --> 00:27:16.240
+see how to do this in the console, I'm going to 
+create a YouTube player variable in our console.  
+
+00:27:16.240 --> 00:27:23.760
+Okay, now we have it saved. And then on YouTube 
+player, there's going to be a property called  
+
+00:27:23.760 --> 00:27:32.480
+current time. And it's going to give us the 
+current time in seconds. And in order for us to  
+
+00:27:32.480 --> 00:27:39.360
+save our bookmark, according to hours, minutes 
+seconds, we're probably going to also have to  
+
+00:27:39.360 --> 00:27:47.840
+create a function that converts seconds into a 
+standard time of how it's displayed in YouTube.  
+
+00:27:49.120 --> 00:27:54.960
+So let's go ahead and start with all those 
+things. We're gonna go ahead and add the function,  
+
+00:27:54.960 --> 00:28:06.000
+add new bookmark event handler. And we're going 
+to use the exact property we saw in our console,  
+
+00:28:07.360 --> 00:28:13.440
+YouTube player dot current time, which is going to 
+give us the current time. And we're going to say  
+
+00:28:13.440 --> 00:28:20.000
+okay, now, this is only called when a new bookmark 
+is made. So let's create a new bookmark variable.  
+
+00:28:21.920 --> 00:28:28.800
+And this is going to be an object that has 
+the time of the bookmark and a description.  
+
+00:28:29.760 --> 00:28:34.880
+And the description is just going to end up 
+being the title that's going to be displayed  
+
+00:28:35.600 --> 00:28:41.840
+in the Chrome extension. So it's going to be 
+a dynamic description and skins a bookmark at  
+
+00:28:43.440 --> 00:28:49.920
+current time. However, the problem is that 
+this is in seconds, as we said before,  
+
+00:28:49.920 --> 00:28:54.320
+so we're going to have to convert this. So 
+we're going to use a function called get time.  
+
+00:28:56.720 --> 00:29:01.680
+I'm just going to insert it using pieces. So I'm 
+going to do is go over to this time function here.  
+
+00:29:02.960 --> 00:29:11.360
+Insert snippet. And there it is. So now I'm 
+able to convert my seconds into time. And then  
+
+00:29:11.360 --> 00:29:14.800
+the last thing I want to do here 
+is sync it to Chrome Storage.  
+
+00:29:16.000 --> 00:29:23.200
+And what this is going to do is set Chrome storage 
+with each bookmark. So basically, each video,  
+
+00:29:23.200 --> 00:29:27.040
+according to its video identification 
+number that we're grabbing from the URL  
+
+00:29:28.080 --> 00:29:35.440
+will also map back to a set up bookmarks in Chrome 
+Storage. So to do that, we're going to do Chrome  
+
+00:29:35.440 --> 00:29:39.840
+storage sync. And again, if you're interested in 
+this, you can look in documentation to find out  
+
+00:29:41.040 --> 00:29:47.280
+what this function takes. Current video, it's 
+important to remember that things need to be  
+
+00:29:47.280 --> 00:29:57.680
+stored in JSON in Chrome Storage. So I'm going to 
+do JSON stringify. All my current video bookmarks,  
+
+00:29:57.680 --> 00:30:04.000
+so I'm actually going to add it A variable up here 
+that's going to store all current video bookmarks  
+
+00:30:07.040 --> 00:30:14.080
+in an array. And I'm going 
+to spread that. So we can  
+
+00:30:15.920 --> 00:30:22.240
+add a new bookmark to those set of current video 
+bookmarks. And then the last thing I want to do  
+
+00:30:22.240 --> 00:30:27.120
+here is sort bookmarks by their save 
+timestamp in our Chrome Storage.  
+
+00:30:29.120 --> 00:30:36.560
+So we're going to sort by time, and this is just 
+coming from this right here, every bookmark is  
+
+00:30:36.560 --> 00:30:44.640
+going to have a time and a description. So we're 
+going to look at that and sort accordingly. Great.  
+
+00:30:46.880 --> 00:30:52.640
+Now, if we reload our extension, we're going 
+to see if it works as expected. And the way  
+
+00:30:52.640 --> 00:31:01.680
+to see that is basically console dot log, this new 
+bookmark, let's do it. Great. That time it worked,  
+
+00:31:01.680 --> 00:31:07.120
+we just had to give it another reload. And 
+we got a time in seconds and a description.  
+
+00:31:08.400 --> 00:31:13.360
+Now the final thing I want to do is complete this 
+file before we go to the UI. And we want to make  
+
+00:31:13.360 --> 00:31:18.320
+this fully functional to fetch all bookmarks when 
+a new video is loaded. To do this, we're going  
+
+00:31:18.320 --> 00:31:24.160
+to grab asynchronously, all bookmarks from Chrome 
+storage, which means I'm going to write a promise  
+
+00:31:24.160 --> 00:31:28.560
+that resolves once we retrieve all bookmarks. 
+So that code is going to look like this.  
+
+00:31:29.920 --> 00:31:36.720
+I'm going to create it at the top here. 
+And I'm going to say const fetch bookmarks.  
+
+00:31:41.920 --> 00:31:48.880
+And I want to return a promise. So 
+we can resolve this asynchronously.  
+
+00:31:52.240 --> 00:31:56.240
+And within that promise, I'm going 
+to fetch from Chrome Storage. So  
+
+00:31:57.520 --> 00:32:01.520
+I'm going to do a Chrome storage 
+sync and we did a set before to  
+
+00:32:01.520 --> 00:32:06.480
+set Chrome Storage, we're going 
+to get this time our current video  
+
+00:32:10.320 --> 00:32:15.600
+it takes an object. And we're going to resolve  
+
+00:32:23.840 --> 00:32:34.080
+to find any bookmarks when indexing 
+using our current video. So  
+
+00:32:38.480 --> 00:32:44.640
+basically look in storage to see if our current 
+video has any bookmarks, or if it exists in  
+
+00:32:44.640 --> 00:32:50.560
+storage. That's what's happening right here. If 
+it does exist, we're going to JSON dot parse it  
+
+00:32:50.560 --> 00:32:56.960
+because we JSON dot Stringify before, 
+if it doesn't, what we want to do is  
+
+00:32:59.680 --> 00:33:07.600
+return an empty array. And this should work. 
+And we're really only going to add these in  
+
+00:33:07.600 --> 00:33:14.000
+two places, which will be in our new video 
+loaded function. So we're going to make this  
+
+00:33:14.000 --> 00:33:22.240
+async. And we're gonna add a fetch bookmarks. 
+So actually, we're just going to add this to  
+
+00:33:22.240 --> 00:33:29.120
+our current video bookmarks variable. 
+And call a weight fetch bookmarks.  
+
+00:33:31.440 --> 00:33:33.600
+async await is going to resolve this promise.  
+
+00:33:35.920 --> 00:33:40.560
+And then the second place we want to add this 
+is to our add new bookmarks event handler.  
+
+00:33:42.400 --> 00:33:47.760
+To basically handle this case, and make 
+sure we're always using the most up to date  
+
+00:33:49.600 --> 00:33:51.840
+set of bookmarks when destructuring.  
+
+00:33:54.000 --> 00:34:03.840
+So we're gonna do current video bookmarks equals 
+the weight, veg bookmarks. And also make this  
+
+00:34:03.840 --> 00:34:12.800
+async. Awesome. So for right now, we finished 
+everything we need for our content script file,  
+
+00:34:12.800 --> 00:34:16.800
+obviously, things aren't going to show in the 
+UI. And we could check that out right here.  
+
+00:34:18.000 --> 00:34:22.960
+And as you can see, there's nothing in the UI 
+because everything we've been doing so far has  
+
+00:34:22.960 --> 00:34:29.520
+been manipulating the DOM right here to add 
+the icon. Add some logic to get us ready to  
+
+00:34:29.520 --> 00:34:35.520
+create a UI for our extension. Let's go ahead and 
+start making some UI components show starting out  
+
+00:34:35.520 --> 00:34:39.680
+with some bookmarks from clicking that addition 
+button in the YouTube player that we added.  
+
+00:34:40.800 --> 00:34:46.000
+Now, the first thing we need to figure out on any 
+given page is if it's a YouTube video page or not,  
+
+00:34:46.000 --> 00:34:50.480
+if it is, we're going on one of fetch any 
+bookmarks we may have from Chrome Storage.  
+
+00:34:51.120 --> 00:34:56.320
+And if it's not, we'll just want to display 
+some messaging saying it's not a YouTube page.  
+
+00:34:56.320 --> 00:35:01.680
+If you open the Chrome extension on a 
+page that is not YouTube. So to do this,  
+
+00:35:01.680 --> 00:35:08.080
+we're going to add a utility function that's 
+going to allow us to decipher that logic.  
+
+00:35:08.080 --> 00:35:14.000
+So we're actually going to grab our utility 
+function to find the active tab that the user is  
+
+00:35:14.000 --> 00:35:20.640
+on through Google Chrome documentation. I'm going 
+to go ahead and use this example right here, which  
+
+00:35:21.200 --> 00:35:26.960
+helps us retrieved a currently focused tab 
+from the Chrome documentation. And since I  
+
+00:35:26.960 --> 00:35:31.520
+have the google chrome pieces extension over 
+every codeblock, whether it's in documentation  
+
+00:35:31.520 --> 00:35:36.880
+or Stack Overflow, I'm able to directly 
+save on pieces with this icon that shows up  
+
+00:35:37.440 --> 00:35:41.840
+at the top right of any code block, I'm going 
+to go ahead and save it. And then I'm going  
+
+00:35:41.840 --> 00:35:48.320
+to go back to my VS code and refresh my pieces 
+tree, I can go ahead and insert this snippet,  
+
+00:35:48.320 --> 00:35:54.240
+which is the newest one, and I'm just going 
+to rename this snippet to active tab Chrome.  
+
+00:35:56.400 --> 00:36:02.320
+Amazing and pieces automatically classified this 
+as JavaScript, because it was able to decipher  
+
+00:36:02.320 --> 00:36:08.320
+that from some machine learning. I'm gonna go 
+ahead and delete this background.js comment.  
+
+00:36:09.440 --> 00:36:15.840
+And awesome, we now have a function that grabs 
+the current tab. But also, I want to make sure  
+
+00:36:15.840 --> 00:36:21.120
+I'm exporting this function. So I'm going 
+to add export. And then what I want to do is  
+
+00:36:21.120 --> 00:36:26.720
+open up the pop up.js file. And over here, 
+we're going to want to import that function  
+
+00:36:26.720 --> 00:36:34.240
+at the very top. So we can use it here. 
+So I'm going to import Get active tab URL  
+
+00:36:36.720 --> 00:36:43.440
+from utils dot j, s, and I actually 
+don't think the documentation called  
+
+00:36:43.440 --> 00:36:47.760
+it this. So I'm going to go ahead and 
+change the function name, so it matches.  
+
+00:36:49.760 --> 00:36:58.800
+So go to utils.js. Change that thought, 
+awesome. Now, the event we want to listen  
+
+00:36:58.800 --> 00:37:03.920
+to when opening the pop up.js file is the DOM 
+content loaded event, which is right here.  
+
+00:37:04.720 --> 00:37:10.480
+This event is a native window event that fires 
+when an HTML document has initially been loaded.  
+
+00:37:10.480 --> 00:37:15.120
+It's essentially when we want to load all our 
+bookmarks and show them. So we're going to  
+
+00:37:15.120 --> 00:37:21.840
+type the following to do so what we're going 
+to do is grab our active tab function first.  
+
+00:37:22.400 --> 00:37:30.080
+And we're going to look at the user's current 
+active tab, which we already have the function  
+
+00:37:30.080 --> 00:37:37.680
+for from in the utiles. It's an async function. 
+So we're going to async await this. And then after  
+
+00:37:37.680 --> 00:37:43.680
+that, we're going to grab the query parameters 
+to help us identify the video. If you remember,  
+
+00:37:44.720 --> 00:37:51.280
+each YouTube video has a unique identifier. After 
+the question mark, where the query parameter,  
+
+00:37:52.960 --> 00:37:59.760
+we're going to grab that, we're going to use a 
+URL search params to be able to get the unique  
+
+00:37:59.760 --> 00:38:09.120
+identifier for each video. And to get the 
+unique identifier, we're going to create it  
+
+00:38:09.120 --> 00:38:17.360
+current video variable and do URL parameters 
+dot get V. And this is just based off of  
+
+00:38:17.360 --> 00:38:22.880
+what the YouTube video URLs look 
+like. Now, our active tab URL  
+
+00:38:24.880 --> 00:38:34.160
+should have youtube.com/watch Because any specific 
+YouTube video always has this in its URL. And  
+
+00:38:34.160 --> 00:38:39.680
+we want to make sure we're watching a YouTube 
+video when our Chrome Extension has any logic  
+
+00:38:39.680 --> 00:38:44.480
+with bookmarks. And we want to make sure 
+this current video variable is truthy  
+
+00:38:44.480 --> 00:38:51.120
+meaning is get actually returned something 
+other than undefined or any falsie value.  
+
+00:38:54.160 --> 00:39:00.160
+And then what we want to do is we want 
+to get any current video bookmarks from  
+
+00:39:00.160 --> 00:39:06.000
+Chrome storage. If you remember, we're setting 
+Chrome storage with the current video as a key  
+
+00:39:06.720 --> 00:39:12.640
+and then all the bookmarks as a value that is 
+JSON ified. And in order for us to retrieve those  
+
+00:39:12.640 --> 00:39:17.760
+bookmarks, we need to use a Chrome Storage API 
+to get them. So to do that, we're going to grab  
+
+00:39:19.280 --> 00:39:26.640
+the video bookmarks using Chrome storage sync get. 
+And we're going to get it with the current video  
+
+00:39:26.640 --> 00:39:32.160
+unique identifier, which is the YouTube 
+videos unique identifier in the URL.  
+
+00:39:34.480 --> 00:39:41.440
+And then, we are going to set a current video 
+bookmarks variable which is going to contain  
+
+00:39:41.440 --> 00:39:46.800
+all those JSON ified current videos. And in 
+order for us to pass this to any function  
+
+00:39:46.800 --> 00:39:55.360
+or write some custom logic to show bookmarks, 
+we're going to have to JSON dot parse any  
+
+00:39:55.360 --> 00:39:59.760
+bookmarks that are saved in Chrome Storage since 
+it's in JSON, and we can't really work with that.  
+
+00:40:00.960 --> 00:40:07.760
+But if there are no bookmarks or chrome searches 
+and return anything, we're just going to want to  
+
+00:40:07.760 --> 00:40:14.880
+return an empty array. Now, we're going to have 
+to pass this over to the view bookmarks function,  
+
+00:40:15.680 --> 00:40:20.320
+which is basically going to help us 
+view any bookmarks in our extension,  
+
+00:40:21.040 --> 00:40:26.880
+that Chrome Storage dot get returns. But before 
+that, I'm just going to put a comment right  
+
+00:40:26.880 --> 00:40:32.960
+here. So we remember, we want to handle this 
+else condition, which basically is for the  
+
+00:40:32.960 --> 00:40:39.520
+scenario where we're not on a youtube.com video 
+page, or current video returns a falsie value.  
+
+00:40:40.560 --> 00:40:46.320
+So what we're going to want to do is add a message 
+that says this is not a YouTube video page.  
+
+00:40:47.200 --> 00:40:52.080
+And let's just go back to chrome to 
+look at what that might look like.  
+
+00:40:54.000 --> 00:41:02.480
+So this is our UI Currently, we have this 
+container class right here that encapsulates  
+
+00:41:03.040 --> 00:41:08.320
+and will eventually encapsulate all the bookmarks 
+we have, it has this container class name in it,  
+
+00:41:09.600 --> 00:41:15.040
+what we're going to want to do is get that class 
+name. So we're just going to do this in the  
+
+00:41:15.040 --> 00:41:22.560
+console before we actually do in code just to make 
+sure it works. The class was called container. And  
+
+00:41:22.560 --> 00:41:27.440
+that's just from the CSS in the boilerplate, 
+so you don't have to worry about it, or the  
+
+00:41:27.440 --> 00:41:34.000
+HTML or other. So when we wrote this document that 
+get elements by class name container, and then  
+
+00:41:34.000 --> 00:41:43.280
+grab the first element in the HTML collection, we 
+get this element right here, which is containing  
+
+00:41:43.280 --> 00:41:51.360
+all these other elements within it. And what we 
+want to do here is basically specify in the HTML  
+
+00:41:54.800 --> 00:41:59.280
+on pages that are not youtube.com. So 
+this is actually a YouTube video page.  
+
+00:42:00.000 --> 00:42:03.360
+We don't want to display this message. But I 
+just want to show how this is going to look,  
+
+00:42:04.400 --> 00:42:06.240
+we're going to want to put a new div class  
+
+00:42:11.760 --> 00:42:14.400
+that says, This is not a YouTube video page.  
+
+00:42:15.600 --> 00:42:19.680
+And let's just see if that works. Will this 
+change the extension the way we want it to?  
+
+00:42:24.560 --> 00:42:27.600
+Container is not. So what we need to do over here  
+
+00:42:29.440 --> 00:42:33.920
+is actually encapsulate this in a variable. 
+We're gonna set this equal to container.  
+
+00:42:35.520 --> 00:42:41.760
+And now let's try that. And change the extension 
+to show that this is not a YouTube video page.  
+
+00:42:42.720 --> 00:42:45.760
+So the way we're going to do 
+this dynamically in our code  
+
+00:42:45.760 --> 00:42:49.840
+is basically put all the code we just 
+put in our console to test this out  
+
+00:42:50.400 --> 00:42:55.920
+within our else conditions. So every time we're 
+not on a YouTube video page, or this returns a  
+
+00:42:55.920 --> 00:43:01.680
+falsie value, we want to show that this is 
+not a YouTube video page when we try to open  
+
+00:43:01.680 --> 00:43:06.880
+up the Chrome extension in those scenarios. So 
+we're gonna say const container equals document  
+
+00:43:06.880 --> 00:43:15.040
+dot get elements by class name, right there. 
+Grab that container class, first element.  
+
+00:43:17.760 --> 00:43:25.200
+And then set the inner HTML, set that equal to div 
+class equals title, title, just add some styling,  
+
+00:43:25.760 --> 00:43:28.560
+that's going to make it look 
+slightly nicer. There's nothing  
+
+00:43:29.120 --> 00:43:31.280
+super special about the styling I have.  
+
+00:43:35.360 --> 00:43:40.240
+And since we tested it, there shouldn't be 
+really any surprises here, it should pretty much  
+
+00:43:40.240 --> 00:43:45.760
+work as expected. So let's go ahead 
+and give this extension a reload.  
+
+00:43:47.600 --> 00:43:52.880
+It shouldn't show the message for this page. 
+It doesn't. But if we go to a non YouTube page,  
+
+00:43:53.520 --> 00:43:58.000
+it's gonna say this is not a YouTube 
+video page. Amazing. So let's go back to  
+
+00:43:59.520 --> 00:44:03.280
+our code. And we're going to want to 
+write this view bookmarks function.  
+
+00:44:03.280 --> 00:44:09.520
+So if it does meet the conditions of being on 
+a youtube.com/watch page, and as you can see,  
+
+00:44:10.640 --> 00:44:19.320
+that's from any page that has a video page, 
+it has youtube.com/watch on it. And your  
+
+00:44:19.840 --> 00:44:27.840
+URL params dot get the return something so it's 
+a truthy value, we're going to want to view the  
+
+00:44:27.840 --> 00:44:33.040
+bookmarks associated with that video. So let's 
+go ahead and call the view bookmarks function  
+
+00:44:34.320 --> 00:44:39.680
+and pass it all the current video bookmarks. 
+And we're gonna go ahead and write the logic  
+
+00:44:39.680 --> 00:44:44.720
+that's going to help us populate the UI with all 
+the bookmarks we grabbed from Chrome Storage.  
+
+00:44:46.240 --> 00:44:50.720
+So to do that, we're going 
+to pass it current bookmarks.  
+
+00:44:54.000 --> 00:44:58.560
+And we're going to set a default argument of an 
+empty array just in case nothing is passed to it.  
+
+00:44:59.120 --> 00:45:08.480
+It's just going To return or show no bookmarks, 
+and we're going to grab a bookmark element.  
+
+00:45:10.880 --> 00:45:17.200
+Again, this is just from the HTML that I have 
+given you. So it's not anything you need to  
+
+00:45:17.200 --> 00:45:23.280
+worry about. If you want to try this out on your 
+own, you could try it out in the console. Just  
+
+00:45:23.280 --> 00:45:27.360
+to save some time here, I'm just going to write 
+the code here. And you can go ahead and copy it.  
+
+00:45:28.560 --> 00:45:33.680
+But again, it's just knowing how to work with 
+the DOM and inspecting the elements to figure out  
+
+00:45:34.400 --> 00:45:35.120
+how to do this.  
+
+00:45:37.840 --> 00:45:43.600
+What I'm doing right here is basically saying, 
+Okay, if there are any bookmarks, let's just set  
+
+00:45:43.600 --> 00:45:49.280
+it to nothing. So we're not displaying anything, 
+we're going to reset the whole thing, since we're  
+
+00:45:49.280 --> 00:45:54.240
+calling this function to view bookmarks. And we're 
+going to have new bookmarks being passed in, which  
+
+00:45:54.240 --> 00:46:00.480
+is the current bookmarks. And we're gonna say if 
+the current bookmarks length is greater than zero,  
+
+00:46:00.480 --> 00:46:05.920
+meaning if there are current bookmarks, 
+and it's just not an empty array.  
+
+00:46:08.160 --> 00:46:11.360
+Let's go ahead and iterate 
+over all those bookmarks,  
+
+00:46:11.360 --> 00:46:18.400
+and show them in our UI. So to do that, we're 
+going to iterate over every bookmark in a loop.  
+
+00:46:22.960 --> 00:46:28.160
+And then, we're going to grab the bookmark 
+through indexing, so current bookmarks.  
+
+00:46:29.920 --> 00:46:35.760
+With whatever iteration we are in the loop. And 
+then what we're going to have to do from here  
+
+00:46:36.480 --> 00:46:41.840
+is call another function, add new bookmark, 
+which is going to add a new bookmark row to  
+
+00:46:42.720 --> 00:46:48.400
+our pop up, I'm going to go ahead and remove this 
+comment. And we're going to add a new bookmark,  
+
+00:46:49.600 --> 00:46:52.480
+we're going to pass it the bookmark 
+element up here, which is going to  
+
+00:46:52.480 --> 00:46:56.400
+populate all our bookmarks, well, it's 
+going to be where we add each of our rows.  
+
+00:46:59.120 --> 00:47:03.680
+And I'm going to pass it each specific bookmark. 
+So we're going to add one bookmark at a time and  
+
+00:47:03.680 --> 00:47:09.760
+call this function every time we're adding a 
+bookmark. But before that, what we want to do  
+
+00:47:09.760 --> 00:47:14.960
+is if there are no bookmarks to show meaning, 
+current bookmarks is just an empty array.  
+
+00:47:17.280 --> 00:47:20.720
+We're going to want a message that 
+says there are no bookmarks here.  
+
+00:47:20.720 --> 00:47:24.720
+So we're going to set a message using italics.  
+
+00:47:30.480 --> 00:47:42.640
+Saying no bookmarks. To show before we move 
+on and add individual bookmarks to our pop up,  
+
+00:47:42.640 --> 00:47:47.840
+let's go ahead and check if this condition 
+works. Where there's no bookmarks to show and  
+
+00:47:47.840 --> 00:47:51.760
+since we haven't added any bookmarks to this 
+YouTube video that I'm looking at right now,  
+
+00:47:51.760 --> 00:47:58.000
+it should work, I want to go ahead and reload my 
+extension. Yep, there it is no bookmarks to show.  
+
+00:47:59.920 --> 00:48:07.280
+Amazing. So now we're going to want to finally 
+handle the case where we have bookmarks to show  
+
+00:48:07.920 --> 00:48:14.640
+and this is going to allow us to start seeing 
+bookmarks in our UI. So the first thing we're  
+
+00:48:14.640 --> 00:48:19.840
+going to do is go to our add new bookmark 
+function. And it's going to accept bookmark  
+
+00:48:22.640 --> 00:48:29.440
+bookmarks element, and it's 
+going to accept a bookmark.  
+
+00:48:31.040 --> 00:48:36.000
+And then what we're going to do from here 
+is we're going to create two elements. So  
+
+00:48:36.000 --> 00:48:42.320
+one element is going to be for the title, which 
+is going to display in the UI of each bookmark.  
+
+00:48:43.040 --> 00:48:48.960
+And then one element is going to be the whole 
+bookmark element that will contain the title  
+
+00:48:49.520 --> 00:48:54.960
+will contain the delete button and will contain 
+the play button. So let's go ahead and create  
+
+00:48:54.960 --> 00:49:09.760
+the bookmark title element. And then after 
+this one, we're also going to create the new  
+
+00:49:09.760 --> 00:49:19.840
+bookmark element, which will encapsulate all these 
+other elements that are part of a bookmark row.  
+
+00:49:24.080 --> 00:49:29.600
+From here, for bookmark title element, we're 
+going to want to display what the bookmark  
+
+00:49:29.600 --> 00:49:35.920
+is and give it a title. So we actually already 
+created the title. The title is the description  
+
+00:49:35.920 --> 00:49:41.200
+of the bookmark. If you remember in our bookmark 
+object, there's a timestamp and a description.  
+
+00:49:41.200 --> 00:49:46.480
+So we're gonna set our text content to the 
+description, which is bookmark dot description.  
+
+00:49:48.720 --> 00:49:55.680
+And then our class name is going to be bookmark 
+title element dot class name, and that will be  
+
+00:49:55.680 --> 00:50:03.040
+set equal to bookmark title and this is just 
+going to add some In CSS, that is already in  
+
+00:50:03.040 --> 00:50:09.040
+our boilerplate code. Now for the general 
+component that is going to encapsulate all  
+
+00:50:09.040 --> 00:50:13.040
+the play button, the title, a delete 
+button, anything else you might want to add,  
+
+00:50:14.160 --> 00:50:20.880
+we're going to do a couple things, the first 
+thing we're going to do is give it an ID of  
+
+00:50:20.880 --> 00:50:28.000
+bookmark element, or bookmark with the 
+bookmark time, and this is going to guarantee a  
+
+00:50:28.960 --> 00:50:38.080
+unique ID for each element that is a row. So if 
+you save any bookmark, what's gonna happen is  
+
+00:50:38.080 --> 00:50:42.320
+there's going to be a row associated with each 
+bookmark, which is our new bookmark element.  
+
+00:50:43.280 --> 00:50:47.840
+And there's going to be an ID set for that 
+row, which will be the bookmark along with  
+
+00:50:47.840 --> 00:50:53.680
+the time and they'll help us uniquely 
+identify any specific row in the UI.  
+
+00:50:53.680 --> 00:51:00.560
+And that's later we're going to be used to delete 
+elements when we're deleting a specific bookmark.  
+
+00:51:02.640 --> 00:51:06.320
+And then we're going to set a class name, 
+which was is going to help with some styling,  
+
+00:51:07.120 --> 00:51:12.480
+that's going to be set to a bookmark 
+class. And then we're going to set  
+
+00:51:12.480 --> 00:51:18.160
+an attribute which is going to help us 
+with playing a video. Because basically,  
+
+00:51:18.160 --> 00:51:24.000
+we're going to want to know the timestamp of any 
+specific bookmark. So when we play the video,  
+
+00:51:24.800 --> 00:51:30.080
+we know where to set the video player at what 
+time we want to send it out and the attribute  
+
+00:51:30.080 --> 00:51:35.840
+of the bookmark element will help us find that. 
+And the final things we want to do here is,  
+
+00:51:35.840 --> 00:51:40.240
+since we know the new bookmark element 
+is encapsulating all these other things,  
+
+00:51:41.040 --> 00:51:50.160
+we want to append child bookmark title element, 
+so it displays within the new bookmark element.  
+
+00:51:50.160 --> 00:51:56.720
+And then we have this bookmarks element 
+that is passed in. And we're going to  
+
+00:51:56.720 --> 00:52:03.840
+append our new bookmark element, which is this 
+element that's encapsulating all the other things.  
+
+00:52:05.600 --> 00:52:11.280
+Inside that since it's a container. 
+So now if we go back to our UI,  
+
+00:52:13.600 --> 00:52:20.560
+and we give this a reload, just in case, let's 
+just go to a new video. And if I press plus,  
+
+00:52:20.560 --> 00:52:29.600
+in this video, we see a new row, it 
+says bookmark out one hour, 54 minutes.  
+
+00:52:31.040 --> 00:52:36.480
+And we could add another row if we 
+want. And it gives us that same row,  
+
+00:52:38.320 --> 00:52:41.680
+we're going to handle the case of the 
+deletion, there's an ADD, it's just going to  
+
+00:52:41.680 --> 00:52:49.600
+set at zero seconds. Bookmark it 
+000. Awesome. So that works. So now  
+
+00:52:52.320 --> 00:52:55.600
+let's go back work on some 
+additional functionality.  
+
+00:52:56.560 --> 00:53:03.520
+Right now, we have no functionality associated 
+with each bookmark yet, so we can't play any  
+
+00:53:03.520 --> 00:53:09.440
+particular timestamped bookmark, we can't delete a 
+bookmark. And the next thing we want to add is the  
+
+00:53:09.440 --> 00:53:14.880
+play button. So to do this, we're going to add a 
+play button to each bookmark that will go directly  
+
+00:53:14.880 --> 00:53:20.080
+to this timestamp that we have saved for each 
+video. To start off, we're going to have to add  
+
+00:53:20.080 --> 00:53:25.360
+a function that is going to add an icon for 
+a play button, listen for a click and call a  
+
+00:53:25.360 --> 00:53:30.720
+function or event listener that will perform the 
+logic to set a video at a particular timestamp.  
+
+00:53:30.720 --> 00:53:35.200
+The function will end up looking something like 
+what we're going to code right here in a second.  
+
+00:53:36.400 --> 00:53:41.840
+And we're going to keep it super generic because 
+it's going to be used for both our delete  
+
+00:53:42.400 --> 00:53:49.600
+and play functionality. So the functions 
+are going to take a source attribute  
+
+00:53:50.480 --> 00:54:04.960
+an event listener. And it control parent element. 
+And when we say control elements in our code,  
+
+00:54:04.960 --> 00:54:09.840
+it means the play button, the delete button, 
+we're just calling those control elements.  
+
+00:54:12.560 --> 00:54:14.640
+So we're going to create a control element.  
+
+00:54:21.120 --> 00:54:27.120
+And this is just one particular functionality, 
+we're going to call a singular control element.  
+
+00:54:27.840 --> 00:54:32.400
+So in this specific case, we're going 
+to have a play button. But again,  
+
+00:54:32.400 --> 00:54:37.600
+this is a generic function. So think of this 
+as like a play button, a delete button we want  
+
+00:54:37.600 --> 00:54:43.760
+this singular control element will be one 
+of those. And then those control elements  
+
+00:54:46.240 --> 00:54:52.160
+will be linked to a image in our assets 
+folder. So if we want to play button,  
+
+00:54:52.880 --> 00:55:00.640
+what we're going to link to is assets slash play 
+dot PNG, and our schema super are predictable  
+
+00:55:01.440 --> 00:55:07.120
+for this. So all we're going 
+to do is assets plus SRC plus  
+
+00:55:08.000 --> 00:55:12.720
+dot png. And there's definitely a better 
+way of doing this, you can go back  
+
+00:55:12.720 --> 00:55:17.040
+and work on the code after this video. But we're 
+just going to keep it super simple for right now.  
+
+00:55:19.360 --> 00:55:26.880
+We're going to give it a title that is 
+the same as our source attribute, or what  
+
+00:55:26.880 --> 00:55:34.720
+we pass in this source. So what's going to get 
+passed in here is play, edit, delete, whatever.  
+
+00:55:34.720 --> 00:55:40.960
+And the title will be set to that. So in this 
+particular case, for play, it will be set as play,  
+
+00:55:42.960 --> 00:55:51.760
+we're going to add a event listener. And 
+that event listener will listen for a click.  
+
+00:55:53.920 --> 00:55:59.360
+And we're going to pass it a function that 
+is going to be performed on that clique. And  
+
+00:55:59.360 --> 00:56:03.600
+the last thing we want to do is there's 
+going to be a container for all control  
+
+00:56:03.600 --> 00:56:09.360
+elements. And we're passing that in into 
+this function. And we're calling it control  
+
+00:56:09.360 --> 00:56:15.840
+parent element. So we're going to append this 
+singular control element to the parent element.  
+
+00:56:18.560 --> 00:56:23.760
+And the next thing we're going to want to do is 
+add the function call that will add a play button,  
+
+00:56:23.760 --> 00:56:29.280
+a title and our event listener to each individual 
+bookmark. So in the add new bookmark function  
+
+00:56:29.280 --> 00:56:34.400
+that we coded earlier, we're going to add a couple 
+lines of code here. And these couple lines of code  
+
+00:56:34.400 --> 00:56:39.440
+are going to add those control elements. So we're 
+going to go ahead and create the element that's  
+
+00:56:39.440 --> 00:56:46.560
+going to hold all our buttons, we're going 
+to call it the controls element. And it's  
+
+00:56:46.560 --> 00:56:49.680
+going to be a div just like these other 
+ones, we're going to keep it super simple.  
+
+00:56:53.280 --> 00:56:57.840
+And then what we want to do 
+is give this some styling.  
+
+00:57:01.120 --> 00:57:04.320
+We're going to add the class name, but controls,  
+
+00:57:05.360 --> 00:57:14.000
+and you're just gonna have to trust me on 
+this it exists. Then what we want to do is  
+
+00:57:14.000 --> 00:57:21.440
+set our attributes using a set bookmark attributes 
+function that we created, we're going to pass in  
+
+00:57:21.440 --> 00:57:26.960
+play, the event listener is going to be called 
+on Play. And we're going to code that later.  
+
+00:57:26.960 --> 00:57:30.880
+And then we're going to pass in the controls 
+element, which is going to be the parent element.  
+
+00:57:31.680 --> 00:57:39.840
+And the last thing we want to do is 
+append this to our new bookmark element.  
+
+00:57:41.840 --> 00:57:47.440
+And what we should see now is, this 
+play button is going to show up in  
+
+00:57:47.440 --> 00:57:53.840
+our extension. So let's check this out. 
+Let's give this a refresh over here.  
+
+00:57:57.440 --> 00:58:01.920
+There we go. We have the play button in our 
+extension. But what we're going to notice  
+
+00:58:02.480 --> 00:58:09.040
+is it's actually not going to work. Let's go 
+ahead and play this video. And we're going to  
+
+00:58:09.040 --> 00:58:14.960
+try to get it back to 26 minutes, 51 seconds, 
+it doesn't work. And the reason it doesn't work  
+
+00:58:14.960 --> 00:58:21.840
+is we still need to code the On Play Event 
+listener. So let's go ahead and do that.  
+
+00:58:23.600 --> 00:58:30.800
+What we're going to do is we're going to target 
+the timestamp attribute that we set earlier.  
+
+00:58:33.120 --> 00:58:39.920
+So again, you could check this out in your 
+console or inspect, if you want to get a  
+
+00:58:39.920 --> 00:58:44.000
+visualization of how this is gonna work. But I'm 
+gonna go ahead and type this for the sake of time.  
+
+00:58:47.760 --> 00:58:53.360
+And we're gonna get that timestamp we set 
+earlier. And then the second thing we're  
+
+00:58:53.360 --> 00:58:58.240
+gonna want to do is grab the active tab, and 
+that's just using the active tab function.  
+
+00:59:00.080 --> 00:59:04.560
+This is an async await function. So we're going 
+to have to async await it. And I'm going to add  
+
+00:59:04.560 --> 00:59:09.600
+async to make this async function. So 
+we've actually run into a problem now,  
+
+00:59:10.400 --> 00:59:14.960
+we need to send the content script and message 
+to manipulate the YouTube player to set it at  
+
+00:59:14.960 --> 00:59:20.240
+the timestamp that the bookmark is placed on. 
+So in this file, we're going to have to add that  
+
+00:59:20.880 --> 00:59:25.280
+message. Let's go ahead and send 
+a message to the content script.  
+
+00:59:27.280 --> 00:59:34.560
+And this is going to follow the same pattern 
+of how we did it with our background script.  
+
+00:59:37.040 --> 00:59:43.360
+Missing comma there. We're going to have type 
+of play. That's going to be our event type.  
+
+00:59:44.320 --> 00:59:46.480
+And then the value is going to be bookmark time.  
+
+00:59:50.560 --> 00:59:54.160
+And then in our content script, 
+we're going to have to be able  
+
+00:59:54.160 --> 01:00:00.160
+to read this message. So what we're 
+going to do is add a condition to our  
+
+01:00:00.160 --> 01:00:04.800
+On message listener here, and we're 
+going to say if the type is play.  
+
+01:00:11.360 --> 01:00:13.840
+Let's set the YouTube player time  
+
+01:00:14.960 --> 01:00:18.960
+equal to the value that's passed in. So basically, 
+let's just take a look at this for a second.  
+
+01:00:20.080 --> 01:00:25.200
+If it's sending a message of type play, 
+and the value is the bookmark time,  
+
+01:00:25.200 --> 01:00:29.840
+then what we want to do is take that value and 
+set it to the YouTube Players Current Time,  
+
+01:00:29.840 --> 01:00:35.120
+which will make it the time of the bookmark. 
+And let's go ahead and see if this works.  
+
+01:00:37.200 --> 01:00:46.080
+I'm going to go ahead and reload my extension. 
+And let's go ahead and go to the extension,  
+
+01:00:46.080 --> 01:00:51.200
+we have a bookmark at 26 minutes, 51 seconds, 
+it's currently at 48 minutes, 30 seconds.  
+
+01:00:52.000 --> 01:00:55.840
+Let's hit that play button. It goes 
+back to 26 minutes, 51 seconds.  
+
+01:00:57.280 --> 01:01:00.320
+And now if we also hit this addition 
+button anywhere in the video,  
+
+01:01:01.280 --> 01:01:05.840
+we should get a new bookmark, we have 
+two hours, 21 minutes, 22 seconds.  
+
+01:01:07.520 --> 01:01:14.080
+Now let's go forward. Let's press play 
+here. And it goes back to that time.  
+
+01:01:14.080 --> 01:01:19.840
+Awesome. So now our Play button works. The last 
+functionality we want to build is the ability to  
+
+01:01:19.840 --> 01:01:25.360
+delete a bookmark, which will be super similar to 
+what we did for the play button. The first thing  
+
+01:01:25.360 --> 01:01:30.480
+we're going to want to do is go to our POP up.js 
+file. And we're going to add the delete button  
+
+01:01:30.480 --> 01:01:37.920
+to our controls element with the code in our add 
+new bookmark function to set bookmark attributes.  
+
+01:01:37.920 --> 01:01:44.400
+So let's go ahead and do that we're going to pass 
+in delete our on delete event listener, and then  
+
+01:01:44.400 --> 01:01:51.760
+the parent controls element. And since we set 
+the undelete function as the event listener,  
+
+01:01:51.760 --> 01:01:56.960
+we need to code some operations that are 
+going to take care of our deletion. So we  
+
+01:01:56.960 --> 01:02:02.240
+already know we're going to use this active tab 
+that we used over here. So let's go ahead and  
+
+01:02:02.240 --> 01:02:08.720
+already create this an async function ahead 
+of time. Let's grab the user's active tab.  
+
+01:02:13.680 --> 01:02:19.840
+And then what we're going to want to do is grab 
+the timestamp attribute that we set earlier.  
+
+01:02:23.920 --> 01:02:27.200
+And it's going to be the same code from up 
+here. So I'm just going to copy and paste  
+
+01:02:31.920 --> 01:02:40.400
+there we go. Then what we're going to also want 
+to do is grab the element that we want to delete.  
+
+01:02:42.400 --> 01:02:48.480
+So if you remember, I created a 
+specific ID linked to timestamps,  
+
+01:02:49.360 --> 01:02:54.080
+what we're going to want to do is grab 
+elements by the ID so we can delete them.  
+
+01:02:58.160 --> 01:03:05.120
+So bookmark. Plus the bookmark time will 
+give us the element we want to delete.  
+
+01:03:07.040 --> 01:03:09.520
+And then what we're going 
+to do is delete that element  
+
+01:03:10.320 --> 01:03:15.840
+by going to the parent node, and then removing the 
+child which will be the element we want to delete.  
+
+01:03:19.200 --> 01:03:23.360
+And then the final thing we're going to want to 
+do here is send a message to our content script.  
+
+01:03:26.000 --> 01:03:33.520
+Saying we want to perform a deletion type of  
+
+01:03:36.800 --> 01:03:45.200
+delete, and then the value is going to be bookmark 
+time. And there's one final thing we want to do  
+
+01:03:45.200 --> 01:03:51.040
+here, this Send Message function from the Chrome's 
+tabs API actually takes a callback function  
+
+01:03:51.040 --> 01:03:56.240
+optionally. And we're going to pass one in which 
+is going to be our view bookmarks function. And  
+
+01:03:56.240 --> 01:04:03.680
+that's just going to refresh our bookmarks, so any 
+deletions show up immediately, then in our content  
+
+01:04:03.680 --> 01:04:08.720
+script, we're going to add another condition, 
+which is basically you're going to ingest  
+
+01:04:08.720 --> 01:04:16.720
+that Delete message. So we're going 
+to say else if type equals Delete.  
+
+01:04:19.600 --> 01:04:25.840
+The current video bookmarks will be 
+equal to current video bookmarks.  
+
+01:04:26.960 --> 01:04:29.120
+Filter, and we're going to filter by time.  
+
+01:04:31.760 --> 01:04:35.120
+So the time is not equal to the value 
+being passed in because that's a  
+
+01:04:35.120 --> 01:04:39.840
+value we're deleting. And then the final 
+thing we want to do is sync Chrome Storage.  
+
+01:04:41.680 --> 01:04:48.000
+So if this page reloads, this 
+deleted bookmark does not show up.  
+
+01:04:52.720 --> 01:05:03.120
+We're going to JSON fi, error bookmarks and If 
+that should work, the last thing we want to do  
+
+01:05:03.120 --> 01:05:09.520
+is add a way to send the updated bookmarks back 
+to our POP up.js file in order to display the most  
+
+01:05:09.520 --> 01:05:16.480
+recent bookmarks, and we'll do the following. 
+To do that, we're going to send a response of  
+
+01:05:16.480 --> 01:05:22.560
+current video bookmarks. So now we can go ahead 
+and try out deleting a bookmark with a reload  
+
+01:05:22.560 --> 01:05:28.400
+of our extension, and it should start working. 
+So I'm going to go back to our Chrome browser,  
+
+01:05:31.840 --> 01:05:39.360
+reload our extension. And if we 
+go ahead and delete a bookmark,  
+
+01:05:40.240 --> 01:05:47.200
+we're gonna see that they're deleted. If we go 
+ahead and add a bookmark, we're gonna see there's  
+
+01:05:47.200 --> 01:05:52.320
+a new bookmark. It's at a different timestamp the 
+YouTube players a different time. So if we play,  
+
+01:05:53.600 --> 01:05:58.720
+it goes back to the timestamp of the bookmark. 
+We want to delete again, it's going to delete.  
+
+01:05:59.680 --> 01:06:03.360
+The last thing we're going to want to 
+do is distribute our extension. However,  
+
+01:06:03.360 --> 01:06:07.840
+I'm not going to quite go over that in this video, 
+because Google gives great documentation that  
+
+01:06:07.840 --> 01:06:12.960
+serves as a step by step guide on how to go about 
+publishing your chrome extension to the Google web  
+
+01:06:12.960 --> 01:06:18.400
+store for anyone to download. And with that, the 
+videos over you know everything you have to do  
+
+01:06:18.400 --> 01:06:23.920
+in order to create a modern web extension 
+using manifest v3, and I'll see you next time.