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

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

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

  • @Palmtreeshinobi
    @Palmtreeshinobi ปีที่แล้ว +30

    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

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

      Glad you enjoyed it!

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

    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.

  • @kadirmemisoglu343
    @kadirmemisoglu343 ปีที่แล้ว +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" :)

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

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

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

      Today you can just tell chatgpt to make you one

  • @matiasfernandezbettini7422
    @matiasfernandezbettini7422 2 ปีที่แล้ว +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.

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

      Thank you so much!

  • @LifeisbetterwithaMalinois
    @LifeisbetterwithaMalinois 6 วันที่ผ่านมา

    This is the best tutorial, all the others just show how to create something you cannot "productionize". Thank you

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

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

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

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

    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.

  • @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! :)

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

    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 10 หลายเดือนก่อน +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 6 หลายเดือนก่อน

      Great job!

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

  • @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 :)

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

      Glad I could help!

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

    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.

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

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

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

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

      so happy to hear!

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

    We need more on chrome extensions! Great video!

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

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

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

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

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

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

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

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

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

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

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

    Thanks for the simple demo! Cheers!

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

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

    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.

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

      Thank you so much!!

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

    Nice to see a fellow Torontonian

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

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

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

      Glad you enjoyed it!

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

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

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

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

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

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

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

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

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

    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.

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

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

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

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

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

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

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

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

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

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

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

      Thank you !! I appreciate that

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

      JJGG

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

    just got the right way ,Great work Tiff

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

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

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

    the video which Chrome's fans were expecting!

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

    3:20
    When I click sign up all that happens is a long yellow rectangle appears with a long string of dark golden code over top of it that covers the white on either side as well.
    Literally will not let me sign up.

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

    You are very good at this

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

    This was amazing ! Thank you!

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

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

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

    This is so digestible, thank you

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

    THANK YOU!! You are awesome 😁

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

    This is sick! Idk it was gonna be that easy

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

    Nailed it! Nice job

  • @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 :)

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

    L7 is coming to the town!! great vid thanks

    • @julesari_.
      @julesari_. 2 ปีที่แล้ว

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

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

    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

  • @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 ;-)

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

  • @ADtheMaker
    @ADtheMaker 13 วันที่ผ่านมา

    Amazing video! this was actually pretty useful, thank you!!!

    • @TiffInTech
      @TiffInTech  13 วันที่ผ่านมา

      I'm so glad it was helpful! 🙂

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

    Great work !

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

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

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

    Great video Tiffany! Short but straight to the point.

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

    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!

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

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

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

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

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

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

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

    This looks like a fun little project!

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

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

  • @FuzzyQue.
    @FuzzyQue. 6 หลายเดือนก่อน

    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)

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

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

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

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

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

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

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

    great video Tiff, :)

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

    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.

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

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

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

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

      Thank you so much!!

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

    It's the intro for me 😂 Nice video

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

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

    Didn't know it was that easy. Thanks!

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

    It was that easy!!! Wooaahh!

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

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

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

    great video, thanks for sharing with us!

  • @Hacking-NASSA-with-HTML
    @Hacking-NASSA-with-HTML 2 ปีที่แล้ว

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

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

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

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

    Dope video. Nice nail colour too 😂👊🏾

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

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

    A nice and quick tutorial. Love it!

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

    Soo cool 😎 awesome tutorial 🤠

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

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

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

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

    Easy to understand

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

    Love you and your code 😚

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

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

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

    This is useful, I wrote a Chrome extension after watching this, but I have a couple of questions : (1) How does one publish, and (2) for around a minute after about 7:20 you're doing something with 'map' that I can't follow, is there somewhere I can read more about that? I'm, uh, self taught at javaScript and I think there's something there that I have not picked up on.

    • @julesari_.
      @julesari_. 2 ปีที่แล้ว

      👆send a direct message for support and guidance . .

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

    very useful Tiff..Thx

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

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

    Great video thank you - did not know about RapidAPI

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

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

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

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

    Amazing, thank you!

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

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

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

      Glad it was helpful!