Build a Chrome Extension - Course for Beginners

Learn how to create a Chrome browser extension using JavaScript and the new iteration of the web extensions platform, called Manifest V3.
✏️ Raman Hundal developed this tutorial.
💻 KZbin Bookmarker Starter Code: github.com/raman-at-pieces/yo...
💻 KZbin Bookmarker Finished Code: github.com/raman-at-pieces/yo...
🔗 Pieces Code Snippet Assistant download: pieces.app/install
🔗 Publishing extension on the chrome store docs: developer.chrome.com/docs/web...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:02:15) Demo
⌨️ (0:05:18) Understanding manifest.json
⌨️ (0:08:46) Coding the extention
⌨️ (0:31:37) newVideoLoaded function
⌨️ (0:31:37) fetchBookmarks
⌨️ (0:37:08) addEventListener
⌨️ (0:48:03) addNewBookmark function
⌨️ (1:00:33) Testing the extention
🎉 Thanks to Pieces.app for providing a grant that made this course possible.
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@joeychukc]

Thank you for making this useful video, this is so far the most detailed and advanced tutorial I could find on KZbin!

[@sleeping_dragon]

Definitely the best chrome extension tutorial I've seen so far. Others are either really outdated or don't teach much, or both. This is great.

[@TypicallyThomas]

If this is the best you've seen I worry about the others because this is quite poor

[@bharathkumar5870]

@@TypicallyThomas plz tell me other sources for learning chrome extensions plz

[@TypicallyThomas]

@@bharathkumar5870 Don't have any I'm afraid

[@zoldlen883]

@@TypicallyThomas You will need to go to school for it then. That's all the internet is. Follow alongs.

[@dimitrivasilev2905]

@@zoldlen883 not sure how school is any better. School will introduce you to the concept of making a google chrome extension and then quiz you on it with the expectation that you’ve already mastered it.

[@pintaridergaming]

Ok this is crazy, i searched for this yesterday and now this came out

[@quiyoma3730]

Time to save to the PlayList of videos I wanna watch but will never watch

[@noface00]

way to go

[@yochutes]

😂

[@maxfrischdev]

*cough cough* 😅🤣🤣🤣

[@dimitrivasilev2905]

This one is only an hour long! I’m sure you can fit it in your schedule somewhere. I believe in you 💪

[@boredomindex3353]

😂

[@eitan_schwartz]

Waited for tutorial like this for long time

[@alexbright9849]

This is what i did need yesterday and you posted this thanks❤️❤️❤️❤️❤️

[@crusader_]

Low-key wanted this. Love free code camp

[@BehruzbekOtayev]

What's low-key?

[@who_s_afraid]

​@@BehruzbekOtayev it says it has meaning of restrained, like “of low or moderate intensity, not very forceful" or chilly.

[@dheerajrawat6201]

This is the thing i wanted from such a long time

[@md.jannatulnayem4328]

Absolutely loved it. Bring us part 2 ✨

[@edgyman1956]

I've been looking for this course for so long

[@frodelius]

Keep looking.

[@harshjaiswal1634]

Exactly what I was looking for

[@frodelius]

@@anchyzas Well, does it work for you guys?

[@DogeMultiverse]

learning thru the chrome extension discord is amazing!

[@benvarkey5097]

Was waiting ❤️

[@Neko-Pro-Watcher]

Thank you. I learned a lot, this cover many things!

[@chrisdesigns]

Freecode camp is incredible. One love❤️

[@aakarsh1475]

Wow, this video is really advanced! He goes through all the steps so fast and assumes you already know a lot of things. This is definitely not for beginners who want to learn how to make an extension from scratch. You need some prior experience and knowledge to follow along. I wouldn't recommend this video to anyone who is just starting out with extensions. It might be too confusing and frustrating for them.

[@nathanfoss766]

He did say at the beginning of the video that you need an understanding of JavaScript and DOM manipulation.

[@coryanders6328]

@@nathanfoss766 having plenty of experience with both, there are still a lot of other assumptions made about what the viewer knows. there's not even really a starting off point. it's kind of like "you know algebra, right? here's calc II".

[@zabity]

@@nathanfoss766 and then he skips the fact of using an IFEE as if it's obvious, then suddenly background.js comes in dunno why and then he puts an even listener on a chrome object in pure js. whoa!

[@yuvrajsingh-gm6zk]

you gotta need to take the discomfort, learning isn't supposed to be fun, and whenever you find learning fun that is just because you have plenty of prior knowledge to begin with!

[@AbuFaizal]

love it, thanks for making this video

[@anonfourtyfive]

Wow, just found out this. What a precious thing, I'll try this out.

[@Qpham90]

never would i have thought a delicious japanese noodle dish would teach me how to make a chrome extension, how far we've advanced

[@kgarun]

Great tutorial. Thanks!

[@patrickctaylor]

Thanks for the tutorial!

[@tazimmahta7625]

Yoo ! what a timing ❤❤❤

[@OriginalCodeMaster]

Nice tutorial, I was looking for such a video for a while. Thanks for your content 😍🤩

[@universecode1101]

This is very cool, thanks guys 🤩

[@Arunnn241]

Good video. By no means best video I've seen. It's clear there's a script or some background code that's being read from bc the order of operations from "what do I need to do" to "code I wrote" are out of order. You go through the instruction as if you're working from the solution rather than the problem and that eliminates the problem-solving process: questions like "why do I want left controls and not right controls?", "why this video player?", "why a value property?", "why are splitting this up into so many different functions from the start?" are prominent in a viewers' mind throughout the video which causes mental fatigue.

[@pranich]

Best tutorial. Thank you!

[@popov654]

Thanks for easy and understandable tutorial, it's really good. Though I would say some things could be done better. 1. You should probably test on timestamp existance on bookmark creation to avoid creating duplicates when a user clicks the button several times in a row 2. You should probably deal with storage in background page/service worker, and not in content script. Even though the code in content script will become less beautiful, I guess it is better in terms of architecture. And if you don't care about architecture at all, why just not move that to popup.js? Your content script really does not need to get access to the full bookmarks list in order to add a "plus" button and assign a click handler to it. 3. Maybe you don't have to refetch all the bookmarks after deletion, just add some logic for handling an empty list case (some speed optimization). 4. Finally, Chrome definitely won't allow us to change the active tab leaving the popup opened (though Firefox really allows something like this using a special development option to preserve all opened popups), but we can overprotect ourselves and save the current page url or video id somewhere in popup.js, so that we can be 100% sure that we are deleting the right things. I know that it is a video for beginners, but still. Also it was worth mentioning about the total storage limitsof each type that Chrome allows us to store.

[@edgargreene2628]

thx for this amazing tutorials

[@aM_Tovi]

Thank you for this tutorial now i am going to make one extension for myself 😊

[@kendralewis5883]

Must come back to this playlist 👀

[@gdp60b40]

This is just amazing

[@frodelius]

Was it too good to be true after all?

[@Loug522]

I've been learning js and html these past few days, this one seem like a fun adventure for when I finish the Scrimba course.

[@jackepner9984]

Came here BECAUSE of the Scrimba course... Scrimba is far better for gaining understanding of what javascript does and how to use it. But when it comes to a project... I was pretty disappointed to see the chrome extension project be nothing but a bookmark extension, which of course exists natively in all browsers. Useless. I'd at least like to spend my hours committed to a course building something that isn't completely worthless.

[@HavoJavo]

I love you guys

[@abdul_qadir7780]

Woow i love the content. 😍

[@vmendes9999]

Funtastic! Tank you Raman for this sharing I've created my first Chrome extension :-)

[@gusr7513]

Hey everyone. If you add newVideoLoaded(); at the end of contentScript as the purposed quick fix, the extension won't work properly on reload. The reason is that you will not get the video ID into the currentVideo variable, so you won't be able to add new timestamps. The best quick fix I came up with was to force a new URL (I also studied how KZbin deals with different URLs) and I came up with this code that you can add to your contentScript in the place of newVideoLoaded() (the one at the end, line 64 of the finished code); let trail="&ytExt=ON"; if(!window.location.href.includes(trail)&&!window.location.href.includes("ab_channel")){ window.location.href+=trail; } This should force an update on the URL of the KZbin when necessary, which will then trigger the chrome.tabs.onUpdated. I hope this helps. (For those who want to know what is ab_channel, it is something youtube adds spontaneously for some videos (with channel info) and that triggers the chrome.tabs.onUpdated on its own.) Cheers! EDIT!! Also include a condition &&window.location.href.includes("youtube.com/watch") in the if statement i gave. You don't want it to update the URL in non-KZbin websites.

[@ayomideoguntuase165]

Admin should definitely pin this comment or help fix the github repo cos it fixed a major issue that renders the extension useless.

[@IonutSultana]

Thanks for helping us out. I was debugging this due to an "Extension context invalidated". That was generated because when calling the newVideoLoad() the fetchBookmarks function didn't have with what videoId to work with.

[@tunni8126]

Two things I found useful while developing this extension: 1. choosing that video for test purposes which has no ads. Like those of sandeep maheshwari. 2. using 'extensions reloader' extension for one click reload of the upacked extensions. Make sure to pin this extension.

[@mrrishiraj88]

Thanks a million

[@suniljadaun5814]

Arrre bhartiya ... feel proud

[@alexandr8151]

Awesome!!

[@ugur76]

This finished code itself in git repo is not working currently in chrome

[@sanjaykanade966]

After much research, selected this as my first tutorial on Chrome Extension Development. Turned out great! The only problem I faced initially was the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist." Was not easy to find a solution. Finally, what worked is open a new Chrome window after reloading the extension. None of the solutions on Stack Overflow mentioned that. Another thing that should be made clearer in the video is how do you bring up the Console for the Background service worker. The video is too quick and it is difficult to see this part. Finally, turned out, you can do that from the Manage Extension itself. To see log of the Content script, use the regular browser Developer Tools.

[@graemeStanley]

Great tutorial. Thanks for all your hard work putting this together.

[@VitorHugo-np9qs]

Hey man, what's up? Can you put the extension created on video works?

[@firewatermoonsun]

Many thanks!))

[@sesencat]

This inspire me to give up on coding

[@mdhossen7082]

Wow,, this video is Very helpful,

[@sllakshancc]

Thank You 💗💓

[@littlehearts7039]

Thanks Ramen

[@viraatkumar8980]

anyone getting a failed to load resource error on the comleted version of the code from his github? says access it blocked by client or something

[@ragtop63]

I'd really like to see a thorough tutorial on how to build a browser extension using a framework, like Vue. Finding any information on how to do it seems to be one of the most difficult things to find on KZbin right now.

[@user-un9ne9zw7d]

rightt? there are so many videos that talk about manifest version 2 but none on mv3

[@popov654]

@@user-un9ne9zw7d why the hell do I need MV3? I am more than happy with Manifest V2, service worker/content script/background page script are basically just all the same thing IMO.

[@IndieLifeAlexAdamov]

Nice Tutorial. Made me realize I needed to brush up on Dom manipulation. Don

[@Praveenkumar-gv2qu]

Awesome ❤️

[@jaiganesh12]

Hey, great tutorial to get started with manifestv3 and chrome api.. You've got everything covered

[@kintag4459]

Thank you M.r

[@programmingtravelandsuccess]

at around 16:00 im getting an error because function newVideoLoaded() does not exist...i check the code and im still wondering. Why are you calling newVideoLoaded() when it is nowhere defined?

[@TipsJazzInferno]

First Comment Thank you mcuh great

[@cabiste]

a better start to the video after the demo would've been to show us how to create the boilerplate code as that will let us understand how the extension works better

[@adityasaurabhsingh6528]

use user snippet under the settings gear and there you can write your code ,change the name to boilerplate

[@preadsy6912]

Very interesting!! This course is really exciting and modernistic

[@mbdAli]

this one saved me ton of time. how to get pagesource of new window opened?

[@UrzaRage778]

Great video! How would you do something like grab all of the URLs from the tabs in the active window, and paste them to your clipboard with " " in-between each URL?

[@shreedharpandey3319]

This is gonna make me some good money.

[@joeylucas7185]

Something I've wanted to do

[@RAVINDRAKUMAR-gj2nx]

I am a beginner and just searched video on youtube to learn how extensions work and my doubt is cleared now. thank you a lot.

[@briannaharris731]

What VScode extension are you using to provide autocomplete suggestions regarding the Chrome APIs as you code. Particularly in your background.js file?

[@briannaharris731]

New to chrome development and any help would be much appreciated!

[@terfel9476]

Did you ever find out? I'd really like to know!

[@amirhassan6549]

Good tutorial

[@frodelius]

Yes it is, just a pity the extension doesn't work for me. Does it work for you?

[@syntheticperson]

Extremely enlightening. Many thanks! 🙏🏽

[@StampsbyK]

nice video

[@eab4984]

In my addNewBookmarkEventHandler the line currentVideoBookmarks = await fetchBookmarks(); throws an error with the message: Uncaught TypeError: Cannot read properties of undefined (reading 'sync') at :3:26 at new Promise () at fetchBookmarks (:2:16) at :1:31 What could that be?

[@debillion]

Can you please, give me an understanding of how to automate the submission of this extension to webstore?

[@fareedezzedeen8017]

I was looking for this for a long time, All contents talks about v2

[@MadaniChannel_QuranUrdu]

Masha'Allah 🌹

[@BrandonCMaximum]

I'm not sure if something has changed about Chrome extensions since this tutorial was made, but this doesn't seem to work anymore. Even the finished project in the git repo. After making my own changes to grab the URL on the content script/popup JS files directly instead of messing with utils and background, I finally got it working.

[@dohverse1407]

Yes, it does not seem to be working for me either. Would you mind telling me what changes you made? Ive been having trouble fixing the problem. Thanks

[@SecurityTalent]

Great

[@user-ez6dn5do9p]

I want to create an extension that downloads chatgpt response in pdf file. Additional features may include enabling user save pdf to preffered place of choice in preffered document type e.g. word instead of pdf

[@cu0ngpitt]

why do you write the content script in a immediately invoked function?

[@m-108]

i want to make a chrome extension in which i can freely zoom in x-axis or y-axis of a website independently or individually. specifically, i am currently unsatisfied with the UI of g-calendar and thus want to vertically zoom in on the page without horizontally zooming in. i hope such type of chrome extension can be made, isn't it?

[@JoaquinPeMM]

Would anyone mind to explain me the syntax on the "chrome.storage.sync.get([currentVideo], (obj) => {..." inside the fetchBookmarks function? is [currentVideo] the name of the key?

[@ascourter]

This is great. Thanks for sharing this. Is it best practice to aim for high compatibility when building extensions or do people include polyfills or other libraries like jquery when writing extensions?

[@mikevaleriano9557]

It's 2022, no one should be using jQuery for anything anymore.

[@popov654]

@@mikevaleriano9557 Why? jQuery is a good library in terms of wyntax, speed and compatibility.

[@nocopyrightgameplaystockvi231]

I am going to develop a pdf maker for the code in the webIDE.

[@arunprashanth369]

what chrome extension i want to create a extension through which i can place buy sell orders while i am doing analysis in the tradingview charting website with a 3 sec timer to cancel (optional) and also info about the position i have taken, without switchin logging moving too much . well need to figure it out how to do it just started the course so hopefully built it in 30 days

[@user-zz7hn5py2x]

more videos in this play list pleas

[@yannickcotten2854]

Hi and thanks for that tutorial, it's very interesting and instructive. However there's one thing that let's me a little perplexed : if I understand it right, the sole purpose of your background script is to uselessly transmit in a complicated way the tab's page url to the content script ??? because so far I can achieve this with the classical and much more simple document.URL property directly inside the content script.

[@changxinzhang]

why I can only see the console.log of contentScript using Inspect? I cannot see the console.log of background.js

[@Lunolux]

nice

[@karamkhanna1096]

🔥🔥🔥

[@ericstudiox7226]

this is a beginners question im sure but when i click on loadunpack, it doesn't see any of my files which i created in dreamweaver..ie js,json,css,html , nothing...help please

[@05060024]

Why did "async" suddenly appear on line 14 at 24:34? There's no explanation of that.

[@shanli9593]

how to debug during development if things don't work out as expected?

[@listerofsmeg]

It's broken background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

[@sounakroy9284]

yes

[@clearthinking5441]

What is the difference going to be between a (Chrome Extension + ChatGPT) and GPTStore?

[@pastuh]

Extensions helps when company programmers can't fast provide specific functions.

[@dzienisz]

9:25 Please explain the use of IIFE. Is it necessary?

[@AsianServer]

Plse make video on full stack web development in one video which is longer like more than 30 hours and cover popular framework and libraries. Plese make a video

[@user-ig2kn5xd9m]

I want to build an extension like autods. How would I go about in doing that ? It's a product importing tool.

[@shivkini9119]

When I use it on videos which are segmented, the button becomes very narrow. How to avoid this?

[@juggla4evr1]

How can I have someone build Me an extension & at the same time a website, would they be two different things or can You do them at the same time? What's the recommended method?

[@khantariq1047]

not working when i console in background.js

[@AbhijeetBGavali]

use this to list your idea for the new extension, let's see who comes up with the best idea!

[@dota2content755]

Helllo Im facing an error, when I send a message from background script I encounter this error, help me please I can't get rid of it....! Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

[@plainzone8356]

same here

[@atomik-code]

Same here also, do you guys find any solutiion to this? @@plainzone8356

[@miraclemark6120]

Me 3

[@omarruder4129]

why is the code in contentscript.js enclosed by parenthesis, and called upon directly?