@@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.
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.
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 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".
@@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!
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!
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.
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.
At 37:17 to use the active function you need additional permissions in the manifest.json file. Change line 5 to "permissions": ["activeTab", "storage", "tabs"], You wont run in a problem later in the next few mins.
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.
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.
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
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 TH-cam 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 TH-cam 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-TH-cam websites.
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.
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 TH-cam right now.
@@Mohamed-m2m9o 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.
You shouldn't it seems long and hard but as you go everything simplifies and they explain rlly well so don't poo panic take a cup of water/coffee and enjoy
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.
What VScode extension are you using to provide autocomplete suggestions regarding the Chrome APIs as you code. Particularly in your background.js file?
If anyone is having issues getting test logs to display, or undefined such as at 17:33, I have found that you need to load a new youtube video. at least on my machine simply reloading does nothing and will not alert the extension to begin doing anything.
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?
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.
Injection approach would not work on many single page applications, the injection would be removed. It's better to use mutation observers for injection management.
at 16:00 I have the problem that the tab.url is undefined so no message can be sent to the content script. Does anyone else have the same problem? How can I fix this?
Just what i needed. I dont know if its already an extension, but i want to make one where you can go to youtube playlists, and then it will add a statistics section for that playlist in the DOM. Showing things that youtube doesn't show right now. Like total watch time, and watch time if you sped up everything by say 1.25x
18:08 The `undefined` message you see here is from the console log since the `console.log()` method does not return anything. Your log message should be there, but it should show an empty list since that is what `getElementsByClassName` returns when no matches are found.
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.
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?
I have created extension for FF/Edge and Chrome, the code are portable except for specific API(s), the same code will most likely work for the browsers
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?
This tutorial is excellent if you want to make the exact program you're making. This doesn't teach the underlying principles of what you need to do something similar on your own. It's a poor tutorial, I'm sorry to say. You skip over important parts, don't explain a few key details. It feels too much like your many follow-along tutorials and not a course on how to do it using examples.
this is what i thought , this too much for a beginner or even for someone that want to do something similar i just learned some js html css and i was able to make basic chrome extension on freecodecomp blog , but this tutorial already started creating extension with 8 files i don't know how this is for beginners .
I want to mark notification on TH-cam that I have seen most recent. so the next time, when I open notification I can easily realize which is new. Can you make video to guide please
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?
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
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.
If this is the best you've seen I worry about the others because this is quite poor
@@TypicallyThomas plz tell me other sources for learning chrome extensions plz
@@bharathkumar5870 Don't have any I'm afraid
@@TypicallyThomas You will need to go to school for it then. That's all the internet is. Follow alongs.
@@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.
Thank you for making this useful video, this is so far the most detailed and advanced tutorial I could find on TH-cam!
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.
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.
He did say at the beginning of the video that you need an understanding of JavaScript and DOM manipulation.
@@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".
@@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!
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!
Time to save to the PlayList of videos I wanna watch but will never watch
way to go
😂
*cough cough* 😅🤣🤣🤣
This one is only an hour long! I’m sure you can fit it in your schedule somewhere. I believe in you 💪
😂
Ok this is crazy, i searched for this yesterday and now this came 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
Exactly what I was looking for
@@anchyzas Well, does it work for you guys?
Low-key wanted this. Love free code camp
What's low-key?
@@BehruzbekOtayev it says it has meaning of restrained, like “of low or moderate intensity, not very forceful" or chilly.
Freecode camp is incredible. One love❤️
I've been looking for this course for so long
Keep looking.
@@frodelius same tf ?
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.
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.
At 37:17 to use the active function you need additional permissions in the manifest.json file. Change line 5 to "permissions": ["activeTab", "storage", "tabs"],
You wont run in a problem later in the next few mins.
learning thru the chrome extension discord is amazing!
Waited for tutorial like this for long time
This is the thing i wanted from such a long time
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.
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.
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 what i did need yesterday and you posted this thanks❤️❤️❤️❤️❤️
Was waiting ❤️
Absolutely loved it. Bring us part 2 ✨
Nice tutorial, I was looking for such a video for a while. Thanks for your content 😍🤩
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.
Arrre bhartiya ... feel proud
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
use user snippet under the settings gear and there you can write your code ,change the name to boilerplate
This is very cool, thanks guys 🤩
Yoo
! what a timing ❤❤❤
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 TH-cam 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 TH-cam 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-TH-cam websites.
Admin should definitely pin this comment or help fix the github repo cos it fixed a major issue that renders the extension useless.
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.
Thank you. I learned a lot, this cover many things!
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 TH-cam right now.
rightt? there are so many videos that talk about manifest version 2 but none on mv3
@@Mohamed-m2m9o 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.
Wow, just found out this.
What a precious thing, I'll try this out.
love it, thanks for making this video
This inspire me to give up on coding
fucking rel
You shouldn't it seems long and hard but as you go everything simplifies and they explain rlly well so don't poo panic take a cup of water/coffee and enjoy
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.
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
What VScode extension are you using to provide autocomplete suggestions regarding the Chrome APIs as you code. Particularly in your background.js file?
New to chrome development and any help would be much appreciated!
Did you ever find out? I'd really like to know!
Must come back to this playlist 👀
Great tutorial. Thanks for all your hard work putting this together.
Hey man, what's up? Can you put the extension created on video works?
Thanks for the tutorial!
I love you guys
Great tutorial. Thanks!
Awesome ❤️
Best tutorial. Thank you!
If anyone is having issues getting test logs to display, or undefined such as at 17:33, I have found that you need to load a new youtube video. at least on my machine simply reloading does nothing and will not alert the extension to begin doing anything.
you saved me
but I don't see "URLSearchParams" in console tab
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?
Extensions helps when company programmers can't fast provide specific functions.
Woow i love the content. 😍
Very interesting!! This course is really exciting and modernistic
This is just amazing
Was it too good to be true after all?
Funtastic! Tank you Raman for this sharing
I've created my first Chrome extension :-)
Fantastic video. thank you
thx for this amazing tutorials
Gonna watch da whole thing. Who is stayin with me?
This is gonna make me some good money.
Awesome!!
Nice Tutorial. Made me realize I needed to brush up on Dom manipulation. Don
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.
13:19 it's not going to include &index=2 part because it's not part of v parameter!
This finished code itself in git repo is not working currently in chrome
Extremely enlightening. Many thanks! 🙏🏽
Good tutorial
Yes it is, just a pity the extension doesn't work for me. Does it work for you?
Injection approach would not work on many single page applications, the injection would be removed. It's better to use mutation observers for injection management.
Thanks a million
I was looking for this for a long time,
All contents talks about v2
Wow,, this video is Very helpful,
at 16:00 I have the problem that the tab.url is undefined so no message can be sent to the content script. Does anyone else have the same problem? How can I fix this?
I'm facing the same problem here man, did you find any solution to that?
@@wriddhihazra I have the same issue, did you found a solution ?
Did you find a solution ?
change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
@@wriddhihazra addListener take a third element change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)
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
Thank You 💗💓
Why did "async" suddenly appear on line 14 at 24:34? There's no explanation of that.
9:25 Please explain the use of IIFE. Is it necessary?
Thanks Ramen
Just what i needed. I dont know if its already an extension, but i want to make one where you can go to youtube playlists, and then it will add a statistics section for that playlist in the DOM. Showing things that youtube doesn't show right now. Like total watch time, and watch time if you sped up everything by say 1.25x
Were you able to make one?
@@Anaghish He didn't say he will make it. He just said "he wants to make". So no, he didn't.
This is how it is with hindu people like @varadrane822
First Comment Thank you mcuh great
18:08 The `undefined` message you see here is from the console log since the `console.log()` method does not return anything. Your log message should be there, but it should show an empty list since that is what `getElementsByClassName` returns when no matches are found.
Correct getTime arrow function:
const getTime = t => {
var date = new Date(0);
date.setSeconds(t);
return date.toISOString().substring(11, 19);
}
Thank you M.r
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.
same here
Same here also, do you guys find any solutiion to this? @@plainzone8356
Me 3
Many thanks!))
It's broken
background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
yes
Something I've wanted to do
Masha'Allah 🌹
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?
Got the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist" background.js line 1
did you get the resolution for it ?
@@atulya3344 try adding this in background.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
port.postMessage({counter: msg.counter+1});
});
});
@@riyadutta2282 Thanks much, but i found that, my content scripts was not loading, thus I used insertScript to add it and then I was able to run it
@@atulya3344 can you share the code that helped you in running that... Actually I'm facing little problem.. this extension isn't working properly..
@@riyadutta2282 sure, will share soon. Indeed I have not created this extension but only I picked the calling mechanism
5:20 I might have skipped a step but what menu is this?
nice video
The code font is a bit dark / dim
🔥🔥🔥
25:20 does not work, event is still not fired on page refresh
I am going to develop a pdf maker for the code in the webIDE.
We need lesson about creating extension for Firefox!!!!
I have created extension for FF/Edge and Chrome, the code are portable except for specific API(s), the same code will most likely work for the browsers
ok i will check your github, thanks
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?
hi....did you get solution to this prb?
This tutorial is excellent if you want to make the exact program you're making. This doesn't teach the underlying principles of what you need to do something similar on your own. It's a poor tutorial, I'm sorry to say. You skip over important parts, don't explain a few key details. It feels too much like your many follow-along tutorials and not a course on how to do it using examples.
this is what i thought , this too much for a beginner or even for someone that want to do something similar i just learned some js html css and i was able to make basic chrome extension on freecodecomp blog , but this tutorial already started creating extension with 8 files i don't know how this is for beginners .
I agree. I tried to follow along, but a 10mins tutorial and the official docs were better at explaining what was happening.
use this to list your idea for the new extension,
let's see who comes up with the best idea!
It would be helpful to know what IDE you're using; if you're new enough to watch this video, you're probably not going to know what IDE to choose.
I want to mark notification on TH-cam that I have seen most recent. so the next time, when I open notification I can easily realize which is new.
Can you make video to guide please
@MD FAHIM could you please more details
this one saved me ton of time. how to get pagesource of new window opened?
16:25 Creation of the Button
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?
It's 2022, no one should be using jQuery for anything anymore.
@@mikevaleriano9557 Why? jQuery is a good library in terms of wyntax, speed and compatibility.
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
0:03:15 Time stamp