It was really cool. I tried writing an extension about 3 weeks ago starting from near zero knowledge about extensions (I'll have to get back to it as I'm still not done) & ran into very similar issues. I guess I should have watched this video.
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
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!
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.
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.
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: const apiUrl = `api.api-ninjas.com/v1/exchangerate?pair=${currency.value}_USD` - extension will now display the logically-correct exchange amount Note that those were NOT single quotes, but backticks to produce a template string. If you are not familiar with what template strings are, then here is a link to a friendly article to get you going: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals I have not tested anything locally, but I suppose this fixes the small bug in the code. Cheers!
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.
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.👍😃
i built a Sarcasm Text converter extension to format text quickly into a sarcastic format. example: i lOvE ThIs vIdEo. It works with short lines of text and up to 12 paragraphs (that's the most I have tested so far) and does so almost instantly. I'm new to coding in general and I am honestly proud of myself even if my extension is only for fun. Btw, I actually do love the video; it was very informative and enjoyable. :)
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.
Before I stumbled onto this tutorial, I found that many of the tutorials had actual file structure. For example, the popup screen is located in "popups/popup.html" and the script would be in "scripts/exchange.js" as well as the icon being "icons/icon.png". Overall, great tutorial!
Nice ma'am I learn a lot from you on this tutorial video, Your voice is awesome to coding learner to be understood in easy way, May God Bless you and your family. I am from India
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.
Thanks for your important contribution to the coding community. I really appreciate that you cover this important topic. I personally would have easier times to focus on the software development when your camera perspective would not switch too often away from the coding screen. It makes it hard to focus on the idea, else. I hope you can see my feedback as a attempt to help you keep on creating so amazing work. Thank you!
Great, keep it up, that's why I'm following your videos to learn more about making Google Chrome Extensions. Also watched your previous videos🎉🎉. In this video when you were just removing and adding the chrome extension folder while fixing the errors, I think you can just refresh it with the little refresh icon. I did it and it works 😇. By the way your videos are super great to inspire others to make cool stuff like this. 🤟☺
very good, thank you. I fixed the wrapping issue by using the defer key word so the script would load after the html page. Thank you for the sample and video
Fantastic video, love it! But some how desapointed... You said you'll review the code for the addEventeListener which was causing the last error. I think I'll have to figure it out my self. Thanks anyway.
I recently discovered your content, but this is the first time I've seen you code. You definitely demonstrated what real coding is like. 😁Great channel. Keep it up and have a wonderful day.
Hi Tiff thxs for the video! I wonder if you can explain why are you id in html tags instead of class. Is there a specific reason? Thanks in advance for the reply.
Hi all I am new to learning JavaScript and it seems that I am constantly having issues with the coding as now that Chrome Extensions uses Manifest Version 3 it seems like it keeps getting different types of errors each time. Is there anyway I can get hold of a working example so that I can see where I am going wrong and adjust my own code so that I can learn to create another one myself?
i watched you entier video loved it but the problem i dont know what the hell i am watching not tech savvy , i am smart when it come to shool reading book and all but when its come to technology not so good i struggle to forward email lol , but my brother is bet e would love your content btw this is why I am here I am surfing in RUclips here maybe I would learn something about tech or something so I can be more tech savvy and yes come from village to sad
Hello, I am having trouble publishing my extension on the Chrome developers dashboard since my country is not listed on the payment option. Is there a way around this?
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
It was really cool. I tried writing an extension about 3 weeks ago starting from near zero knowledge about extensions (I'll have to get back to it as I'm still not done) & ran into very similar issues. I guess I should have watched this video.
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
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!
Thank you!! Really appreciate that :)
This is much simpler than following the docs. Wasted 2 days for something this simple man.
thank you.
yes, this is true, i try too, via docs, and me neither realize how is the whole process, iand its worse becouse im a developer
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.
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
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.
This video is so good and easy to follow! Please make more of these
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:
const apiUrl = `api.api-ninjas.com/v1/exchangerate?pair=${currency.value}_USD`
- extension will now display the logically-correct exchange amount
Note that those were NOT single quotes, but backticks to produce a template string. If you are not familiar with what template strings are, then here is a link to a friendly article to get you going: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
I have not tested anything locally, but I suppose this fixes the small bug in the code. Cheers!
Great tutorial....I had to to scratch my head too $100 USD = ~135 CAD
Wow, your Chrome extension tutorial is the simplest one I've found! Thanks for making it so beginner-friendly. 🙌🌟
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.
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.👍😃
thank you!! Appreciate that
i built a Sarcasm Text converter extension to format text quickly into a sarcastic format. example: i lOvE ThIs vIdEo. It works with short lines of text and up to 12 paragraphs (that's the most I have tested so far) and does so almost instantly. I'm new to coding in general and I am honestly proud of myself even if my extension is only for fun. Btw, I actually do love the video; it was very informative and enjoyable. :)
Wow love your approach with these videos. Thanks for making them super accessible! Plus the background music is a nice touch 😊
What should we code together next?
can you tell me about your inspiration
And what do you do when you're frustrated?
I would personally love to learn a hello world iOS app, but understand if it's not something you're knowledgeable on yet!
Our own API
Well can u suggest something from beginner's like , from where we should start to reach the level at you are rn
Next.js + Contentful CMS!
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.
thanks James!! I probably should've used that - this was filmed before 9am so little coffee had been consumed! :D
Before I stumbled onto this tutorial, I found that many of the tutorials had actual file structure. For example, the popup screen is located in "popups/popup.html" and the script would be in "scripts/exchange.js" as well as the icon being "icons/icon.png". Overall, great tutorial!
Nice ma'am I learn a lot from you on this tutorial video, Your voice is awesome to coding learner to be understood in easy way, May God Bless you and your family. I am from India
Thanks a lot!
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.
so happy to hear!
Thanks for your important contribution to the coding community. I really appreciate that you cover this important topic. I personally would have easier times to focus on the software development when your camera perspective would not switch too often away from the coding screen. It makes it hard to focus on the idea, else. I hope you can see my feedback as a attempt to help you keep on creating so amazing work. Thank you!
Quick tip: you could reload the extension using the 'circle' button near the enable/disable switch without removing it
Great video! For quick formatting, I just turn on "format on save" and use the ctrl+s shortcut.
haha oh jeez thank you!! Yes of course. Thanks Jorge
the live "trial and error" was very cool and helpful. Kudos
So happy to hear. Thank you!
was really cool to see the entire process, including failling and mistakes
so happy to hear!
I am happy she has now started coding, than just talking about coding. Imho , it is this move which will catapult her subscriber base to 1 mil+
Amazing video Tiff, a great hug from Argentina as well
This is incredible! So a chrome extension is simply a JavaScript and html project?! Really cool!
Great, keep it up, that's why I'm following your videos to learn more about making Google Chrome Extensions. Also watched your previous videos🎉🎉. In this video when you were just removing and adding the chrome extension folder while fixing the errors, I think you can just refresh it with the little refresh icon. I did it and it works 😇. By the way your videos are super great to inspire others to make cool stuff like this. 🤟☺
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. 😎
Great tutorial on creating a Crome extension! Thanks a lot!👍🏼 Subscribed! 😊
she never disappoints. Big up Tiff
Thank you!!
this is so much worth knownledge Thank you so much tiff
so happy to hear!!!
Enjoyed this one! Thanks Tiff, I can't wait to customize it and build a complex version
Awesome to hear!!
Wow, I never see how you can build a chrome extension, let's start, thank you
You're welcome!
Need to start coding this right away❤❤
Yay!!!
very good, thank you. I fixed the wrapping issue by using the defer key word so the script would load after the html page. Thank you for the sample and video
Chida la musica de fondo, hace pensar que codificar es como tomar el cafe mientras lees en un lugar confortable.
This was fun and helpful .Gotta try this.
Have fun!
Thank you for this, looks really easy and cool :)
Your welcome!
Awesome video
thank you!!
love your vidoes you explain it so well also you have a natural beauty
thank you!
So helpful, 🐱 self tweaking chrome
Happy it was helpful!
Fantastic video, love it! But some how desapointed... You said you'll review the code for the addEventeListener which was causing the last error. I think I'll have to figure it out my self. Thanks anyway.
What do you think about functional programming languages like haskell, elixir and clojure, can you make a video about that?
As a tech writer I totally agree - read the documentation )
Yay!! I think tech writers have one of the hardest and most important jobs. The docs are everything!
Oh, such soft voice, I slept whole guide :D
Love you for your fantastic video
A really fun code along video thank you!
Hi, I'm from São Paulo! Muito bom!!!
Hi!!
I recently discovered your content, but this is the first time I've seen you code. You definitely demonstrated what real coding is like. 😁Great channel. Keep it up and have a wonderful day.
Thank you! Appreciate your comment! If there’s anything specific you’d like to see just let me know!😀
Yo lopk alike to Demi Moore in her best year ever and in a blonde version ❤❤ PS: I love your content ❤❤❤
oh thank you!!!
I love this!! But isnt the conversion backwards? Shouldnt 100US = 136CAD On screen?
thank you!! haha yes, I made that mistake --- my excuse is that I filmed this before 9am so I hadnt had enough coffee yet!
@@TiffInTech 😂 all good! New to the channel, i like the content!!
Hi Tiff thxs for the video! I wonder if you can explain why are you id in html tags instead of class. Is there a specific reason? Thanks in advance for the reply.
thank you!! I definitely couldve used classes instead :)
Who makes your thumbnails? They're amazing.
thank you!! I have a thumbnail graphic designer
nice video! think the conversion should be opposite though lol 100cad!=135usd!
can you tell me about your inspiration
and what you do when you are getting frustreted while coding or any others studies .
how can we make this even better, like what all code we can write in order to make it look better
Hi, Tiff. What do you think about drinking a lot coffee causes healthy problems?(have you ever have that)
For anyone following along this video, API has 'free tier' pairs, so for example USD and EUR pairs won't work. It took a lot of time to find out lol
thanks for the video
You bet!
I think you got the exchange rate the other way round - 100 usd is 135cad
I did!! I know 😩 this is what I get for coding before 9am!
Great work. Can we build chrome extension using Python?
Great idea!
Cool tutorial! Is it possible to implement such extension in React?
Yes, absolutely!
Did you use an env file for the API key? How did you access it?
How do you type with your fingernails?😛
but you did a great job...
Hi all
I am new to learning JavaScript and it seems that I am constantly having issues with the coding as now that Chrome Extensions uses Manifest Version 3 it seems like it keeps getting different types of errors each time.
Is there anyway I can get hold of a working example so that I can see where I am going wrong and adjust my own code so that I can learn to create another one myself?
thanks!
Forsure!! Hope you enjoy it!
miss tiff, if you were to suggest me what to master then what would be your suggestion: AI/ML or web3/blockchain
please don't deny my question.
I think either is great, go with what you are most interested in
hello tiff why you no longer use the mx mechanical keyboard ?
I do!! I switch back and forth. Back on it now!
thank you
i watched you entier video loved it but the problem i dont know what the hell i am watching not tech savvy , i am smart when it come to shool reading book and all but when its come to technology not so good i struggle to forward email lol , but my brother is bet e would love your content btw this is why I am here I am surfing in RUclips here maybe I would learn something about tech or something so I can be more tech savvy and yes come from village to sad
Great video! I'm falling in love by you, you are so cute and intelligent 🥰😍😘
I think your conversion is backwards. 100 cad is not 135 usd :D but 135 cad is roughly 100 usd
Which is more valuable PHP or HTML?
both are great and very different!
How to use contentDocument and contentWindow or alternative command using Chrome extension.
i dont know what to do with the document.addeventlistener line :(
first ever page though
Cool.
Hello, I am having trouble publishing my extension on the Chrome developers dashboard since my country is not listed on the payment option. Is there a way around this?
16:25
when there is pay there is will
Any recommendation how to get entry level job
yu forgot about the Pay the $5 registration fee
A one-time registration fee is required in order to register your account.
yes! thanks for the call out on that good point
hey at 18:30 can you show the code of getElementById
Hey, I am doing this in 2025, so it is compulsory to pay to get the developer privileges right?
you could've showed us the event listener part at least....
If you don't scroll through your code at some point, you need to remove that little circle of your head..it blocks the code
Manifest version 2 is working ?????
Why not manifest version 3?
It shows error in the API {"message":"Forbidden"}
What's the black coding screen?
Thanks for yours videos, are very cool! greetings from Colombia if you want day want to visit us
I love you💌Thanks
I subscribe you in today and very like your video, that's good. I wish to get your repley.~😀
You don't show the most interesting part: document.addEvent ..... ??? I'm newbie, show all the process please.
same issue let me know if u have done that
Nice info
thank you!
this sid for begginers so how do i even get to the screen where shes writing the code 😭😭😭😭😭😭
I will try your copycat!
sorry what? Youre going to try it out? :) You definitely can copy/follow along on this!
@@TiffInTech thanks, I’m just amateur.
So I start from “copy” 😊
@@Topgunchannel We all need to start somewhere! Good for you for starting the journey :)
If it's not an extension that steals user credentials I'm not interested! 🙄😒☹️
haha oh nooo!
liquid coffe is God, it's true! :). Do you know that he discovered that stardust and coffee are very similar?
its almost like my computer is talking to me, as a young nubile women, titilating
Your conversations are backwards
Q guapa