CODE WITH ME: Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?
Vložit
- čas přidán 27. 08. 2024
- 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/Tif...
❤️ Subscribe for more videos using this link www.youtube.co...
Business inquiries: info@thisistiffin.com
Instagram: / tiffintech
Tiktok: www.tiktok.com...
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
Never knew making a chrome extension could be so easy!! Great video👏
Today you can just tell chatgpt to make you one
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
Glad you enjoyed it!
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!
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.
ikr! i hit subscribe immediately
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.
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.
Thank you so much!!
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.
Thank you so much!
Didn't know it was that simple to start a chrome extension, so cool. Thank you for this video!
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?
Wow, that's amazing.
Yes, it does! 👌🏿
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
Great job!
Just started learning how to code. This seems like a fun way to make a mini project to practice!! Thank you
That’s great you are learning to code!! And yup it’s a great project to add to your portfolio 💓
hi ashley, are you a total beginner? also what language are you starting with?
This is the clearest and most informative coding vid I’ve seen in a while.
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.
yo that was a really good video straight to the point no filler
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.
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!
👆send a direct message for support and guidance . .
Did you know that you only have to type li#concert and then hit tab. This will autocomplete this to .
you are that one youtuber that once i saw in the feed i would never skip 😂 always worth it to watch your videos!
This made my day 🥹🥹💓💓
@@TiffInTech so did you! 🤍🤍 thank you for your great work
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)
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 :)
Glad I could help!
We need more on chrome extensions! Great video!
New to coding and this makes me so happy! Never knew it could be so simple! Thank you!
The video is short, to the point and just what I was looking for.. Thanks :)
This really helps a lot for the first day of my extension development!!! Thanks🎉
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! :)
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.
Very original intro. Anti-intro but being completely comfortable with it. We are only human after all. Well done!
👆send a direct message for support and guidance . .
I really enjoyed building this chrome extension with you. Thank you so much for always uploading such educational and informative videos!
so happy to hear!
A simple, clear, and concise tutorial, thank you! 😃👍
Glad you enjoyed it!
I didn't know about the ! + Enter, so thank you for considering learners of all levels 🙂
As a new Full Stack Developer this was super cool...
Love this, Tiffany! Unique utilities that we can all use! Added value !
Absolutely!!
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!
Do it! Build this extension. Thanks this was refreshing to watch.
👆send a direct message for support and guidance . .
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" :)
the video which Chrome's fans were expecting!
Great Video, as always 👏👏! We should definitely continue building it up. Can't Wait!
okay deal!! Github is linked too :)
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!
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.
I honestly didn 't understand anything, but the author is very beautiful ! I looked to the end, lifted my mood!
that's cool it was good to see that other people make mistakes too
thank you!
I didn't know the "!" trick, thanks!
You can add a "command" property in your manifest.json to open the pop-up when you press a keyboard combination, like Ctrl+Alt+U, It would be like:
"command":{
"_execute_action":{
"suggested_key":"Ctrl+Alt+U"
}
}
Thank you Tiff! This is exactly what i need to get started
L7 is coming to the town!! great vid thanks
👆send a direct message for support and guidance . . .
I absolutely love this and would absolutely love to go further in depth with what we can do with extensions.
SUBBED! Awesome video! I would like to see more of it built out too
👆send a direct message for support and guidance . .
It was that easy!!! Wooaahh!
Great video Tiffany! Short but straight to the point.
exactly what I needed to get started. thank you fam!
There is her tutorial on the left side on this guy. She reads and teach us awesome !
Good stuff! Would love to see a follow video on how to style it, how to make a paid version of the extension, etc.
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.
👆send a direct message for support and guidance . .
just got the right way ,Great work Tiff
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
Love the video, tiff ❤️. Keep up the good work. Love from Maldives 🇲🇻
Thank you so much!!
THANK YOU!! You are awesome 😁
A nice and quick tutorial. Love it!
Ok, that was really fun! I think the length is perfect. Break it up in sections, and keep it up. Totally subscribed!
👆send a direct message for support and guidance . .
You are very good at this
It would have been even better if you used a free API service(an error was coming that I haven't subscribed to the API in the console) so that beginners could also follow along typing the exact code but nice video
1:30 i didn’t know. i’m in my second semester and u j changed my life 😭😭
Haha I’m so happy to hear!!
ok how many people here think background is more whitish. Overall a great leaning video thanks 🙏🏻
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.
Nailed it! Nice job
thank you!
Thank you !! That was so simple with a great explanation!! Bless you!
lol. you and we could make a chrome extension in 10 minutes. amazing!
The vlog style of these videos is definitely unique in a fun way. Keep it up.
Thank you !! I appreciate that
JJGG
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
This is so digestible, thank you
WOW. Nice utility! I'll be exploring it. THANKS
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
👆send a direct message for support and guidance . .
Thank you, this is what i always search for in a long time 😀
👆send a direct message for support and guidance . .
That is so cool ! I'm really inspired by your content, your background and everything...your personality is really endearing too! Great job !!
Thank you so much!! That is so great to hear!
great video, thanks for sharing with us!
Thanks miss for giving me about building chrome extensions and coding I found interesting under the environment it was developed.🥰✌
Glad it was helpful!
Seems like something fun. Been wondering but haven't dive into Extension side. Thank you for sharing
Glad to hear!
This is sick! Idk it was gonna be that easy
Thank you Tiff. Please make more video tutorials of Chorme Extensions.
This looks like a fun little project!
Great video thank you - did not know about RapidAPI
it's simply not fair a human being could be so smart so talented so pretty and yet a good teacher...
become better…
It's the intro for me 😂 Nice video
haha thank you!!
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
do more videos like these. thank you in advance
Your videos are a good way to learn English. Well, at the same time, JS may be needed somewhere.
If you could explain in details for beginners it would be cool to learn from u. Love ur contents keep going!
👆send a direct message for support and guidance . .
Thank you for this training! I would like to learn more about your software.
Thanks,,I made my own translate extension using Google api
Love you and your code 😚
Amazing, thank you!
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.
Amazing stuff! This might give me a good reason to finally start wrinting some JS soon!
Thanks for the tutorial, I encourage you to do more :)
love you thanks for doing it easy
besides typing shift + 1 = ! , to make the html structure , u guys also should try just pressing the script.js with ctrl , this will open the file directly instead of adding it manually at the file section
That was beautiful and simple💪🚀
Awesome video, awesome content and information, salutations from Montreal!
wow not as hard as i thought it was be, so cool thanks for sharing.
🌟 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
Thank you for this tutorial. love your nail color btw💚
Oh thank you!