CODE WITH ME: Build a Chrome Extension | How to Build & Publish a Chrome Extension JavaScript & HTML

In this video, we'll be walking through how to build a Chrome extension with JavaScript and HTML. We'll cover the basics of what's needed to get started, including setting up a project and understanding the structure of an extension. Once we have that down, we'll move on to creating our actual extension functionality. Finally, we'll learn how to publish our extension so others can use it!

0:00 What we are building
1:37 Code a Chrome extension
10:58 API we are using
14:00 Live debugging sessions: debugging our code
18:39 How to publish the chrome extension?

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

#CODEWITHME #BuildaChromeExtension #tiffintech

[danialnoroozian]

the fact that you had some bugs and you didn't cut them out of your video makes you a respected and actual guide to learn from. really appreciate it <3

[teddyverdecia]

i like how you included the debugging it really humanizes this process and shows how even with a small simple project anyone even the most experienced developers can make small mistakes

[ncerdan]

First time seeing your videos, new sub from Argentina!!
It's really cool how didn't cut any part of the process, even when you made a mistake, that's so relatable and helps everyone not feel like 'they can't code' I truly appreciated that. Great work!

[nishkarshdubb]

Wow, your Chrome extension tutorial is the simplest one I've found! Thanks for making it so beginner-friendly. 🙌🌟

[thenicogeorge]

it's so refreshing to see you debugging and and learning as you go - that's the reality of coding p.s I'm the same way reading docs

[KimCarlos]

Quick Tip: U can just click the update button on the chrome.extensions page and it will automatically update the extensions based on their file paths. This is one heck of an interesting tutorial by the way.

[joebashour]

Great and fun explanation, @Tiff, as usual. Thanks for the guide!

Bug bounty (logical error with the code):
It appears that "CAD_USD", "GBP_USD", "JPY_USD" etc. are the exchange pairs that were intended to be used by Tiff in the video (at the end, Tiff was testing conversions from EUR to USD and from CAD to USD, so I presumed this is what the goal of the code was).

I realized this small discrepancy since the exchange rate seemed way off: $100 USD = $135 CAD and not the other way around (I wish it were true... I am Canadian as well 🙄😅).
According to the Exchange Rate API documentation (on API Ninja), "USD_CAD" will return the exchange rate from USD to CAD (and not CAD to USD as presumed in the video).

Therefore, for anyone following along with the code, here is how it could be resolved:
- delete the variable currencyTotal as it is redundant
- update the variable apiUrl as follows:
- extension will now display the logically-correct exchange amount


I have not tested anything locally, but I suppose this fixes the small bug in the code. Cheers!

[monsterhoodlum]

This is much simpler than following the docs. Wasted 2 days for something this simple man.
thank you.

[ndfmmcr]

Wow love your approach with these videos. Thanks for making them super accessible! Plus the background music is a nice touch 😊

[SnappyScience]

Just joining the chorus of people who appreciate you not cutting out your debugging. Some of the greatest lessons will be found in these parts of the videos. Subscribed.

[MicahFunk]

I didn't get to see anything, but I shouldn't have because I was driving. I really enjoyed the background tracks being played and your calm voice. Worked nicely for driving in city traffic.👍😃

[johnedwards]

An excellent tutorial. Keeping it ultra simple was the right approach. Too many tutorials build complex demos and it's easy to get lost in the JavaScript and to lose sight of the principles of making a Chrome Extension.

[alainhonorekubwayo]

Enjoyed this one! Thanks Tiff, I can't wait to customize it and build a complex version

[hazelteng]

This video is so good and easy to follow! Please make more of these <3 I haven't tried coding in such a long time, this helped alot!

[martinwyatt]

Hello Tiff, how does one wrap the code in the .js file as indicated at 17:53?

Thanks for the great work you're doing. 😎

[jamesross]

this was really good Tiff i was not feeling like coding today as its Saturday here and I wasnt in the mood but i saw your code with me video pop up and just decided to take a look before i knew it I was 10mins in and already learnt alot. I really love the videos when they are around the 20min mark and not to complex, i notice you didnt use async await function and used a .then promise instead any particular reason i have being learning about async await recently.

[stuartmcpherson]

A really fun code along video thank you!

[SkySesshomaru]

I was wondering how to make one myself, this will give me a good headstart for my own project.
Thanks for sharing your knowledge and way of thinking with us.

Appreciated.

[PictorialVibes]

Great tutorial on creating a Crome extension! Thanks a lot!👍🏼 Subscribed! 😊

[mileta]

Thank you for this, looks really easy and cool :)