Build a Chrome Extension - Course for Beginners

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ธ.ค. 2024

ความคิดเห็น • 395

  • @sleeping_dragon
    @sleeping_dragon 2 ปีที่แล้ว +102

    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
      @TypicallyThomas 2 ปีที่แล้ว +16

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

    • @bharathkumar5870
      @bharathkumar5870 2 ปีที่แล้ว +2

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

    • @TypicallyThomas
      @TypicallyThomas 2 ปีที่แล้ว +1

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

    • @zoldlen883
      @zoldlen883 2 ปีที่แล้ว +5

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

    • @dimitrivasilev2905
      @dimitrivasilev2905 2 ปีที่แล้ว +4

      @@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.

  • @aakarsh1475
    @aakarsh1475 ปีที่แล้ว +66

    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
      @nathanfoss766 ปีที่แล้ว +8

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

    • @coryanders6328
      @coryanders6328 ปีที่แล้ว +11

      @@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
      @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
      @yuvrajsingh-gm6zk 8 หลายเดือนก่อน +2

      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!

  • @Arunnn241
    @Arunnn241 ปีที่แล้ว +23

    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.

  • @joeychukc
    @joeychukc 9 หลายเดือนก่อน +5

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

  • @Qpham90
    @Qpham90 ปีที่แล้ว +5

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

  • @harshjaiswal1634
    @harshjaiswal1634 2 ปีที่แล้ว +82

    Exactly what I was looking for

    • @frodelius
      @frodelius 2 ปีที่แล้ว

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

  • @pintaridergaming
    @pintaridergaming 2 ปีที่แล้ว +6

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

  • @tunni8126
    @tunni8126 ปีที่แล้ว +9

    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.

  • @quiyoma3730
    @quiyoma3730 2 ปีที่แล้ว +305

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

    • @noface00
      @noface00 2 ปีที่แล้ว +6

      way to go

    • @yochutes
      @yochutes 2 ปีที่แล้ว +3

      😂

    • @maxfrischdev
      @maxfrischdev 2 ปีที่แล้ว +6

      *cough cough* 😅🤣🤣🤣

    • @dimitrivasilev2905
      @dimitrivasilev2905 2 ปีที่แล้ว +12

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

    • @boredomindex3353
      @boredomindex3353 2 ปีที่แล้ว +1

      😂

  • @sanjaykanade966
    @sanjaykanade966 8 หลายเดือนก่อน +2

    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.

  • @crusader_
    @crusader_ 2 ปีที่แล้ว +16

    Low-key wanted this. Love free code camp

    • @BehruzbekOtayev
      @BehruzbekOtayev 2 ปีที่แล้ว +3

      What's low-key?

    • @who_s_afraid
      @who_s_afraid 2 ปีที่แล้ว +1

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

  • @chrisdesigns
    @chrisdesigns 2 ปีที่แล้ว +14

    Freecode camp is incredible. One love❤️

  • @edgyman1956
    @edgyman1956 2 ปีที่แล้ว +19

    I've been looking for this course for so long

    • @frodelius
      @frodelius 2 ปีที่แล้ว +1

      Keep looking.

    • @xoy5
      @xoy5 2 หลายเดือนก่อน

      @@frodelius same tf ?

  • @popov654
    @popov654 ปีที่แล้ว +13

    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.

  • @Loug522
    @Loug522 2 ปีที่แล้ว +31

    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
      @jackepner9984 2 ปีที่แล้ว

      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.

  • @dheerajrawat6201
    @dheerajrawat6201 2 ปีที่แล้ว +2

    This is the thing i wanted from such a long time

  • @DogeMultiverse
    @DogeMultiverse 2 ปีที่แล้ว +2

    learning thru the chrome extension discord is amazing!

  • @eitan_schwartz
    @eitan_schwartz 2 ปีที่แล้ว +2

    Waited for tutorial like this for long time

  • @benvarkey5097
    @benvarkey5097 2 ปีที่แล้ว +3

    Was waiting ❤️

  • @camilosheldonbarreto3986
    @camilosheldonbarreto3986 3 หลายเดือนก่อน +3

    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.

  • @alexbright9849
    @alexbright9849 2 ปีที่แล้ว +3

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

  • @cabiste
    @cabiste ปีที่แล้ว +7

    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
      @adityasaurabhsingh6528 ปีที่แล้ว

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

  • @OriginalCodeMaster
    @OriginalCodeMaster 2 ปีที่แล้ว +13

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

  • @ragtop63
    @ragtop63 2 ปีที่แล้ว +9

    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
      @Mohamed-m2m9o 2 ปีที่แล้ว

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

    • @popov654
      @popov654 ปีที่แล้ว

      @@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.

  • @suniljadaun5814
    @suniljadaun5814 2 ปีที่แล้ว +1

    Arrre bhartiya ... feel proud

  • @BrandonCMaximum
    @BrandonCMaximum ปีที่แล้ว +2

    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
      @dohverse1407 9 หลายเดือนก่อน +1

      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

  • @gusr7513
    @gusr7513 2 ปีที่แล้ว +33

    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.

    • @ayomideoguntuase165
      @ayomideoguntuase165 2 ปีที่แล้ว +6

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

    • @IonutSultana
      @IonutSultana 2 ปีที่แล้ว +2

      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.

  • @sesencat
    @sesencat ปีที่แล้ว +4

    This inspire me to give up on coding

    • @xoy5
      @xoy5 2 หลายเดือนก่อน

      fucking rel

    • @IVNOGOOD
      @IVNOGOOD หลายเดือนก่อน

      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

  • @md.jannatulnayem4328
    @md.jannatulnayem4328 ปีที่แล้ว +4

    Absolutely loved it. Bring us part 2 ✨

  • @tazimmahta7625
    @tazimmahta7625 2 ปีที่แล้ว +1

    Yoo
    ! what a timing ❤❤❤

  • @universecode1101
    @universecode1101 2 ปีที่แล้ว +9

    This is very cool, thanks guys 🤩

  • @RAVINDRAKUMAR-gj2nx
    @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
    @briannaharris731 ปีที่แล้ว +10

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

    • @briannaharris731
      @briannaharris731 ปีที่แล้ว +1

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

    • @terfel9476
      @terfel9476 5 หลายเดือนก่อน

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

  • @AbuFaizal
    @AbuFaizal 2 ปีที่แล้ว +2

    love it, thanks for making this video

  • @anonfourtyfive
    @anonfourtyfive 2 ปีที่แล้ว +1

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

  • @Neko-Pro-Watcher
    @Neko-Pro-Watcher 2 ปีที่แล้ว +2

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

  • @HavoJavo
    @HavoJavo 2 ปีที่แล้ว +1

    I love you guys

  • @kendralewis5883
    @kendralewis5883 5 หลายเดือนก่อน

    Must come back to this playlist 👀

  • @ugur76
    @ugur76 ปีที่แล้ว +8

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

  • @graemeStanley
    @graemeStanley ปีที่แล้ว +6

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

    • @VitorHugo-np9qs
      @VitorHugo-np9qs ปีที่แล้ว

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

  • @pastuh
    @pastuh 2 ปีที่แล้ว +6

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

  • @patrickctaylor
    @patrickctaylor 2 ปีที่แล้ว +1

    Thanks for the tutorial!

  • @CodeAndSuccess
    @CodeAndSuccess ปีที่แล้ว +2

    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?

  • @jayarcher3052
    @jayarcher3052 ปีที่แล้ว +1

    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.

    • @nitinnagar4863
      @nitinnagar4863 ปีที่แล้ว +1

      you saved me

    • @kh0lis
      @kh0lis ปีที่แล้ว

      but I don't see "URLSearchParams" in console tab

  • @Praveenkumar-gv2qu
    @Praveenkumar-gv2qu 2 ปีที่แล้ว +7

    Awesome ❤️

  • @nocopyrightgameplaystockvi231
    @nocopyrightgameplaystockvi231 2 ปีที่แล้ว +4

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

  • @viraatkumar8980
    @viraatkumar8980 ปีที่แล้ว +4

    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

  • @pranich
    @pranich ปีที่แล้ว

    Best tutorial. Thank you!

  • @kgarun
    @kgarun 2 ปีที่แล้ว +1

    Great tutorial. Thanks!

  • @gdp60b40
    @gdp60b40 2 ปีที่แล้ว +1

    This is just amazing

    • @frodelius
      @frodelius 2 ปีที่แล้ว +1

      Was it too good to be true after all?

  • @alperkaya8919
    @alperkaya8919 2 ปีที่แล้ว +2

    13:19 it's not going to include &index=2 part because it's not part of v parameter!

  • @abdul_qadir7780
    @abdul_qadir7780 2 ปีที่แล้ว

    Woow i love the content. 😍

  • @adi01244
    @adi01244 2 ปีที่แล้ว +3

    Gonna watch da whole thing. Who is stayin with me?

  • @yannickcotten2854
    @yannickcotten2854 5 หลายเดือนก่อน

    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.

  • @TypicallyThomas
    @TypicallyThomas 2 ปีที่แล้ว +15

    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.

    • @aswanaswan6732
      @aswanaswan6732 2 ปีที่แล้ว +2

      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 .

    • @ovuokeaghwotu2389
      @ovuokeaghwotu2389 ปีที่แล้ว +1

      I agree. I tried to follow along, but a 10mins tutorial and the official docs were better at explaining what was happening.

  • @preadsy6912
    @preadsy6912 2 ปีที่แล้ว +3

    Very interesting!! This course is really exciting and modernistic

  • @shreedharpandey3319
    @shreedharpandey3319 2 ปีที่แล้ว +1

    This is gonna make me some good money.

  • @bogdannastase9720
    @bogdannastase9720 2 ปีที่แล้ว +3

    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?

    • @wriddhihazra
      @wriddhihazra 2 ปีที่แล้ว

      I'm facing the same problem here man, did you find any solution to that?

    • @franck4690
      @franck4690 ปีที่แล้ว

      @@wriddhihazra I have the same issue, did you found a solution ?

    • @franck4690
      @franck4690 ปีที่แล้ว

      Did you find a solution ?

    • @franck4690
      @franck4690 ปีที่แล้ว +5

      change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

    • @franck4690
      @franck4690 ปีที่แล้ว +1

      @@wriddhihazra addListener take a third element change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)

  • @clown2195
    @clown2195 2 ปีที่แล้ว +4

    We need lesson about creating extension for Firefox!!!!

    • @okeowoaderemi
      @okeowoaderemi 2 ปีที่แล้ว +3

      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

    • @clown2195
      @clown2195 2 ปีที่แล้ว

      ok i will check your github, thanks

  • @Gamla123
    @Gamla123 4 หลายเดือนก่อน

    Fantastic video. thank you

  • @fareedezzedeen8017
    @fareedezzedeen8017 2 ปีที่แล้ว

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

  • @JoaquinPeMM
    @JoaquinPeMM 7 หลายเดือนก่อน +1

    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?

  • @reprovedcandy
    @reprovedcandy 5 หลายเดือนก่อน

    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.

  • @edgargreene2628
    @edgargreene2628 2 ปีที่แล้ว

    thx for this amazing tutorials

  • @dota2content755
    @dota2content755 ปีที่แล้ว +3

    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
      @plainzone8356 ปีที่แล้ว

      same here

    • @atomik-code
      @atomik-code ปีที่แล้ว

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

    • @miraclemark6120
      @miraclemark6120 10 หลายเดือนก่อน

      Me 3

  • @vmendes9999
    @vmendes9999 2 ปีที่แล้ว

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

  • @shuhaozhang7332
    @shuhaozhang7332 2 ปีที่แล้ว +4

    Got the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist" background.js line 1

    • @atulya3344
      @atulya3344 ปีที่แล้ว

      did you get the resolution for it ?

    • @riyadutta2282
      @riyadutta2282 ปีที่แล้ว +1

      @@atulya3344 try adding this in background.js
      chrome.runtime.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(msg) {
      port.postMessage({counter: msg.counter+1});
      });
      });

    • @atulya3344
      @atulya3344 ปีที่แล้ว

      @@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

    • @riyadutta2282
      @riyadutta2282 ปีที่แล้ว

      @@atulya3344 can you share the code that helped you in running that... Actually I'm facing little problem.. this extension isn't working properly..

    • @atulya3344
      @atulya3344 ปีที่แล้ว +1

      @@riyadutta2282 sure, will share soon. Indeed I have not created this extension but only I picked the calling mechanism

  • @cxb2356
    @cxb2356 7 หลายเดือนก่อน +1

    Good video, but to be honest, I wouldn't call this a tutorial (at least not for beginners), as there is almost 0 details on what background and content js are for. It's more like a livecoding video, and pretty useful if you're either already familiar with the basic concepts of extension development or just a copypaste coder that has no idea what this code does.

  • @listerofsmeg
    @listerofsmeg 2 ปีที่แล้ว +2

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

  • @eab4984
    @eab4984 ปีที่แล้ว +1

    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?

  • @UrzaRage778
    @UrzaRage778 9 หลายเดือนก่อน

    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?

  • @05060024
    @05060024 2 ปีที่แล้ว +1

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

  • @amirhassan6549
    @amirhassan6549 2 ปีที่แล้ว +1

    Good tutorial

    • @frodelius
      @frodelius 2 ปีที่แล้ว +1

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

  • @alexandr8151
    @alexandr8151 ปีที่แล้ว

    Awesome!!

  • @daleplus1345
    @daleplus1345 11 หลายเดือนก่อน

    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.

  • @juhandvan
    @juhandvan 2 ปีที่แล้ว +1

    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

    • @juhandvan
      @juhandvan 2 ปีที่แล้ว

      @MD FAHIM could you please more details

  • @AsianServer
    @AsianServer 2 ปีที่แล้ว +1

    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

  • @mrrishiraj88
    @mrrishiraj88 2 ปีที่แล้ว +2

    Thanks a million

  • @joeylucas7185
    @joeylucas7185 2 ปีที่แล้ว +1

    Something I've wanted to do

  • @AntonioBrandao
    @AntonioBrandao 7 หลายเดือนก่อน +1

    The code font is a bit dark / dim

  • @AhmedBodhi
    @AhmedBodhi 2 ปีที่แล้ว +2

    ... now for Firefox? Manifest v3 isn't as privacy-hating there

  • @Norris6Chuck
    @Norris6Chuck 9 หลายเดือนก่อน

    Correct getTime arrow function:
    const getTime = t => {
    var date = new Date(0);
    date.setSeconds(t);
    return date.toISOString().substring(11, 19);
    }

  • @IndieLifeAlexAdamov
    @IndieLifeAlexAdamov 2 ปีที่แล้ว +2

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

  • @varadrane7
    @varadrane7 2 ปีที่แล้ว

    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

    • @Anaghish
      @Anaghish ปีที่แล้ว +1

      Were you able to make one?

    • @WolfxTV
      @WolfxTV ปีที่แล้ว

      ​@@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

  • @mdhossen7082
    @mdhossen7082 2 ปีที่แล้ว

    Wow,, this video is Very helpful,

  • @syntheticperson
    @syntheticperson ปีที่แล้ว +1

    Extremely enlightening. Many thanks! 🙏🏽

  • @ascourter
    @ascourter 2 ปีที่แล้ว +6

    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
      @mikevaleriano9557 2 ปีที่แล้ว +9

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

    • @popov654
      @popov654 ปีที่แล้ว

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

  • @debillion
    @debillion 2 ปีที่แล้ว +1

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

  • @kintag4459
    @kintag4459 2 ปีที่แล้ว +2

    Thank you M.r

  • @Arunnn241
    @Arunnn241 7 หลายเดือนก่อน

    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.

  • @josemontalvo5052
    @josemontalvo5052 2 ปีที่แล้ว +1

    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?

    • @shruthimohan8438
      @shruthimohan8438 ปีที่แล้ว

      hi....did you get solution to this prb?

  • @AhmedAbdRapoA
    @AhmedAbdRapoA 2 ปีที่แล้ว

    Something is missing here
    How do the extension is being updated on the flay?
    You didn't even mention that part.

  • @MICHAELMURITHI-y7y
    @MICHAELMURITHI-y7y 8 หลายเดือนก่อน

    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

  • @Elgrecos
    @Elgrecos 2 ปีที่แล้ว +2

    thanks for letting us watch you build an extension, now wheres the tutorial for beginners?

    • @qedro
      @qedro ปีที่แล้ว

      Learn the basics of JavaScript and html first before trying to learn how to build an extension.

    • @Elgrecos
      @Elgrecos ปีที่แล้ว

      @@qedro i have done now my friend, thanks. Got first job as a developer too.

    • @qedro
      @qedro ปีที่แล้ว +1

      @@Elgrecos Kudos to you then, friend :)

  • @mbdAli
    @mbdAli 2 ปีที่แล้ว

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

  • @AbhijeetBGavali
    @AbhijeetBGavali 2 ปีที่แล้ว

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

  • @dzienisz
    @dzienisz ปีที่แล้ว

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

  • @Crons-v3f
    @Crons-v3f 2 ปีที่แล้ว +1

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

  • @Newton_animation
    @Newton_animation ปีที่แล้ว

    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

  • @littlehearts7039
    @littlehearts7039 ปีที่แล้ว

    Thanks Ramen