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

  Рет қаралды 345,323

Tiff In Tech

Tiff In Tech

Жыл бұрын

Hi friends! In this video we are going to be coding a chrome extension together. Although I have been a software developer for 5+ years I have never built a chrome extension and always wanted to. This is a fun and simple project you can do. The objective of this video is to show you how to build a chrome extension .The content of the chrome extension itself can be updated and built onto as much as you would like!
Github: github.com/TiffinTech/concert...
❤️ Subscribe for more videos using this link kzfaq.info?su...
Business inquiries: info@thisistiffin.com
Instagram: / tiffintech
Tiktok: www.tiktok.com/@tiffintech?la...
SIGNUP FOR MY NEW MONTHLY NEWSLETTER at www.tiffintech.co
✅ Exclusive discounts
✅ Tips from people in the STEM world
✅ Stay up to date with the latest tech events and news
✅ And so much more!
// My Story
I am currently a software developer who once modeled and thought I wanted to pursue a career in the fashion industry. While I was modeling in Hong Kong, I eventually felt the desire to further my education. I decided to depart the modeling world and move back to Canada, knowing that could be the end of my modeling opportunities. I attended Ryerson University for GCM (Graphic Communications Management), as I thought I might still work in the fashion industry in another capacity. It was in my last year of university, I was introduced to a very basic coding course. I instantly fell in love. From there I knew I wanted to pursue software development but didn't have a clue where to start. I didn't want to go back to university as I just completed a four-year degree. I decided to enroll in a 10-week intensive coding Bootcamp. From there I started working at a small startup learning and growing my technical and soft skills. I then transitioned to a larger company where I am a software developer and technical consultant today.
#CodingTutorial #tiffintech

Пікірлер: 495
@duscraftphoto
@duscraftphoto Жыл бұрын
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!
@Palmtreeshinobi
@Palmtreeshinobi Жыл бұрын
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 Жыл бұрын
Glad you enjoyed it!
@ragtop63
@ragtop63 Жыл бұрын
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 Жыл бұрын
Wow, that's amazing. Yes, it does! 👌🏿
@pallavitiwari7243
@pallavitiwari7243 5 ай бұрын
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 Ай бұрын
Great job!
@srsh12345
@srsh12345 21 күн бұрын
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 Жыл бұрын
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_. Жыл бұрын
👆send a direct message for support and guidance . .
@matiasfernandezbettini7422
@matiasfernandezbettini7422 Жыл бұрын
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 Жыл бұрын
Thank you so much!
@mohammedansari818
@mohammedansari818 11 ай бұрын
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! :)
@YashSharma0605
@YashSharma0605 Жыл бұрын
Never knew making a chrome extension could be so easy!! Great video👏
@13hubi13
@13hubi13 Жыл бұрын
Today you can just tell chatgpt to make you one
@leloupization
@leloupization Жыл бұрын
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.
@a-girl-has-no-name
@a-girl-has-no-name Жыл бұрын
ikr! i hit subscribe immediately
@digitaldupo
@digitaldupo Жыл бұрын
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.
@getoverhere4465
@getoverhere4465 9 ай бұрын
This is the clearest and most informative coding vid I’ve seen in a while.
@mcgruff0972
@mcgruff0972 Жыл бұрын
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.
@zubaermahmud5278
@zubaermahmud5278 Жыл бұрын
I really enjoyed building this chrome extension with you. Thank you so much for always uploading such educational and informative videos!
@TiffInTech
@TiffInTech Жыл бұрын
so happy to hear!
@AdonisAmarante
@AdonisAmarante Жыл бұрын
Didn't know it was that simple to start a chrome extension, so cool. Thank you for this video!
@karlroth7082
@karlroth7082 Жыл бұрын
Love this, Tiffany! Unique utilities that we can all use! Added value !
@TiffInTech
@TiffInTech Жыл бұрын
Absolutely!!
@izael2168
@izael2168 Жыл бұрын
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 Жыл бұрын
Glad I could help!
@pinkie0709
@pinkie0709 Жыл бұрын
New to coding and this makes me so happy! Never knew it could be so simple! Thank you!
@jennyhong189
@jennyhong189 Ай бұрын
This really helps a lot for the first day of my extension development!!! Thanks🎉
@ashleylilo4481
@ashleylilo4481 Жыл бұрын
Just started learning how to code. This seems like a fun way to make a mini project to practice!! Thank you
@TiffInTech
@TiffInTech Жыл бұрын
That’s great you are learning to code!! And yup it’s a great project to add to your portfolio 💓
@henryijeoma
@henryijeoma Жыл бұрын
hi ashley, are you a total beginner? also what language are you starting with?
@daniellel4785
@daniellel4785 Жыл бұрын
I absolutely love this and would absolutely love to go further in depth with what we can do with extensions.
@rickiodious
@rickiodious Жыл бұрын
The video is short, to the point and just what I was looking for.. Thanks :)
@nikaellas.6814
@nikaellas.6814 Жыл бұрын
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 Жыл бұрын
This made my day 🥹🥹💓💓
@nikaellas.6814
@nikaellas.6814 Жыл бұрын
@@TiffInTech so did you! 🤍🤍 thank you for your great work
@Alex-rl6ww
@Alex-rl6ww Жыл бұрын
That is so cool ! I'm really inspired by your content, your background and everything...your personality is really endearing too! Great job !!
@TiffInTech
@TiffInTech Жыл бұрын
Thank you so much!! That is so great to hear!
@mohammedsalmanali01
@mohammedsalmanali01 Жыл бұрын
Great video Tiffany! Short but straight to the point.
@kekooner7087
@kekooner7087 Жыл бұрын
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.
@johnthuo934
@johnthuo934 Жыл бұрын
Great Video, as always 👏👏! We should definitely continue building it up. Can't Wait!
@TiffInTech
@TiffInTech Жыл бұрын
okay deal!! Github is linked too :)
@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!
@marcoolinho
@marcoolinho Жыл бұрын
Very original intro. Anti-intro but being completely comfortable with it. We are only human after all. Well done!
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@Slayvantz
@Slayvantz Жыл бұрын
We need more on chrome extensions! Great video!
@rxlvnd3397
@rxlvnd3397 8 ай бұрын
Thank you Tiff! This is exactly what i need to get started
@bababooey6969
@bababooey6969 Жыл бұрын
Thank you !! That was so simple with a great explanation!! Bless you!
@adriansrfr
@adriansrfr Жыл бұрын
Ok, that was really fun! I think the length is perfect. Break it up in sections, and keep it up. Totally subscribed!
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@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.
@carlitosar5155
@carlitosar5155 Жыл бұрын
A nice and quick tutorial. Love it!
@rifaeerasheedh5166
@rifaeerasheedh5166 Жыл бұрын
Love the video, tiff ❤️. Keep up the good work. Love from Maldives 🇲🇻
@TiffInTech
@TiffInTech Жыл бұрын
Thank you so much!!
@shadowslayer2248
@shadowslayer2248 4 ай бұрын
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!
@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.
@0xQuez
@0xQuez 5 ай бұрын
exactly what I needed to get started. thank you fam!
@shadow_rune6178
@shadow_rune6178 Жыл бұрын
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 Жыл бұрын
Thank you so much!!
@guilhermetorres3000
@guilhermetorres3000 8 ай бұрын
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
@christeder
@christeder Жыл бұрын
Seems like something fun. Been wondering but haven't dive into Extension side. Thank you for sharing
@TiffInTech
@TiffInTech Жыл бұрын
Glad to hear!
@kadirmemisoglu343
@kadirmemisoglu343 8 ай бұрын
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" :)
@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.
@aflous
@aflous Жыл бұрын
Amazing stuff! This might give me a good reason to finally start wrinting some JS soon!
@RogerioOliveira-iq4fv
@RogerioOliveira-iq4fv Жыл бұрын
In general, the same principle can be applied to create extensions for Firefox. Congrats, great content!
@germantoenglish898
@germantoenglish898 Жыл бұрын
A simple, clear, and concise tutorial, thank you! 😃👍
@TiffInTech
@TiffInTech Жыл бұрын
Glad you enjoyed it!
@rex7486
@rex7486 Жыл бұрын
I didn't know about the ! + Enter, so thank you for considering learners of all levels 🙂
@kelly5247
@kelly5247 Жыл бұрын
WOW. Nice utility! I'll be exploring it. THANKS
@avimehta5819
@avimehta5819 10 ай бұрын
This is sick! Idk it was gonna be that easy
@gunarspakalnietis7354
@gunarspakalnietis7354 Жыл бұрын
Do it! Build this extension. Thanks this was refreshing to watch.
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@gugildak12
@gugildak12 Жыл бұрын
lol. you and we could make a chrome extension in 10 minutes. amazing!
@DevlogBill
@DevlogBill Жыл бұрын
Thanks Tiff, I didn’t know that creating an API could be that simple. I always imagined it to be much more complicated than this. After watching your video here it gave me the courage to go to the rapidApi site and see what API I may like to try out. I wonder if I could find an API for the Yankees since I’m in NYC? Appreciate you sharing this.
@jamesross5120
@jamesross5120 Жыл бұрын
wow not as hard as i thought it was be, so cool thanks for sharing.
@StephenDiJoseph
@StephenDiJoseph 11 ай бұрын
Thank you for this training! I would like to learn more about your software.
@me_lvin7068
@me_lvin7068 Жыл бұрын
Straightforward video! I love it! Instead of just a pulldown list popping out when you click the extension, how do you instead open a new page. Then, there's an image and some text on the page. I'm actually trying to create a block-site extension. Like say you want to stop social media websites from opening during your working hours. Then there's a toggle when you want it enabled or not, and a timer would be great too. I've seen similar extensions like this. But I just want to create something I can call my own. Hopefully, you'll notice this. Thanks.
@Santino11238
@Santino11238 Жыл бұрын
As a new Full Stack Developer this was super cool...
@travisSimon365
@travisSimon365 Жыл бұрын
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 ;-)
@hamunaptraabrahan1351
@hamunaptraabrahan1351 Жыл бұрын
Thanks miss for giving me about building chrome extensions and coding I found interesting under the environment it was developed.🥰✌
@TiffInTech
@TiffInTech Жыл бұрын
Glad it was helpful!
@souryasensei
@souryasensei Жыл бұрын
a very fun and cozy tutorial thanks Tiff.😊 I made one that helps me to have a limit time for youtube and other social medas of 1h a day it was fun to make
@TiffInTech
@TiffInTech Жыл бұрын
That is an awesome idea! Love that you did this!!
@AndersonRibeiro_
@AndersonRibeiro_ 4 ай бұрын
great video, thanks for sharing with us!
@tamilarasanpandiyan898
@tamilarasanpandiyan898 4 ай бұрын
just got the right way ,Great work Tiff
@ayo_de_bag
@ayo_de_bag Жыл бұрын
Straight to the point. Thank you ✨✨
@somefin3322
@somefin3322 Жыл бұрын
The vlog style of these videos is definitely unique in a fun way. Keep it up.
@TiffInTech
@TiffInTech Жыл бұрын
Thank you !! I appreciate that
@chibimentor
@chibimentor Жыл бұрын
JJGG
@HadiLePanda
@HadiLePanda Жыл бұрын
Thanks for the tutorial, I encourage you to do more :)
@mikespidle3360
@mikespidle3360 Жыл бұрын
SUBBED! Awesome video! I would like to see more of it built out too
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@CarlosPerezChavez
@CarlosPerezChavez Жыл бұрын
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_. Жыл бұрын
👆send a direct message for support and guidance . .
@Technique1995
@Technique1995 Жыл бұрын
Thank you Tiff. Please make more video tutorials of Chorme Extensions.
@sumant2000
@sumant2000 7 ай бұрын
🌟 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
@Djolewatchtastife
@Djolewatchtastife Жыл бұрын
Awesome video, awesome content and information, salutations from Montreal!
@user-mv4iw5pm5w
@user-mv4iw5pm5w Жыл бұрын
Thank you for this tutorial. love your nail color btw💚
@TiffInTech
@TiffInTech Жыл бұрын
Oh thank you!
@onlynatural7186
@onlynatural7186 Жыл бұрын
Thanks a lot for sharing this video, very useful 😊
@BrianPrisbe
@BrianPrisbe Жыл бұрын
This looks like a fun little project!
@itskittyme
@itskittyme Жыл бұрын
I didn't know the "!" trick, thanks!
@AlfonsoNeilJimenezCasallas
@AlfonsoNeilJimenezCasallas Жыл бұрын
the video which Chrome's fans were expecting!
@isaacmaqueen3845
@isaacmaqueen3845 Жыл бұрын
That was beautiful and simple💪🚀
@robimuhammad95
@robimuhammad95 Жыл бұрын
Thank you, this is what i always search for in a long time 😀
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@leifericson1658
@leifericson1658 Жыл бұрын
You are very good at this
@DigitGarage
@DigitGarage Жыл бұрын
THANK YOU!! You are awesome 😁
@smugabi
@smugabi 7 ай бұрын
love you thanks for doing it easy
@whyevenbeborn4574
@whyevenbeborn4574 Жыл бұрын
Such a great helpful video! please do more like this
@TiffInTech
@TiffInTech Жыл бұрын
So happy to hear! If you have any other suggestions let me know!
@Pacolad
@Pacolad Жыл бұрын
This is so digestible, thank you
@pascalm9214
@pascalm9214 Жыл бұрын
Great work !
@Hacking-NASSA-with-HTML
@Hacking-NASSA-with-HTML Жыл бұрын
Wow! So cool vid ❤👍 I'm impressed!
@adwordsandinternetmarketin4024
@adwordsandinternetmarketin4024 Жыл бұрын
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
@edmarktuazon1327
@edmarktuazon1327 Жыл бұрын
Woah, very swell! Thanks for sharing :)
@kingsls4549
@kingsls4549 Жыл бұрын
Love you and your code 😚
@arashforghanbin8794
@arashforghanbin8794 8 ай бұрын
Thank you for your lovely video. How can i make chrome extension that can replace the welcome screen of chrome?
@salekinimran7590
@salekinimran7590 Жыл бұрын
cool Tiffany! you should do more of this snippets often!!!
@TiffInTech
@TiffInTech Жыл бұрын
Deal! Let me know if you have anything specific you’d like :)
@didiernsengiyumva3701
@didiernsengiyumva3701 Жыл бұрын
Amazing, thank you!
@jamzydarth7746
@jamzydarth7746 3 ай бұрын
This was very helpfull thank you
@edu235edu
@edu235edu Жыл бұрын
L7 is coming to the town!! great vid thanks
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . . .
@mauriciokenny2674
@mauriciokenny2674 Жыл бұрын
Genial!! Excelente ejemplo de extensión para Chrome!... Thank you a lot!!!
@julesari_.
@julesari_. Жыл бұрын
👆send a direct message for support and guidance . .
@monsieur9520
@monsieur9520 Жыл бұрын
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_. Жыл бұрын
👆send a direct message for support and guidance . .
@shamelessvideoeditor3839
@shamelessvideoeditor3839 Жыл бұрын
great video Tiff, :)
@TheBeeman410
@TheBeeman410 Жыл бұрын
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!🍻
@rafaeldacosta8581
@rafaeldacosta8581 Жыл бұрын
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
@ViniciusOL
@ViniciusOL Жыл бұрын
Amazing video! Thank you very much!
@thomasedwardking7286
@thomasedwardking7286 Жыл бұрын
Soo cool 😎 awesome tutorial 🤠
@isaisa1678
@isaisa1678 7 ай бұрын
There is her tutorial on the left side on this guy. She reads and teach us awesome !
@mattlarsen
@mattlarsen Жыл бұрын
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!
Automating My Life with Python: The Ultimate Guide | Code With Me
11:26
Full Tutorial | Building a Chrome Extension in Typescript and Vite
32:58
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 52 МЛН
Gym belt !! 😂😂  @kauermtt
00:10
Tibo InShape
Рет қаралды 9 МЛН
Happy 4th of July 😂
00:12
Alyssa's Ways
Рет қаралды 65 МЛН
Mom's Unique Approach to Teaching Kids Hygiene #shorts
00:16
Fabiosa Stories
Рет қаралды 18 МЛН
5 SaaS Ideas You Can Build as a Solo Founder
13:30
Simon Høiberg
Рет қаралды 378 М.
Coding a Chrome Extension with Claude-3.5-Sonnet (Part-1)
19:30
Eli Colussi
Рет қаралды 2,8 М.
The Most Legendary Programmers Of All Time
11:49
Aaron Jack
Рет қаралды 537 М.
The perfect imperfection of Google's Material You
15:47
David Imel
Рет қаралды 416 М.
3 PYTHON AUTOMATION PROJECTS FOR BEGINNERS
17:00
Internet Made Coder
Рет қаралды 1,6 МЛН
The Easiest Way to Build Websites
10:56
Sajid
Рет қаралды 389 М.
200 Social Media Posts In 10 Minutes Using ChatGPT & Canva
10:18
Modern Millie
Рет қаралды 632 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 52 МЛН