CODE WITH ME: Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

Поделиться
HTML-код
  • Опубликовано: 20 окт 2024

Комментарии • 505

  • @Palmtreeshinobi
    @Palmtreeshinobi Год назад +23

    This was cool. Since the video was only 11 mins I figured it would be like Part 1 of 10. Pretty cool that you were able to put together an entire working chrome extension in such a short video. I’m excited to try this myself

  • @mcgruff0972
    @mcgruff0972 2 года назад +7

    Great content just wanted to point out that you mapped your list items into a tag I believe the proper way would be to not also would like get a heads up that the API was not a free id. Overall great content please keep it up.

  • @matiasfernandezbettini7422
    @matiasfernandezbettini7422 Год назад +6

    Thanks for the vid, it's really enlightening to see what a ´real´ process looks like, just showing what you do step by step with full transparency. It's a breath of fresh air in the genre of youtube programmers.

  • @duscraftphoto
    @duscraftphoto 2 года назад +37

    I dig this and I love the coding "live" nature of the video. Nice to see mistakes and bumps in the road along the way. The best way to learn how to do something right is to do it wrong first ha ha. Great video and I'll be checking out more of your content, for sure!

  • @YashSharma0605
    @YashSharma0605 2 года назад +133

    Never knew making a chrome extension could be so easy!! Great video👏

    • @13hubi13
      @13hubi13 Год назад +1

      Today you can just tell chatgpt to make you one

  • @leloupization
    @leloupization Год назад +15

    I LOVE this video. It makes me happy that we see you make mistakes and it isn't just rehersed and scripted. I like the casual tone of it. I subscribed just because of this video.

  • @kadirmemisoglu343
    @kadirmemisoglu343 11 месяцев назад +1

    when you said "This is so embarrassing, what we didn't do" I screamed at you as you sad, but not the way that you thought. It was like this "Thank youuuu, you are a real person doing coding" :)

  • @ashleylilo4481
    @ashleylilo4481 2 года назад +9

    Just started learning how to code. This seems like a fun way to make a mini project to practice!! Thank you

    • @TiffInTech
      @TiffInTech  2 года назад +3

      That’s great you are learning to code!! And yup it’s a great project to add to your portfolio 💓

    • @henryijeoma
      @henryijeoma 2 года назад

      hi ashley, are you a total beginner? also what language are you starting with?

  • @shadow_rune6178
    @shadow_rune6178 2 года назад +40

    You remind me a lot of my sister, she teaches things the same way you do. You are a really good teacher 👍
    Very good at pacing, keeping audience focused, etc. Well done.

  • @srsh12345
    @srsh12345 3 месяца назад

    Great video. I like that you focused more on creating the extension and it all clicked for me. Much better than making an overly complicated function when I'm just interested in learning the do's and don'ts on how to create Chrome Extension.

  • @getoverhere4465
    @getoverhere4465 Год назад

    This is the clearest and most informative coding vid I’ve seen in a while.

  • @ragtop63
    @ragtop63 2 года назад +20

    A few years ago I had a storage unit at a storage facility. I was waiting for escrow to close on my house so I could move all my items into my new home. About a week before closing someone broke into my storage unit and stole pretty much everything I owned. Among the items were all of my computers, servers, hard drives, TVs, audio gear, pretty much every electronic device I owned and most of my tools and most of my kitchen.
    Fast forward a bit, I filed a claim with my homeowners insurance. As part of the claim, I had to submit a detailed list of items stolen. Keep in mind, there was 25 years worth of my life in that unit, which made it nearly impossible to remember everything that was in there. So was born the dilemma.
    To solve the dilemma I turned to coding. I decided to write a Chrome extension that would look through my purchase history on various sites (Amazon, Best Buy, Walmart, etc) and pull item descriptions, purchase dates and purchase price and output them into CSV files.
    Second dilemma: I'm not a developer. I'm a photographer. I had no experience with Chrome extensions aside from adding them to my browser from the marketplace and I had zero knowledge of pure Javascript. So off I went into my endeavor. It took me about 2 weeks to learn just enough JS and Chrome API to get my head around what I needed to do. It took me another 2 weeks to build the extension and test it.
    Very long story short, it worked! I was able to get all of the information I needed from the sites I had any purchase history on and submit it to the insurance company.
    All in all, I lost over $80,000 USD in items that I was able to find in my purchase history alone, WAY above my claim limit. However, I gained a pretty good skill that I still use to this day for various projects and problems I feel can be solved through automation.
    I wonder if this makes a software developer now?

    • @compton8301
      @compton8301 2 года назад +3

      Wow, that's amazing.
      Yes, it does! 👌🏿

    • @pallavitiwari7243
      @pallavitiwari7243 8 месяцев назад +1

      Wow! that's great for a non-developer. I would really like to see how you made it if the code is somewhere public. I would like to try that and add things on top of it for other purposes like job applications I applied for etc. Please do share

    • @DCryptologist
      @DCryptologist 4 месяца назад

      Great job!

  • @mohammedansari818
    @mohammedansari818 Год назад

    Yours was the first video that popped up when i searched for 'how to create chrome extension'. I learnt how, and I enjoyed it. Your tip about RapidAPI was Awesome. You are doing great. Pls keep posting. Subscribed! :)

  • @Fachher
    @Fachher Год назад +2

    Did you know that you only have to type li#concert and then hit tab. This will autocomplete this to .

  • @izael2168
    @izael2168 2 года назад

    I always wanted to create an extension, after I learned javascript, I never created it, your video encourages me to create. I will create something that helps me during the day :)

  • @Santino11238
    @Santino11238 Год назад

    As a new Full Stack Developer this was super cool...

  • @rickiodious
    @rickiodious Год назад +1

    The video is short, to the point and just what I was looking for.. Thanks :)

  • @rex7486
    @rex7486 Год назад +1

    I didn't know about the ! + Enter, so thank you for considering learners of all levels 🙂

  • @jennyhong189
    @jennyhong189 4 месяца назад

    This really helps a lot for the first day of my extension development!!! Thanks🎉

  • @garethjax
    @garethjax Год назад

    Thanks, it was an excelent primer and today (with some help of gpt-35 and 4) i've developed my first SEO extension for chrome!

  • @pinkie0709
    @pinkie0709 Год назад +1

    New to coding and this makes me so happy! Never knew it could be so simple! Thank you!

  • @nathelenwanjiru1577
    @nathelenwanjiru1577 2 года назад +9

    This is soooooo amazing Tiffany!!! I enjoyed so much of this. PLS if you could, make it even longer would love to watch this. Like mentioned, added value indeed!

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @nikaellas.6814
    @nikaellas.6814 2 года назад

    you are that one youtuber that once i saw in the feed i would never skip 😂 always worth it to watch your videos!

    • @TiffInTech
      @TiffInTech  2 года назад +1

      This made my day 🥹🥹💓💓

    • @nikaellas.6814
      @nikaellas.6814 2 года назад

      @@TiffInTech so did you! 🤍🤍 thank you for your great work

  • @kekooner7087
    @kekooner7087 2 года назад

    Wow, I didn't know how to do it. Now I realize it's really easy.
    Thank you so much, even I'm improving my English.

  • @gunarspakalnietis7354
    @gunarspakalnietis7354 2 года назад

    Do it! Build this extension. Thanks this was refreshing to watch.

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @digitaldupo
    @digitaldupo Год назад +4

    This is exactly what I needed. A lot of tutorials already went ahead and dived into a complicated application to implement into your extension.
    I was looking for someone to implement it fast and quick. Thanks for this.

  • @Slayvantz
    @Slayvantz 2 года назад +2

    We need more on chrome extensions! Great video!

  • @AdonisAmarante
    @AdonisAmarante 2 года назад +10

    Didn't know it was that simple to start a chrome extension, so cool. Thank you for this video!

  • @zubaermahmud5278
    @zubaermahmud5278 Год назад +1

    I really enjoyed building this chrome extension with you. Thank you so much for always uploading such educational and informative videos!

  • @allenbro9900
    @allenbro9900 2 месяца назад

    yo that was a really good video straight to the point no filler

  • @rxlvnd3397
    @rxlvnd3397 11 месяцев назад

    Thank you Tiff! This is exactly what i need to get started

  • @marcoolinho
    @marcoolinho 2 года назад

    Very original intro. Anti-intro but being completely comfortable with it. We are only human after all. Well done!

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @Pacolad
    @Pacolad Год назад

    This is so digestible, thank you

  • @0xQuez
    @0xQuez 8 месяцев назад

    exactly what I needed to get started. thank you fam!

  • @germantoenglish898
    @germantoenglish898 Год назад +2

    A simple, clear, and concise tutorial, thank you! 😃👍

  • @guilhermetorres3000
    @guilhermetorres3000 11 месяцев назад

    I love the video! I'm making my Final Paper at school and wanna know how to handle the files and publish it, it very fluid and well edited! I'm a junior programmer in Brasil, dreaming to be a senior full stack one day

  • @AlfonsoNeilJimenezCasallas
    @AlfonsoNeilJimenezCasallas 2 года назад

    the video which Chrome's fans were expecting!

  • @Moses4694
    @Moses4694 Год назад

    This video help me to see how easy and useful programming can be thank you. I guess the next step would be to be able to purchase tickts for any of the groups. Thanks again.

  • @FuzzyQue.
    @FuzzyQue. 4 месяца назад

    For people who are confused on how she got where she started in the video:
    1 Create a new folder and name it something.
    2 Click "Open folder" inside of the dropdown of "NO FOLDER OPENED" in the explorer.
    3 Open the folder you created.
    4 Right click the folder and select new file and name it "indext.html"
    (you can open the explorer inside of the "view" dropdown menu if you dont see it)

  • @Mickey_Raus
    @Mickey_Raus 10 месяцев назад

    There is her tutorial on the left side on this guy. She reads and teach us awesome !

  • @gugildak12
    @gugildak12 2 года назад

    lol. you and we could make a chrome extension in 10 minutes. amazing!

  • @travisSimon365
    @travisSimon365 2 года назад +1

    Super awesome that you show 'mistakes', even though I wouldn't even really call them that. I hate tutorials that make it seem like the developer writes pages of error-free code effortlessly, as it provides an unrealistic view of real-world development.
    Also, please surround your async calls in try/catch blocks ;-)

  • @rafaeldacosta8581
    @rafaeldacosta8581 2 года назад

    1:40 these kinds tips show value to study with video content - i've learn a lot of tricks or how to in Linux watching videos. I believe video's are like you are learning in-class

  • @tamilarasanpandiyan898
    @tamilarasanpandiyan898 7 месяцев назад

    just got the right way ,Great work Tiff

  • @Glow0110
    @Glow0110 Год назад

    Good stuff! Would love to see a follow video on how to style it, how to make a paid version of the extension, etc.

  • @adriansrfr
    @adriansrfr 2 года назад

    Ok, that was really fun! I think the length is perfect. Break it up in sections, and keep it up. Totally subscribed!

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @levrisfirst3291
    @levrisfirst3291 2 года назад

    I honestly didn 't understand anything, but the author is very beautiful ! I looked to the end, lifted my mood!

  • @shadowslayer2248
    @shadowslayer2248 7 месяцев назад

    Wait! That's it??? That is really cool especially since the possibilities are endless. Also would like to know how we could publish our extension in chrome web store. Thank you for this short tut!

  • @Technique1995
    @Technique1995 Год назад

    Thank you Tiff. Please make more video tutorials of Chorme Extensions.

  • @online12plus
    @online12plus Год назад

    that's cool it was good to see that other people make mistakes too

  • @kelly5247
    @kelly5247 2 года назад

    WOW. Nice utility! I'll be exploring it. THANKS

  • @mikespidle3360
    @mikespidle3360 2 года назад +1

    SUBBED! Awesome video! I would like to see more of it built out too

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @itskittyme
    @itskittyme Год назад

    I didn't know the "!" trick, thanks!

  • @bababooey6969
    @bababooey6969 Год назад

    Thank you !! That was so simple with a great explanation!! Bless you!

  • @theinterworks
    @theinterworks Год назад

    It would be cool to see this fleshed out. I just started making an extension and want to see what other people are making and their process.

  • @CarlosPerezChavez
    @CarlosPerezChavez 2 года назад

    Amazing! I tried to make an extension in 2011 but the documentation was so obtuse that I abandoned my project.
    Thank you for making this video.

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @mohammedsalmanali01
    @mohammedsalmanali01 Год назад

    Great video Tiffany! Short but straight to the point.

  • @avimehta5819
    @avimehta5819 Год назад

    This is sick! Idk it was gonna be that easy

  • @karlroth7082
    @karlroth7082 2 года назад +6

    Love this, Tiffany! Unique utilities that we can all use! Added value !

  • @StephenDiJoseph
    @StephenDiJoseph Год назад

    Thank you for this training! I would like to learn more about your software.

  • @daniellel4785
    @daniellel4785 Год назад

    I absolutely love this and would absolutely love to go further in depth with what we can do with extensions.

  • @johnthuo934
    @johnthuo934 2 года назад +1

    Great Video, as always 👏👏! We should definitely continue building it up. Can't Wait!

    • @TiffInTech
      @TiffInTech  2 года назад +1

      okay deal!! Github is linked too :)

  • @christeder
    @christeder Год назад

    Seems like something fun. Been wondering but haven't dive into Extension side. Thank you for sharing

  • @edu235edu
    @edu235edu 2 года назад

    L7 is coming to the town!! great vid thanks

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . . .

  • @HadiLePanda
    @HadiLePanda Год назад

    Thanks for the tutorial, I encourage you to do more :)

  • @hamunaptraabrahan1351
    @hamunaptraabrahan1351 2 года назад

    Thanks miss for giving me about building chrome extensions and coding I found interesting under the environment it was developed.🥰✌

  • @robimuhammad95
    @robimuhammad95 2 года назад

    Thank you, this is what i always search for in a long time 😀

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @rifaeerasheedh5166
    @rifaeerasheedh5166 2 года назад

    Love the video, tiff ❤️. Keep up the good work. Love from Maldives 🇲🇻

  • @DigitGarage
    @DigitGarage Год назад

    THANK YOU!! You are awesome 😁

  • @leifericson1658
    @leifericson1658 2 года назад

    You are very good at this

  • @mauriciokenny2674
    @mauriciokenny2674 2 года назад

    Genial!! Excelente ejemplo de extensión para Chrome!... Thank you a lot!!!

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @imjojo9265
    @imjojo9265 2 года назад

    1:30 i didn’t know. i’m in my second semester and u j changed my life 😭😭

    • @TiffInTech
      @TiffInTech  2 года назад

      Haha I’m so happy to hear!!

  • @TheBeeman410
    @TheBeeman410 2 года назад

    Is it odd that I understood everything you were doing, but I don’t know how to do it myself…
    Granted I’m new to coding..
    I love this type of content though. Thanks!🍻

  • @cuttingcoffee
    @cuttingcoffee 2 года назад

    ok how many people here think background is more whitish. Overall a great leaning video thanks 🙏🏻

  • @adwordsandinternetmarketin4024
    @adwordsandinternetmarketin4024 Год назад +1

    What software are you using at the start when creating html file? Is there also a free version for the chromebook or only windows and apple

  • @ptit-monsieur
    @ptit-monsieur 2 года назад

    You were just a random youtube recommendation and yet you have the exact same 2 screen setup than me with the standing desk converter and a laptop just laying there on the left of the desk lol

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @Djolewatchtastife
    @Djolewatchtastife 2 года назад

    Awesome video, awesome content and information, salutations from Montreal!

  • @BrianPrisbe
    @BrianPrisbe 2 года назад

    This looks like a fun little project!

  • @moha8068
    @moha8068 2 года назад +1

    If you could explain in details for beginners it would be cool to learn from u. Love ur contents keep going!

    • @julesari_.
      @julesari_. 2 года назад

      👆send a direct message for support and guidance . .

  • @jamesross5120
    @jamesross5120 2 года назад

    wow not as hard as i thought it was be, so cool thanks for sharing.

  • @clunis9472
    @clunis9472 Год назад

    I'm glad I'm not the only one who defines functions and forgets to call them LOL

  • @chstappert
    @chstappert 2 года назад

    Didn't know it was that easy. Thanks!

  • @leonardliu3256
    @leonardliu3256 Год назад +1

    it's simply not fair a human being could be so smart so talented so pretty and yet a good teacher...

    • @xWingzTV
      @xWingzTV 11 месяцев назад

      become better…

  • @somefin3322
    @somefin3322 2 года назад

    The vlog style of these videos is definitely unique in a fun way. Keep it up.

  • @ハロルド-r1t
    @ハロルド-r1t 2 года назад

    Thank you for this tutorial. love your nail color btw💚

  • @sumant2000
    @sumant2000 10 месяцев назад +1

    🌟 Absolutely loved this tutorial, Tiff! Your fun and engaging approach made learning to build a Chrome extension feel so accessible and doable. Before watching this, I thought it was a monumental task, but now I'm feeling confident and excited to dive in. Thanks for demystifying the process with such clarity and enthusiasm! 💻✨ #CodingMadeSimple

  • @starmorph
    @starmorph 9 месяцев назад

    Great video thank you - did not know about RapidAPI

  • @aflous
    @aflous 2 года назад

    Amazing stuff! This might give me a good reason to finally start wrinting some JS soon!

  • @Hacking-NASSA-with-HTML
    @Hacking-NASSA-with-HTML 2 года назад

    Wow! So cool vid ❤👍 I'm impressed!

  • @KevinWilliams87
    @KevinWilliams87 Год назад

    Nailed it! Nice job

  • @AndersonRibeiro_
    @AndersonRibeiro_ 7 месяцев назад

    great video, thanks for sharing with us!

  • @MrCourtz89
    @MrCourtz89 Год назад

    Dope video. Nice nail colour too 😂👊🏾

  • @arashforghanbin8794
    @arashforghanbin8794 11 месяцев назад

    Thank you for your lovely video. How can i make chrome extension that can replace the welcome screen of chrome?

  • @AgitNaeta
    @AgitNaeta 7 дней назад

    Easy to understand

  • @Benexdrake
    @Benexdrake 11 месяцев назад

    Nice Tutorial, with an Extension, Web Scraping is so much easier.
    Crunchyroll blocks Web Scraping, but now, i can easy get the Data now.
    Now building a minimal API and send the Data from Browser to the API

  • @isaacmaqueen3845
    @isaacmaqueen3845 2 года назад

    That was beautiful and simple💪🚀

  • @mattlarsen
    @mattlarsen 2 года назад

    Brilliant. I didn't realize Chrome extensions were built off JavaScript.
    Question: what is necessary in the manifest? Does Chrome look for specific keys? How minimal could the manifest ultimately be?
    Thanks for your work!

  • @teeI0ck
    @teeI0ck Год назад

    do more videos like these. thank you in advance

  • @maxengio
    @maxengio 2 года назад

    Your videos are a good way to learn English. Well, at the same time, JS may be needed somewhere.

  • @anthonyudeagbala8558
    @anthonyudeagbala8558 Год назад

    It's the intro for me 😂 Nice video