Coding A Chrome Extension in JavaScript Tutorial

Best Tech Resume Template: papermoontech....
Use code: PEDRO for 20% off
In this video I will teach you guys how to build a chrome extension using JavaScript. The images I used are down in the description!
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
[
"www.lovethispi...",
"media1.popsuga...",
"www.cliccamaqu...",
"observatoriodo...",
"upload.wikimed...",
"exame.com/wp-c...",
"conteudo.imguo...",
"i0.wp.com/mixd...",
];
Tags:
- Chrome Extensions
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@kurokev.mp4]

Making an extension for my final project of a coding course. This helped me understand how to get started, thanks a lot Pedro.

[@PedroTechnologies]

Glad you liked it :)

[@linusdickmann]

@@PedroTechnologies hey So I came here after I saw a Viral TikTok on this Bionic Reading API and thought it'd be awesome to write a chrome extension on it so you could automatically display the text on a website in this bionic reading style. In the comment section the demand on an app for android or a browser extension was high but there is not yet an existing one. Unfortunatelly I'm really no programmer but I think this could make a very interesting and viral video. What do you think?

[@learningstuff5679]

I followed the tutorial, rewatched and fixed any errors that I had - and then uploaded to chrome extensions. There are no errors but the images are not swapping. Any idea why?

[@cellularpeptidecake]

Had to go through several videos to find yours. Simple and easy to follow. Thanks bro.

[@alanrneves]

Your English is so good, congratz!

[@lucifergo4332]

Dude that will Smith part really cracked me up

[@Shubham-tq5ot]

Excellent tutorial. Pl make more tutorials that use other Chrome extension apis!

[@PedroTechnologies]

Thank you! I plan in the future!

[@f3-faithfitnessfinance]

When did 4k happen😱 🔥🔥 Fire bro🙌

[@PedroTechnologies]

Thanks bro 🔥The channel hit 4k last friday! We are growing like crazy! I am thankful for the support bro!

[@f3-faithfitnessfinance]

@@PedroTechnologies keep going bruh 🙌 Consuming your content fetched me a job❤️

[@조승희-s7f]

Thanks Pero! Great tutorial

[@programmingwithnit5308]

Thank you brother 🙏🙏

[@PSProduktions]

very informative! Thanks you so much!

[@woomygfx]

underrated, tysm for the tutorial!

[@PedroTechnologies]

Glad you like it!

[@woomygfx]

@@PedroTechnologies i wanted to know if it was possible to change text to images, kinda like how bttv works, whenever i try to change the text to the placeholder (in your case `WillSmithImages`) it displays the link and not the actual img

[@PedroTechnologies]

@@woomygfx So what is happening is that you are trying to put the link to the image inside of a non image html tag. To change text to image you need to change the tag and add the url as the href.

[@lnsinfotechsolution3016]

How to Remove all ads and replace with my photos, text, link in javascript chrome extension, can you send code or some hints

[@FireCrauter]

Is there a way to iterate between the following tabs and use a javascript code on each tab? Or simulate ctrl + pageup? (And it would be missing how to inject the js). and that the extension will open once and can remain as a separate window ?. (I want to make a very simple version like the imacros extension)

[@diegoa.hungr.5169]

Hi Pedro, I have a question, is it possible to create a chrome extension with the function of performing automatic scrape?

[@sanjuthreddy6435]

can anyone help me how to get the chrome wallpaper like he got in the video the good morning one time

[@lesptitsoiseaux]

Declare your content script at document_start and use MutationObserver? Please do a video on that :)

[@krepkovmeste]

what is the name of theme in visual studio?

[@williamvestergaard4136]

Palenight Theme

[@splashystudio9949]

9︓ 18 IS MY MINUTE!

[@AgostinhoSEP]

Mano, tô com um problema, se tu conseguisse me ajudar ia fazer a boa 🥺 Tipo, eu já tenho um script feito e tals, aí eu tinha uma extensão do Javascript no opera que era só eu copiar o script lá, apertar em salvar que o script já funcionava no site que eu queria. O foda é que eu não consigo mais achar essa extensão. Tu tem uma ideia de qual pode ser a extensão ou o que eu posso fazer pra executar meu script?

[@dailymeow3283]

Hey Pedro, the changes done by the extension only appear on your local browser, isn't it ? It will not appear for other visitors of the site, or another browser

[@cryptoborgfa]

I'm not Pedro but you are correct. Only the ones that have the extension installed on their browser will see the changes.

[@shadowsage9164]

What’s the app?

[@Calupp]

I'm in public right now trying not to laugh at that Will Smith extension. That's the funniest shit. Def using this to fuck w some people

[@uivcat]

9:32 what is wrong with your fyp bro

[@snowie030]

wanna know how will smith will react when he sees this, lmao thumbs up to this tutorial

[@njox1635]

Awesome

[@softvibes1602]

TYSM

[@lucasa8710]

caralho mano, inglês bom da porra, é fisk? KEWK

[@PedroTechnologies]

Kkkkkkk obrigado mano! Eu estudei desde criança ai fiquei melhor

[@Tom-JS]

8:46 urls

[@ionvajda]

Subscribed

[@PedroTechnologies]

Thank you! Glad you like the tutorial!

[@israelalmaraz7889]

my boy really loves Will Smith😭💀

[@mrnabby4178]

This is funny bro

[@willianguedes6227]

Pesquiso em inglês pq não acho em português e acho vídeo de brasileiro ensinando em inglês kkkkkk

[@muizahsanu4521]

"manifest_version" is the version of the manifest you want to use. in the documentation there is manifest v2 and v3. if you want to use manifest v3 (version 3) then the value in "manifest_version" is 3. that's what i read in the documentation, correct me if i'm wrong

[@Zokiio]

you are correct, there are 2 versions of the manifest. version 1, like in this video should not be used and version 2 vill be phased out in the near future.

[@cscott_smiles]

​@@Zokiio then you're telling me not to use the manifest. If one is being phased out, and one should not be used.... Not a helpful comment. You're actually just confusing people like me.

[@Zokiio]

@@cscott_smiles Sorry for being vague, but the person I was answering, did talk about the version 3 , I just wanted to clarify that the v1 should not be used and that the v2 was going to be phased out relatively soon, and at the time of writing v3 is fully released.

[@northshorepx]

Thanks a million mate. Have my first extension working now! You rock!

[@victorekea]

Great tutorial, Pedro. If you're watching this in 2023, change "manifest_version" to 3 and "browser_action" to "action". Good luck.

[@sahilvashisht_0462]

hey I am getting error Required value 'version' is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536. Could not load manifest. please help me...☺

[@knightblueyan5682]

Nice video, can you make a tutorial on how to modify the search page to display date, time, temperature? etc.

[@notmoonlight724]

I doesn't work

[@tazimrahbar7882]

Hello Pedro you inspired me to learn to code I just wanna ask from how many years you are Coding

[@PedroTechnologies]

I am so happy to hear this! I started coding about 4 years ago, however I only started taking it seriously about 1.5 years ago!

[@angelalmachado]

Thanks Pedro! Very useful! I'll definitely do this

[@PedroTechnologies]

Glad you liked it angeletti! You should try it!

[@DonLarryTT]

Thanksssss it was what I needed I just was looking for how to inject a script for some URLs and this was reeeaaaaly helpful!

[@abdelouahedaitali9962]

I think you can add document.onload event

[@lacreatrice3218]

Thanks for video. I haven't found any solution to my problem, but anyway it's great. Keep going!

[@rapertalisson7959]

I died laughing when I started the random images of will smith xD

[@bfbleafy]

18:22 what tag does youtube use for video titles? I really need it for a similar extension where it replaces text

[@k4y1to_]

Sempre muito maneiro ver alguém brasileiro produzindo conteúdo de programação

[@prathamanand1037]

Upload the other two Chrome extension tutorial pls

[@eggproductions9683]

ok but i did one on one everything nd yet im lacking a scheme separator

[@adampratt604]

my photo can't be showing brother! how can i solve it?

[@farban6200]

is there a way to use local images with this? I was trying to make the same thing but with my own images but it doesn't seem to work. It just shows null images

[@PedroTechnologies]

Hey, you can get a local image like this: var imgURL = chrome.extension.getURL("images/myimage.png");

[@saiiluru8454]

Dude this is what i want this is fun 😂

[@technicalabbas6134]

Hey I need your help ? I am building an extension which will help me to print a specific content of any websites when I click button but this is not happening What should I do

[@lifealliancegroup]

😀Thank you!!!

[@likhitha8870]

Great tutorial. Please make tutorial for Procrastination blocker as well.

[@PedroTechnologies]

Hahaha I can make that too!

[@starless9]

this app slaps

[@LucasSilva-oy7fq]

Pedro como eu hospedo uma aplicação com react no front-end e node no back, tipo eu tenho que hospedar o back-end e o front-end em hosts diferentes?

[@PedroTechnologies]

Boa Lucas, tenho videos sobre isso! Video usando mysql: kzbin.info/www/bejne/oqiypHxugdmJe7M . Video usando mongo: kzbin.info/www/bejne/kJCnZapsfdKHbs0

[@QkysenQ]

4:10

[@kkphoenix9465]

You are actually an Brazillian men, Você fala inglês muito bem mano kkkkkkk

[@PedroTechnologies]

Sou kkkkkkk Obrigado mano!

[@nerdion1911]

Great beginner video man

[@PedroTechnologies]

Glad you liked it

[@joseisraeldiazzapata5179]

omg jajaj that's awesome Pedro 😄😄 and you're in Brasil. Do you understand spanish? De tus videos estoy aprendiendo muchas y divertidas cosas, muchas gracias

[@PedroTechnologies]

Gracias! I speak a bit of spanish cause I took it in high school hahaha Glad you are liking the videos!

[@rajenderkatkuri7642]

watching it exactly after an year..

[@PedroTechnologies]

The year went pretty fast hahaha this video felt like yesterday

[@rmnst]

Hi PedroTech! How long did you wait for the Chrome Extension to be added in the Chrome Web Store? Many thanks for this!

[@billmane226]

Thank you so much WIll you have a video on how to download every image in a website ? I tried but really hard and I cant find any tutorial on similar usage . It will be great if you have one.

[@Borma425]

thanks

[@n08ishaxii72]

Just like you got all the images by the tag "img'" is there a way to get the font styles of the page? I am making chrome extension that changes the font styles. Thanks a lot.

[@motorhead41]

I was expecting the Will Smith extension to reach through the screen and smack me.

[@jamarimcfarlane4844]

video is 2021

[@C0D3O]

how to make a button that starts the script on the needed page? so I guess... the popup.html has to run the content script js? how to do it? mine is trying to run in the popup.html...

[@jackepner9984]

Even with manifest version set to 2, it throws an error, saying manifest version will not be supported in 2023. Maybe an update addressing this?

[@Bebel-42]

What's your tiktok bro ?

[@PedroTechnologies]

I don't post anymore hahaha but it was called @pedromachadao

[@cameronpartee2949]

What if you wanted to place a button on top of every image? How would you approach that?

[@mikevenema9136]

Was super easy

[@PedroTechnologies]

Yes! I used to think it was complicated, but extensions are really cool!

[@sadique_x_]

the video is great and your teaching is awesome 💯🙏

[@tusharsahu397]

Thanku Sir for this amazing as well as mesmerising content

[@d.m.gjapan6956]

what (visual studio code) extensions????

[@rana-the-dev]

Thank you for creating this video.

[@rangabharath4253]

Awesome

[@PedroTechnologies]

Glad you liked it!

[@spalatty]

Great video! Learned alot! Can you show us how to do manifest 3?

[@aryansurin3698]

this is soo cool and simple too!

[@MuhammadHassan-qh3sm]

Thanks a lot for making this video 😍

[@YourShorts_guy]

I love you 😘😘

[@pegihr]

Hi pedro, as always thank you for the video. I have a request, can you made infinite scroll pagination tutorial in react?

[@PedroTechnologies]

Thank you! I was going to make a video on this topic this week hahaha but I chose to make a normal pagination video! Since you asked, I should probably make one next week!