A chrome extension is a software program that is designed to run within the Google Chrome web browser.
Extensions can add a variety of functionality to the browser, including providing tools for web development, adding features to the browser interface, and changing the behavior of web pages.
We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create your own Chrome extension with JavaScript.
By the end of this course you will understand how to create a modern Chrome extension. You will learn how to create the extension using the new iteration of the web extensions platform, called Manifest V3.
To follow along, it is best to have a basic understanding of JavaScript and DOM manipulation.
Raman Hundal created this course. Raman is a great instructor and he works for Pieces.app. Pieces.app provided a grant that made this course possible but you don't need to use their extension to follow along.
The extension you will create in this course is a YouTube bookmarker. It will make it so anytime you navigate to a YouTube video page an icon will appear on the video player to allow you to bookmark a particular timestamp on the video.
Watch the full course below or on the freeCodeCamp.org YouTube channel (1-hour watch).
Transcript
(autogenerated)
If you want to create your own Chrome extension, you're in the right place.
In this course, Rahman will teach you how to create a Chrome extension using the new iteration of the web extensions platform, which is called Manifest v3.
Rahman is a great instructor.
And he works for pieces that app pieces that app provided a grant that made this course possible, but you don't have to use their extension to follow along share in the comments what type of Chrome extension you want to make.
Now the reason I want to teach about this particular topic is I've created two web extensions in my career.
The first is for a previous company, where my extension generated a significant amount of revenue for the company.
And the second for my current company pieces, where our web extensions play a critical part of our product stack, and help developers across the globe boost their productivity.
I'm going to be using the pieces web extensions and integrations quite a bit in this video.
So if you're interested in downloading an AI coding assistant that helps you save and reuse code snippets, convert screenshots to code, and more, go ahead and download pieces in the description.
And you can totally follow along.
So during my journey as a Chrome extension developer, I did often notice that tutorials and StackOverflow answers were using outdated versions of the web extensions platform.
My hope for you after you leave this video is that you have a resource to create a modern Chrome extension, and you understand the difference between the newer version of the web extensions platform manifest v3, and older versions.
Now, before we get started, there's going to be three prerequisites to this course, the first is required, and it's that you have a basic understanding of JavaScript and DOM manipulation.
The second is optional.
If you want to follow along with this video and code alongside with me, you can go to the description below, I'm gonna have a link to my GitHub repo, go ahead and get cloned that and you'll be able to follow along.
The third is also optional.
If you totally want to follow along, you can go ahead to pieces dot app and install a pieces IDE integration along with the pieces Web Extension, and you'll be able to use pieces exactly the way I do in this video.
With that, let's get started.
So as I mentioned before, the extension we're going to create as a YouTube bookmarker.
Basically, anytime you navigate to a YouTube video page, an icon will show up on your YouTube video player to allow you to bookmark a particular timestamp on any video.
So let me show you how that's gonna work.
If you're on a YouTube video page, you're gonna see this item at the bottom right, you can go ahead and click that.
And if you navigate to your chrome extension icon at the top, right, I've pinned, so it's showing in the toolbar, you're going to see a new timestamp already had one timestamp for 15 minutes, I added one with an hour 18.
I can go ahead and delete this one because I just decided I don't want it.
And our extension is going to give us that ability to do that.
Now if I want to go back to my 15 minute timestamp, you can click the play button.
And it goes directly back to that particular timestamp.
I can also delete this one too.
And when there's no bookmarks to show, it's going to say there's no bookmarks to show.
Now we're going to add one, just so we have one on this video, and I can show you how storage works.
I'm going to navigate to a new video.
And in this video, we have no bookmarks.
So it says there's no bookmarks to show.
But if we go back to our previous video where we saved a bookmark, it's going to load that previous bookmark.
Now the last thing is if you navigate to a non YouTube video page, it's going to say this is not a YouTube video page in the extension UI.
And that's basically all the capabilities of this chrome extension we're going to build out here, there's going to be a lot more you can do on your own afterwards.
Now I also want to mention the reason we're working on creating this extension in particular, is because it's going to show you all the major parts of creating a Chrome extension, it's going to show you how to work with a content script to manipulate the DOM.
It's going to show you how to create a UI for your extension.
And it's going to show you how to use service workers as background scripts, which is a major part of the ship from manifest v2 to manifest v3.
And to start working on the extension.
Once you get cloned my repo, you can go ahead and click on the puzzle piece in your Chrome browser at the top right click Manage extensions.
I'm going to go ahead and remove my extension show I can show you how it works.
And you're going to see this developer mode option at the top right go ahead and toggle that so it's on click Load unpacked, then go to the repo that you get cloned in mind with the boilerplate code.
Go ahead and load that.
And we're going to see our extension here.
If we Click on this puzzle piece and pin it.
What we're going to see is this basic UI, it's just going to say your bookmarks for this video with no bookmarks, and it's just going to show up everywhere.
This is the default messaging in the boilerplate code I supplied and the boilerplate code will also contain all the files you need to follow along.
The best place to start with creating our extension is the manifest dot JSON file.
This file is a JSON file where we can specify what version of the extensions platform we will use, among other information that is going to serve as default for loading in our extensions.
Also, every extension you would want to create whether it's Safari, Mozilla, or any chromium base extension will need a manifest dot JSON file.
And it's probably the single most important file in your extension, because it simply just won't work without it.
In our boilerplate code already added the manifest dot json file, so we don't have to spend too long writing it out, I think it would be especially helpful if I just point out some of the things that you should note, in case you're creating your own extension.
So let's take a look here, as you'd suspect, there's a name, there's a version number and a description.
And basically, the version number is going to populate when you loaded in the extension, the name you see is also going to be the name of the extension when you load it in.
And the description is pretty self explanatory.
It's just a description of what the extension does.
Now things get more interesting with the permissions.
The permissions will be different depending on whatever Chrome extension you're building.
For this particular extension, we're going to request two permissions, which is going to be the permission to use the Chrome dot storage API, and the chrome dot tabs API.
The chrome dot storage API is to store things in the user's browser for the extension.
And the second permission, which is a chrome dot tabs API, is what helps us access our browser's tab system.
So we can read the tab for the extension.
This is basically going to help us identify what browser tab the user is currently using, and grab the URL to see if they are in a YouTube video page for our extension.
Now, the host permissions just give you the ability to send cause requests to certain host names.
Our extension only deals with YouTube pages.
So I have a match pattern written here just for YouTube.
The service worker, as I mentioned before, there's a big change between extensions, v2, and v3.
And one of the big changes is the use of a service worker.
As you can see here, the other is the ability to use promises.
But let's just focus on service workers.
For right now.
Service workers are just a JavaScript file that runs separately from the main browser thread.
This means that your service worker would not have access to content of a webpage, since it is separate from main processes.
However, your service worker does have capabilities to speak to your extension using the extensions messaging system, which we will see and use in our bookmarking extension.
The next thing I want to point out is the content scripts.
The content scripts are just files that run in context of the webpages we're on.
We're going to use this to manipulate the DOM of our webpage that our extension is looking at.
And here we're just specifying that our content script is represented by our content script J S file.
As you can see, with the J s colon content script dot j s, the last thing I want to point out is the pop up dot HTML file down here, under default pop up, this just specifies which file was served as our UI.
In our case, we've specified the pop up dot HTML file, and in that file, we specify that the corresponding file that helps it with its interactivity is a pop up.js file.
With all that out of the way, let's get to coding the actual extension.
We're now finally going to start writing code to make our extension work.
For us even test the extension, we have to add the button of the YouTube player that will allow us to save bookmarks with timestamps.
So in order for us to add a button on the YouTube video player will have to manipulate the DOM of the web page we are on.
What that means is we'll have to write our logic in our content script file, which operates in the context of the webpage, as I mentioned before, so let's go ahead and add some code to our content script file.
We're going to go ahead and add the following variables YouTube, left, controls, and YouTube player one is going to be for accessing the YouTube player one is going to be for accessing the controls.
And this is going to allow us to manipulate each of these.
But before we continue writing the logic to do DOM manipulation in the context strip, we also have to think about how our extension is even going to know when we've navigated to a new web page.
And we need to know this so the content script knows to execute logic to add the plus i Call to add bookmarks for our extension.
Let's go ahead and go in our background.js file now.
And what we want to do here is listen to any updates in our tab system and find the most recent tab or the tab that we're on currently and see if it's a YouTube page.
So we're going to have a listener, that's going to listen to tabs.
And if you remember, we got permissions to access the Chrome tabs API.
And we're going to listen for an update to tabs.
The parameters were given is a tab ID and a tab.
What we're going to do from here is see if there's a tab URL, and if there is a tab Euro.
Let's see if that Euro includes youtube.com/watch.
The way I came up with that is if you look at our YouTube video, every individual video has YouTube slash watch.
And we just want to make sure we're on a page that has that specifically as a URL, then what we want to do is set our query parameters.
And we're going to use query parameters as a unique ID for each video.
So we can grab it from storage, you'll see what I mean in a second, and I'll show you.
So we're going to do that by using the JavaScript split method.
What that means is basically after this question mark query parameter, we're going to grab this value.
And this is going to be our unique video value this right here after the equal sign.
And every video on YouTube has a different value right here.
So it's a pretty unique key that will help us store videos uniquely as well in our storage, and it's consistent.
So then we're going to add your URL parameters.
And this is just an interface to work with URLs URL search params.
And the final thing we want to do is there's a messaging system that happens between the extension, we're going to send a message to our content script that basically says a new video is loaded.
And this is the video ID of that video, and the video ID being that unique video value that we saw in the URL on YouTube.
And this tab, Id send message usage that I'm doing right here is all directly from documentation.
The Send Message takes a tab ID, it takes a unique object.
So right now I'm going to type type.
And this is a type of event is a new video event.
And then a video ID value, which is going to be URL, parameters, dot get v.
So if we're doing URL dot get D, it's going to grab this right here.
And that's basically going to be the code for that send message takes a tab ID, it takes an object and then it can also take a callback function.
This object right here doesn't have to be type or video ID, it could also be something random, like I could literally pass this and the content script will have access to random, and then the string random.
In our case, the only thing that's applicable is the type of the event and then the video ID, which is a content script needs.
Now in our content script, we're going to add a listener that is going to listen to any of those incoming messages, we need to be able to listen to that background.js message.
So to do that, we're going to end up writing the following code to add that listener, so we're going to say on message add listener.
And this is going to accept three parameters.
So an object a sender, and a response.
And the response is, when a message is being sent to the content script, we can also send a response back where the message is coming from.
So I'm going to destructure those values we're getting and if you remember, the way I'm deconstructing Type value video ID is basically we're given a video ID right here.
Later on, we're going to grab a value as well, and I'm just destructuring.
So each of these are its own variable.
So it's a If type is equal to new, so if the type of event is new video loaded, which we're getting from the background.js file, we want to be able to set current video, which will be a global variable in the content script as the video ID, and then we want to call a function to handle any actions with new video.
So we're going to call a new video loaded function.
And let's go ahead and set current video as a top level variable.
And that's just going to be an empty string.
But it's going to be set as the string set from the background at js file, once the message is received on this end, so let's go ahead and actually see if this works at all.
I'm gonna go ahead and just console dot log your parameters.
I'm gonna give this a reload.
Open this, let's inspect it.
And we ever URL search parameters.
So we know we're getting our URL search parameters now.
Great.
So so far, things look good.
Now, what we want to do from here is create that new video loaded function.
And after we create this function and all the functionality surrounding it, we should see the YouTube player button on the YouTube video.
So let's go ahead and do that.
So what we're going to do is create this function that we have right here called New Video loaded.
And what we probably want to do is check if a bookmark button already exists, I know the class name that this item has, it's called Bookmark button because I wrote the CSS code that's going to style this whole extension.
So you could just copy this part right here.
But this is just some native Dom, slash JavaScript methods that we can use.
It's actually MB by class name.
And it's going to return an HTML collection.
So what we're going to do is grab the first element that matches this class name, bookmark button.
And it's just going to exist on every single YouTube video page.
So if we want to test that, we could just say console dot log bookmark exists.
And let's reload this page and inspect it.
Actually, let's reload our extension as well.
reload this page inspect, we're probably going to get undefined this is exactly what I expected.
Because we don't have any logic surrounding the Bookmark button yet.
And also, we're not even setting a bookmark button right now.
So if the Bookmark button did exist, we would get true, it does exist, but we're getting undefined right now.
So what we want to do if we're getting that undefined or false value that a bookmark button does not exist, is add some logic to say, hey, let's add this bookmark button to any YouTube player.
So we're going to create an image element.
That is going to be the image we click on for bookmark buttons.
As part is in, we're going to add a couple of attributes.
The first thing we're going to want to do is pull the image that we're using, which is our assets slash bookmark.
PNG, you already have this if you're following along with the boilerplate code.
The second thing we want to do is add a class.
And the way we're going to add this class is basically make it pretty dynamic here.
So we're gonna add a YouTube button class with a space and then we're going to add a bookmark button class in quotes.
And this is again, just some styling I have that you don't need to worry about right now.
And the last thing we want to do is basically on hover, we want to make a title show.
So we're just gonna say the title is click to bookmark, current timestamp.
And this is just a UI thing.
You'll see this in a bit.
Next, what we want to show is a way to grab the YouTube controls.
So these are the YouTube controls over here, we want to be able to grab these left controls, so we can add a bookmark button right here.
So let's go ahead and find out how to do that.
I already know how to grab this.
So I'm going to show you how this works.
You can inspect elements right here and find what elements they exactly are.
But basically, we're going to use native JavaScript methods like we have done previously to grab those controls and insert our button.
If I do document dot get elements by class name.
And I grab YouTube left controls, we should get an element back, which is going to be this div class over here.
And you can see that it gives us all the left controls over here, where we're going to add our button.
And the second thing we're going to want to do is grab the YouTube player as well.
And that's one of the global variables we set in our content script.
And we can also do that by writing document dot get elements by class name.
And then there's this video stream class.
And we're going to grab the one at the zero with index.
And it grabs a whole YouTube component right there.
So now we know the two elements in the DOM we need to manipulate.
But let's set those elements.
First, we're going to do exactly what we saw in our content over there.
Document get, actually, I'm just gonna go back and copy these way easier, so don't make a mistake.
And then the second one is going to be YouTube player.
Go back and copy that.
Okay, so after this, what we're going to want to do is add that bookmark button and we grabbed the controls, you saw that row in the player, we want to add it to that row.
So we're going to type out YouTube left controls to get those left controls we stored in a variable.
And to use this native JavaScript method we can use called append child, which is going to append this bookmark element inside that row.
And then the second thing we're going to want to do is probably add a listener to listen to any clicks on our icon.
So there's a correction I want to make to this portion of the video, before we continue, it's going to be very important in order for your extension to work functionally.
And it's only one line of code, but it's going to make such a big difference.
I'm also going to explain an important concept of Chrome extensions that I neglected while I was writing this, which is that in our manifest json file, we have a match pattern for our content script.
And basically the match pattern, we currently have checks if any youtube.com video is loaded.
And if it is, we're injecting our content script into the context of that web page.
So basically, what that means is, anytime a youtube.com page shows up, we're running a bunch of logic using our content script.
But the problem right now is that our background.js file is telling us when a new video is loaded.
And the event listener we're using is on updated, which is just checking if this URL is updated.
If you refresh this page, the URL is not updated.
So this button actually isn't going to show up.
And if you continue coding without this fix right here, you're gonna see some edge cases that you might not like.
So let's go ahead and fix this, we're going to do a super simple fix.
It's not the best fix in the world, but it will fix the problem here.
We're just going to call a new video loaded anytime our content script matches youtube.com.
And what this is going to do is call this new video loaded function anytime we hit that match pattern.
The downside of this is now if the background script sees it as a new video using the on updated event listener, and there's a condition that content script is injected, we're going to hit this or call this new video loaded function twice, you can fix this pretty easily by just adding a conditional make sure that doesn't happen.
But to make sure everyone is able to follow along with this correction, I will not be doing that here.
And we'll just only be inserting this one line of code calling the new video loaded function.
Luckily, the only thing our new video loaded function is doing is adding the Bookmark button to the YouTube player.
So there's going to be no negative implications to calling it twice.
Since we have a condition that checks if the button is already on the player.
It's just not the most efficient implementation, which is fine for the sake of this tutorial.
With that, let's continue with the rest of the video.
There we go, we have the button right there.
But right now, if we click the button, it's not doing anything.
And there's a reason for that.
The reason is that we don't have any event listener listening to click on this particular byte.
Let's go ahead and add the code for that.
So what we're going to do is add an event listener to listen to a click for the button.
And we're literally going to use the add event listener method, listen for a click, and then call a function called add new bookmark event handler.
And this is a function we have not coded yet.
So to make this function work, we're going to have to do the following.
We're probably going to have to figure out the timestamp of the video at which point someone presses the button.
This is basically going to help us figure out what our bookmark should be saved as in storage according to its timestamp.
So how are we going to do that? How are we going to figure out the YouTube video timestamp.
Again, YouTube makes this pretty accessible, it can be found as an attribute.
So what we're going to want to do is grab the YouTube player.
And we already have a global variable that has it.
But I'm just going to grab it again.
So we can see how to do this in the console, I'm going to create a YouTube player variable in our console.
Okay, now we have it saved.
And then on YouTube player, there's going to be a property called current time.
And it's going to give us the current time in seconds.
And in order for us to save our bookmark, according to hours, minutes seconds, we're probably going to also have to create a function that converts seconds into a standard time of how it's displayed in YouTube.
So let's go ahead and start with all those things.
We're gonna go ahead and add the function, add new bookmark event handler.
And we're going to use the exact property we saw in our console, YouTube player dot current time, which is going to give us the current time.
And we're going to say okay, now, this is only called when a new bookmark is made.
So let's create a new bookmark variable.
And this is going to be an object that has the time of the bookmark and a description.
And the description is just going to end up being the title that's going to be displayed in the Chrome extension.
So it's going to be a dynamic description and skins a bookmark at current time.
However, the problem is that this is in seconds, as we said before, so we're going to have to convert this.
So we're going to use a function called get time.
I'm just going to insert it using pieces.
So I'm going to do is go over to this time function here.
Insert snippet.
And there it is.
So now I'm able to convert my seconds into time.
And then the last thing I want to do here is sync it to Chrome Storage.
And what this is going to do is set Chrome storage with each bookmark.
So basically, each video, according to its video identification number that we're grabbing from the URL will also map back to a set up bookmarks in Chrome Storage.
So to do that, we're going to do Chrome storage sync.
And again, if you're interested in this, you can look in documentation to find out what this function takes.
Current video, it's important to remember that things need to be stored in JSON in Chrome Storage.
So I'm going to do JSON stringify.
All my current video bookmarks, so I'm actually going to add it A variable up here that's going to store all current video bookmarks in an array.
And I'm going to spread that.
So we can add a new bookmark to those set of current video bookmarks.
And then the last thing I want to do here is sort bookmarks by their save timestamp in our Chrome Storage.
So we're going to sort by time, and this is just coming from this right here, every bookmark is going to have a time and a description.
So we're going to look at that and sort accordingly.
Great.
Now, if we reload our extension, we're going to see if it works as expected.
And the way to see that is basically console dot log, this new bookmark, let's do it.
Great.
That time it worked, we just had to give it another reload.
And we got a time in seconds and a description.
Now the final thing I want to do is complete this file before we go to the UI.
And we want to make this fully functional to fetch all bookmarks when a new video is loaded.
To do this, we're going to grab asynchronously, all bookmarks from Chrome storage, which means I'm going to write a promise that resolves once we retrieve all bookmarks.
So that code is going to look like this.
I'm going to create it at the top here.
And I'm going to say const fetch bookmarks.
And I want to return a promise.
So we can resolve this asynchronously.
And within that promise, I'm going to fetch from Chrome Storage.
So I'm going to do a Chrome storage sync and we did a set before to set Chrome Storage, we're going to get this time our current video it takes an object.
And we're going to resolve to find any bookmarks when indexing using our current video.
So basically look in storage to see if our current video has any bookmarks, or if it exists in storage.
That's what's happening right here.
If it does exist, we're going to JSON dot parse it because we JSON dot Stringify before, if it doesn't, what we want to do is return an empty array.
And this should work.
And we're really only going to add these in two places, which will be in our new video loaded function.
So we're going to make this async.
And we're gonna add a fetch bookmarks.
So actually, we're just going to add this to our current video bookmarks variable.
And call a weight fetch bookmarks.
async await is going to resolve this promise.
And then the second place we want to add this is to our add new bookmarks event handler.
To basically handle this case, and make sure we're always using the most up to date set of bookmarks when destructuring.
So we're gonna do current video bookmarks equals the weight, veg bookmarks.
And also make this async.
Awesome.
So for right now, we finished everything we need for our content script file, obviously, things aren't going to show in the UI.
And we could check that out right here.
And as you can see, there's nothing in the UI because everything we've been doing so far has been manipulating the DOM right here to add the icon.
Add some logic to get us ready to create a UI for our extension.
Let's go ahead and start making some UI components show starting out with some bookmarks from clicking that addition button in the YouTube player that we added.
Now, the first thing we need to figure out on any given page is if it's a YouTube video page or not, if it is, we're going on one of fetch any bookmarks we may have from Chrome Storage.
And if it's not, we'll just want to display some messaging saying it's not a YouTube page.
If you open the Chrome extension on a page that is not YouTube.
So to do this, we're going to add a utility function that's going to allow us to decipher that logic.
So we're actually going to grab our utility function to find the active tab that the user is on through Google Chrome documentation.
I'm going to go ahead and use this example right here, which helps us retrieved a currently focused tab from the Chrome documentation.
And since I have the google chrome pieces extension over every codeblock, whether it's in documentation or Stack Overflow, I'm able to directly save on pieces with this icon that shows up at the top right of any code block, I'm going to go ahead and save it.
And then I'm going to go back to my VS code and refresh my pieces tree, I can go ahead and insert this snippet, which is the newest one, and I'm just going to rename this snippet to active tab Chrome.
Amazing and pieces automatically classified this as JavaScript, because it was able to decipher that from some machine learning.
I'm gonna go ahead and delete this background.js comment.
And awesome, we now have a function that grabs the current tab.
But also, I want to make sure I'm exporting this function.
So I'm going to add export.
And then what I want to do is open up the pop up.js file.
And over here, we're going to want to import that function at the very top.
So we can use it here.
So I'm going to import Get active tab URL from utils dot j, s, and I actually don't think the documentation called it this.
So I'm going to go ahead and change the function name, so it matches.
So go to utils.js.
Change that thought, awesome.
Now, the event we want to listen to when opening the pop up.js file is the DOM content loaded event, which is right here.
This event is a native window event that fires when an HTML document has initially been loaded.
It's essentially when we want to load all our bookmarks and show them.
So we're going to type the following to do so what we're going to do is grab our active tab function first.
And we're going to look at the user's current active tab, which we already have the function for from in the utiles.
It's an async function.
So we're going to async await this.
And then after that, we're going to grab the query parameters to help us identify the video.
If you remember, each YouTube video has a unique identifier.
After the question mark, where the query parameter, we're going to grab that, we're going to use a URL search params to be able to get the unique identifier for each video.
And to get the unique identifier, we're going to create it current video variable and do URL parameters dot get V.
And this is just based off of what the YouTube video URLs look like.
Now, our active tab URL should have youtube.com/watch Because any specific YouTube video always has this in its URL.
And we want to make sure we're watching a YouTube video when our Chrome Extension has any logic with bookmarks.
And we want to make sure this current video variable is truthy meaning is get actually returned something other than undefined or any falsie value.
And then what we want to do is we want to get any current video bookmarks from Chrome storage.
If you remember, we're setting Chrome storage with the current video as a key and then all the bookmarks as a value that is JSON ified.
And in order for us to retrieve those bookmarks, we need to use a Chrome Storage API to get them.
So to do that, we're going to grab the video bookmarks using Chrome storage sync get.
And we're going to get it with the current video unique identifier, which is the YouTube videos unique identifier in the URL.
And then, we are going to set a current video bookmarks variable which is going to contain all those JSON ified current videos.
And in order for us to pass this to any function or write some custom logic to show bookmarks, we're going to have to JSON dot parse any bookmarks that are saved in Chrome Storage since it's in JSON, and we can't really work with that.
But if there are no bookmarks or chrome searches and return anything, we're just going to want to return an empty array.
Now, we're going to have to pass this over to the view bookmarks function, which is basically going to help us view any bookmarks in our extension, that Chrome Storage dot get returns.
But before that, I'm just going to put a comment right here.
So we remember, we want to handle this else condition, which basically is for the scenario where we're not on a youtube.com video page, or current video returns a falsie value.
So what we're going to want to do is add a message that says this is not a YouTube video page.
And let's just go back to chrome to look at what that might look like.
So this is our UI Currently, we have this container class right here that encapsulates and will eventually encapsulate all the bookmarks we have, it has this container class name in it, what we're going to want to do is get that class name.
So we're just going to do this in the console before we actually do in code just to make sure it works.
The class was called container.
And that's just from the CSS in the boilerplate, so you don't have to worry about it, or the HTML or other.
So when we wrote this document that get elements by class name container, and then grab the first element in the HTML collection, we get this element right here, which is containing all these other elements within it.
And what we want to do here is basically specify in the HTML on pages that are not youtube.com.
So this is actually a YouTube video page.
We don't want to display this message.
But I just want to show how this is going to look, we're going to want to put a new div class that says, This is not a YouTube video page.
And let's just see if that works.
Will this change the extension the way we want it to? Container is not.
So what we need to do over here is actually encapsulate this in a variable.
We're gonna set this equal to container.
And now let's try that.
And change the extension to show that this is not a YouTube video page.
So the way we're going to do this dynamically in our code is basically put all the code we just put in our console to test this out within our else conditions.
So every time we're not on a YouTube video page, or this returns a falsie value, we want to show that this is not a YouTube video page when we try to open up the Chrome extension in those scenarios.
So we're gonna say const container equals document dot get elements by class name, right there.
Grab that container class, first element.
And then set the inner HTML, set that equal to div class equals title, title, just add some styling, that's going to make it look slightly nicer.
There's nothing super special about the styling I have.
And since we tested it, there shouldn't be really any surprises here, it should pretty much work as expected.
So let's go ahead and give this extension a reload.
It shouldn't show the message for this page.
It doesn't.
But if we go to a non YouTube page, it's gonna say this is not a YouTube video page.
Amazing.
So let's go back to our code.
And we're going to want to write this view bookmarks function.
So if it does meet the conditions of being on a youtube.com/watch page, and as you can see, that's from any page that has a video page, it has youtube.com/watch on it.
And your URL params dot get the return something so it's a truthy value, we're going to want to view the bookmarks associated with that video.
So let's go ahead and call the view bookmarks function and pass it all the current video bookmarks.
And we're gonna go ahead and write the logic that's going to help us populate the UI with all the bookmarks we grabbed from Chrome Storage.
So to do that, we're going to pass it current bookmarks.
And we're going to set a default argument of an empty array just in case nothing is passed to it.
It's just going To return or show no bookmarks, and we're going to grab a bookmark element.
Again, this is just from the HTML that I have given you.
So it's not anything you need to worry about.
If you want to try this out on your own, you could try it out in the console.
Just to save some time here, I'm just going to write the code here.
And you can go ahead and copy it.
But again, it's just knowing how to work with the DOM and inspecting the elements to figure out how to do this.
What I'm doing right here is basically saying, Okay, if there are any bookmarks, let's just set it to nothing.
So we're not displaying anything, we're going to reset the whole thing, since we're calling this function to view bookmarks.
And we're going to have new bookmarks being passed in, which is the current bookmarks.
And we're gonna say if the current bookmarks length is greater than zero, meaning if there are current bookmarks, and it's just not an empty array.
Let's go ahead and iterate over all those bookmarks, and show them in our UI.
So to do that, we're going to iterate over every bookmark in a loop.
And then, we're going to grab the bookmark through indexing, so current bookmarks.
With whatever iteration we are in the loop.
And then what we're going to have to do from here is call another function, add new bookmark, which is going to add a new bookmark row to our pop up, I'm going to go ahead and remove this comment.
And we're going to add a new bookmark, we're going to pass it the bookmark element up here, which is going to populate all our bookmarks, well, it's going to be where we add each of our rows.
And I'm going to pass it each specific bookmark.
So we're going to add one bookmark at a time and call this function every time we're adding a bookmark.
But before that, what we want to do is if there are no bookmarks to show meaning, current bookmarks is just an empty array.
We're going to want a message that says there are no bookmarks here.
So we're going to set a message using italics.
Saying no bookmarks.
To show before we move on and add individual bookmarks to our pop up, let's go ahead and check if this condition works.
Where there's no bookmarks to show and since we haven't added any bookmarks to this YouTube video that I'm looking at right now, it should work, I want to go ahead and reload my extension.
Yep, there it is no bookmarks to show.
Amazing.
So now we're going to want to finally handle the case where we have bookmarks to show and this is going to allow us to start seeing bookmarks in our UI.
So the first thing we're going to do is go to our add new bookmark function.
And it's going to accept bookmark bookmarks element, and it's going to accept a bookmark.
And then what we're going to do from here is we're going to create two elements.
So one element is going to be for the title, which is going to display in the UI of each bookmark.
And then one element is going to be the whole bookmark element that will contain the title will contain the delete button and will contain the play button.
So let's go ahead and create the bookmark title element.
And then after this one, we're also going to create the new bookmark element, which will encapsulate all these other elements that are part of a bookmark row.
From here, for bookmark title element, we're going to want to display what the bookmark is and give it a title.
So we actually already created the title.
The title is the description of the bookmark.
If you remember in our bookmark object, there's a timestamp and a description.
So we're gonna set our text content to the description, which is bookmark dot description.
And then our class name is going to be bookmark title element dot class name, and that will be set equal to bookmark title and this is just going to add some In CSS, that is already in our boilerplate code.
Now for the general component that is going to encapsulate all the play button, the title, a delete button, anything else you might want to add, we're going to do a couple things, the first thing we're going to do is give it an ID of bookmark element, or bookmark with the bookmark time, and this is going to guarantee a unique ID for each element that is a row.
So if you save any bookmark, what's gonna happen is there's going to be a row associated with each bookmark, which is our new bookmark element.
And there's going to be an ID set for that row, which will be the bookmark along with the time and they'll help us uniquely identify any specific row in the UI.
And that's later we're going to be used to delete elements when we're deleting a specific bookmark.
And then we're going to set a class name, which was is going to help with some styling, that's going to be set to a bookmark class.
And then we're going to set an attribute which is going to help us with playing a video.
Because basically, we're going to want to know the timestamp of any specific bookmark.
So when we play the video, we know where to set the video player at what time we want to send it out and the attribute of the bookmark element will help us find that.
And the final things we want to do here is, since we know the new bookmark element is encapsulating all these other things, we want to append child bookmark title element, so it displays within the new bookmark element.
And then we have this bookmarks element that is passed in.
And we're going to append our new bookmark element, which is this element that's encapsulating all the other things.
Inside that since it's a container.
So now if we go back to our UI, and we give this a reload, just in case, let's just go to a new video.
And if I press plus, in this video, we see a new row, it says bookmark out one hour, 54 minutes.
And we could add another row if we want.
And it gives us that same row, we're going to handle the case of the deletion, there's an ADD, it's just going to set at zero seconds.
Bookmark it 000.
Awesome.
So that works.
So now let's go back work on some additional functionality.
Right now, we have no functionality associated with each bookmark yet, so we can't play any particular timestamped bookmark, we can't delete a bookmark.
And the next thing we want to add is the play button.
So to do this, we're going to add a play button to each bookmark that will go directly to this timestamp that we have saved for each video.
To start off, we're going to have to add a function that is going to add an icon for a play button, listen for a click and call a function or event listener that will perform the logic to set a video at a particular timestamp.
The function will end up looking something like what we're going to code right here in a second.
And we're going to keep it super generic because it's going to be used for both our delete and play functionality.
So the functions are going to take a source attribute an event listener.
And it control parent element.
And when we say control elements in our code, it means the play button, the delete button, we're just calling those control elements.
So we're going to create a control element.
And this is just one particular functionality, we're going to call a singular control element.
So in this specific case, we're going to have a play button.
But again, this is a generic function.
So think of this as like a play button, a delete button we want this singular control element will be one of those.
And then those control elements will be linked to a image in our assets folder.
So if we want to play button, what we're going to link to is assets slash play dot PNG, and our schema super are predictable for this.
So all we're going to do is assets plus SRC plus dot png.
And there's definitely a better way of doing this, you can go back and work on the code after this video.
But we're just going to keep it super simple for right now.
We're going to give it a title that is the same as our source attribute, or what we pass in this source.
So what's going to get passed in here is play, edit, delete, whatever.
And the title will be set to that.
So in this particular case, for play, it will be set as play, we're going to add a event listener.
And that event listener will listen for a click.
And we're going to pass it a function that is going to be performed on that clique.
And the last thing we want to do is there's going to be a container for all control elements.
And we're passing that in into this function.
And we're calling it control parent element.
So we're going to append this singular control element to the parent element.
And the next thing we're going to want to do is add the function call that will add a play button, a title and our event listener to each individual bookmark.
So in the add new bookmark function that we coded earlier, we're going to add a couple lines of code here.
And these couple lines of code are going to add those control elements.
So we're going to go ahead and create the element that's going to hold all our buttons, we're going to call it the controls element.
And it's going to be a div just like these other ones, we're going to keep it super simple.
And then what we want to do is give this some styling.
We're going to add the class name, but controls, and you're just gonna have to trust me on this it exists.
Then what we want to do is set our attributes using a set bookmark attributes function that we created, we're going to pass in play, the event listener is going to be called on Play.
And we're going to code that later.
And then we're going to pass in the controls element, which is going to be the parent element.
And the last thing we want to do is append this to our new bookmark element.
And what we should see now is, this play button is going to show up in our extension.
So let's check this out.
Let's give this a refresh over here.
There we go.
We have the play button in our extension.
But what we're going to notice is it's actually not going to work.
Let's go ahead and play this video.
And we're going to try to get it back to 26 minutes, 51 seconds, it doesn't work.
And the reason it doesn't work is we still need to code the On Play Event listener.
So let's go ahead and do that.
What we're going to do is we're going to target the timestamp attribute that we set earlier.
So again, you could check this out in your console or inspect, if you want to get a visualization of how this is gonna work.
But I'm gonna go ahead and type this for the sake of time.
And we're gonna get that timestamp we set earlier.
And then the second thing we're gonna want to do is grab the active tab, and that's just using the active tab function.
This is an async await function.
So we're going to have to async await it.
And I'm going to add async to make this async function.
So we've actually run into a problem now, we need to send the content script and message to manipulate the YouTube player to set it at the timestamp that the bookmark is placed on.
So in this file, we're going to have to add that message.
Let's go ahead and send a message to the content script.
And this is going to follow the same pattern of how we did it with our background script.
Missing comma there.
We're going to have type of play.
That's going to be our event type.
And then the value is going to be bookmark time.
And then in our content script, we're going to have to be able to read this message.
So what we're going to do is add a condition to our On message listener here, and we're going to say if the type is play.
Let's set the YouTube player time equal to the value that's passed in.
So basically, let's just take a look at this for a second.
If it's sending a message of type play, and the value is the bookmark time, then what we want to do is take that value and set it to the YouTube Players Current Time, which will make it the time of the bookmark.
And let's go ahead and see if this works.
I'm going to go ahead and reload my extension.
And let's go ahead and go to the extension, we have a bookmark at 26 minutes, 51 seconds, it's currently at 48 minutes, 30 seconds.
Let's hit that play button.
It goes back to 26 minutes, 51 seconds.
And now if we also hit this addition button anywhere in the video, we should get a new bookmark, we have two hours, 21 minutes, 22 seconds.
Now let's go forward.
Let's press play here.
And it goes back to that time.
Awesome.
So now our Play button works.
The last functionality we want to build is the ability to delete a bookmark, which will be super similar to what we did for the play button.
The first thing we're going to want to do is go to our POP up.js file.
And we're going to add the delete button to our controls element with the code in our add new bookmark function to set bookmark attributes.
So let's go ahead and do that we're going to pass in delete our on delete event listener, and then the parent controls element.
And since we set the undelete function as the event listener, we need to code some operations that are going to take care of our deletion.
So we already know we're going to use this active tab that we used over here.
So let's go ahead and already create this an async function ahead of time.
Let's grab the user's active tab.
And then what we're going to want to do is grab the timestamp attribute that we set earlier.
And it's going to be the same code from up here.
So I'm just going to copy and paste there we go.
Then what we're going to also want to do is grab the element that we want to delete.
So if you remember, I created a specific ID linked to timestamps, what we're going to want to do is grab elements by the ID so we can delete them.
So bookmark.
Plus the bookmark time will give us the element we want to delete.
And then what we're going to do is delete that element by going to the parent node, and then removing the child which will be the element we want to delete.
And then the final thing we're going to want to do here is send a message to our content script.
Saying we want to perform a deletion type of delete, and then the value is going to be bookmark time.
And there's one final thing we want to do here, this Send Message function from the Chrome's tabs API actually takes a callback function optionally.
And we're going to pass one in which is going to be our view bookmarks function.
And that's just going to refresh our bookmarks, so any deletions show up immediately, then in our content script, we're going to add another condition, which is basically you're going to ingest that Delete message.
So we're going to say else if type equals Delete.
The current video bookmarks will be equal to current video bookmarks.
Filter, and we're going to filter by time.
So the time is not equal to the value being passed in because that's a value we're deleting.
And then the final thing we want to do is sync Chrome Storage.
So if this page reloads, this deleted bookmark does not show up.
We're going to JSON fi, error bookmarks and If that should work, the last thing we want to do is add a way to send the updated bookmarks back to our POP up.js file in order to display the most recent bookmarks, and we'll do the following.
To do that, we're going to send a response of current video bookmarks.
So now we can go ahead and try out deleting a bookmark with a reload of our extension, and it should start working.
So I'm going to go back to our Chrome browser, reload our extension.
And if we go ahead and delete a bookmark, we're gonna see that they're deleted.
If we go ahead and add a bookmark, we're gonna see there's a new bookmark.
It's at a different timestamp the YouTube players a different time.
So if we play, it goes back to the timestamp of the bookmark.
We want to delete again, it's going to delete.
The last thing we're going to want to do is distribute our extension.
However, I'm not going to quite go over that in this video, because Google gives great documentation that serves as a step by step guide on how to go about publishing your chrome extension to the Google web store for anyone to download.
And with that, the videos over you know everything you have to do in order to create a modern web extension using manifest v3, and I'll see you next time.