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!
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.
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.
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.👍😃
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.
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!
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. :)
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
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.
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!
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
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. 🤟☺
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.
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?
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.
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?
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.
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 TH-cam here maybe I would learn something about tech or something so I can be more tech savvy and yes come from village to sad
Are you married? You are so beautiful. I looked at your lips move all through the process here. I actually started building a chrome extension last night and I did well. Now wanting to watch another random video, and you popped up... and I am amazed at how smooth and easy you make programming look. Wow, I am Nigerian and I am really blown away. Goddamit. You're beautiful Tiff. You can make my world stop moving though. This video is old though and I do not expect a response. But these are words straight outta my heart.
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
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
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 :)
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.
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
Wow, your Chrome extension tutorial is the simplest one I've found! Thanks for making it so beginner-friendly. 🙌🌟
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!
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
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.
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
the live "trial and error" was very cool and helpful. Kudos
So happy to hear. Thank you!
Quick tip: you could reload the extension using the 'circle' button near the enable/disable switch without removing it
was really cool to see the entire process, including failling and mistakes
so happy to hear!
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. :)
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!
she never disappoints. Big up Tiff
Thank you!!
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
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!
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. 😎
this is so much worth knownledge Thank you so much tiff
so happy to hear!!!
Wow, I never see how you can build a chrome extension, let's start, thank you
You're welcome!
Amazing video Tiff, a great hug from Argentina as well
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
Wow love your approach with these videos. Thanks for making them super accessible! Plus the background music is a nice touch 😊
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!
This is incredible! So a chrome extension is simply a JavaScript and html project?! Really cool!
Need to start coding this right away❤❤
Yay!!!
Great tutorial on creating a Crome extension! Thanks a lot!👍🏼 Subscribed! 😊
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+
Love you for your fantastic video
Awesome video
thank you!!
Enjoyed this one! Thanks Tiff, I can't wait to customize it and build a complex version
Awesome to hear!!
This was fun and helpful .Gotta try this.
Have fun!
love your vidoes you explain it so well also you have a natural beauty
thank you!
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!
Thank you for this, looks really easy and cool :)
Your welcome!
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.
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!
A really fun code along video thank you!
So helpful, 🐱 self tweaking chrome
Happy it was helpful!
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. 🤟☺
Hi, I'm from São Paulo! Muito bom!!!
Hi!!
how can we make this even better, like what all code we can write in order to make it look better
can you tell me about your inspiration
and what you do when you are getting frustreted while coding or any others studies .
What do you think about functional programming languages like haskell, elixir and clojure, can you make a video about that?
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!
Oh, such soft voice, I slept whole guide :D
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.
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?
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 :)
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!!
Yo lopk alike to Demi Moore in her best year ever and in a blonde version ❤❤ PS: I love your content ❤❤❤
oh thank you!!!
thanks for the video
You bet!
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
you could've showed us the event listener part at least....
Did you use an env file for the API key? How did you access it?
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
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
Hi, Tiff. What do you think about drinking a lot coffee causes healthy problems?(have you ever have that)
thanks!
Forsure!! Hope you enjoy it!
Who makes your thumbnails? They're amazing.
thank you!! I have a thumbnail graphic designer
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?
nice video! think the conversion should be opposite though lol 100cad!=135usd!
thank you
Which is more valuable PHP or HTML?
both are great and very different!
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
hello tiff why you no longer use the mx mechanical keyboard ?
I do!! I switch back and forth. Back on it now!
Cool.
Great work. Can we build chrome extension using Python?
Great idea!
Cool tutorial! Is it possible to implement such extension in React?
Yes, absolutely!
Manifest version 2 is working ?????
hey at 18:30 can you show the code of getElementById
It shows error in the API {"message":"Forbidden"}
I think your conversion is backwards. 100 cad is not 135 usd :D but 135 cad is roughly 100 usd
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
Why not manifest version 3?
16:25
when there is pay there is will
Any recommendation how to get entry level job
What's the black coding screen?
How do you type with your fingernails?😛
but you did a great job...
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!😀
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 TH-cam 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 🥰😍😘
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
this sid for begginers so how do i even get to the screen where shes writing the code 😭😭😭😭😭😭
I love you💌Thanks
Thanks for yours videos, are very cool! greetings from Colombia if you want day want to visit us
If it's not an extension that steals user credentials I'm not interested! 🙄😒☹️
haha oh nooo!
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 :)
its almost like my computer is talking to me, as a young nubile women, titilating
Your conversations are backwards
I subscribe you in today and very like your video, that's good. I wish to get your repley.~😀
liquid coffe is God, it's true! :). Do you know that he discovered that stardust and coffee are very similar?
Q guapa
Are you married? You are so beautiful.
I looked at your lips move all through the process here.
I actually started building a chrome extension last night and I did well. Now wanting to watch another random video, and you popped up... and I am amazed at how smooth and easy you make programming look.
Wow, I am Nigerian and I am really blown away. Goddamit.
You're beautiful Tiff. You can make my world stop moving though.
This video is old though and I do not expect a response. But these are words straight outta my heart.
Nice info
thank you!