Build a Chrome Extension - Course for Beginners 

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

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

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

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.

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

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.

Exactly what I was looking for

Waited for tutorial like this for long time

This is the thing i wanted from such a long time

I've been looking for this course for so long

Absolutely loved it. Bring us part 2 ✨

Freecode camp is incredible. One love❤️

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

Low-key wanted this. Love free code camp

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.

love it, thanks for making this video

Great tutorial. Thanks!

learning thru the chrome extension discord is amazing!

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

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

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

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.

Thanks for the tutorial!

Was waiting ❤️

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.

This is very cool, thanks guys 🤩

Best tutorial. Thank you!

Yoo ! what a timing ❤❤❤

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

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.

thx for this amazing tutorials

Must come back to this playlist 👀

Fantastic video. thank you

This is just amazing

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

Arrre bhartiya ... feel proud

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

Thanks a million

I love you guys

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

Awesome!!

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

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

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

Woow i love the content. 😍

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 RU-vid right now.

Many thanks!))

Thank You 💗💓

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

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?

This inspire me to give up on coding

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.

Thanks Ramen

Wow,, this video is Very helpful,

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 RU-vid 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 RU-vid 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-RU-vid websites.

Awesome ❤️

This is gonna make me some good money.

Thank you M.r

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.

Very interesting!! This course is really exciting and modernistic

Extremely enlightening. Many thanks! 🙏🏽

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?

Masha'Allah 🌹

How would you go about doing the following: When you click on the icon to bookmark, the extension popup opens automatically? no need for you to go all the way to the icon and click it?

Good tutorial

nice video

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

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?

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

Something I've wanted to do

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

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?

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

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

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.

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

Great

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

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

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

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?

what text editor is he using for the coding?

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

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.

will it work in safari browser as well?

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

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

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

nice

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?

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

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

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.

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

Where we need to upload this code to appear in Chrome

5:20 I might have skipped a step but what menu is this?

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?

Pls where can i get the boiilerplate so i can copy and paste the code

25:20 does not work, event is still not fired on page refresh

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