If you want to create your own Chrome
extension, you're in the right place. In this course, Raman 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.
