Create a Google Chrome Extension (For Beginners)

  Рет қаралды 244,719

iEatWebsites

iEatWebsites

3 жыл бұрын

Creating a Google chrome extension from scratch is very easy. This video tutorial will show you the basics on how to get started.
How to Publish your extension:
developer.chrome.com/docs/web...
Full Documentation:
developer.chrome.com/docs/ext...
Follow me:
/ ieatwebsites

Пікірлер: 218
@malaching8143
@malaching8143 Жыл бұрын
in 3:14 you say it is 16 pixels, however below it says 154x154, does it not have to be 16? can it be any random dimensions as long as it is a square?
@eugenem529
@eugenem529 2 жыл бұрын
For those of you who just like me wanted to ctrl+V ctrl+C "basics" here you are: { "manifest_version": 2, "name" : "", "description": "", "version" : "", "icons": { "16": "", "48": "", "128": "" }, "page_action" :{ "default_icon": { "16": "", "48": "", "128": "" } }, "content_scripts": [{}] }
@thebluemasteryt3473
@thebluemasteryt3473 2 жыл бұрын
thanks
@luonghuuthanhnam
@luonghuuthanhnam 2 жыл бұрын
god bless you :v
@nebulafdv2
@nebulafdv2 Жыл бұрын
Thanks
@dangresys3795
@dangresys3795 3 ай бұрын
youre a legend thanks!
@AmlizeagaGaming
@AmlizeagaGaming 2 жыл бұрын
how do i get those shadows on the window corners on windows 10, like the old ones
@1mrnewton
@1mrnewton Жыл бұрын
update: as at now (5th Jan 2023) manifest.json 2 is deprecated. so if you're watching within this time, use (manifest_version:3) and remove "page_action" key and its values.
@empplayz
@empplayz Жыл бұрын
tysm I was watching and google kept giving me errors
@empplayz
@empplayz Жыл бұрын
although its still giving me an error I removed all the stuff below "128": "/images/icon128.png" and changed the manifest number to 3 did I mess something up, sorry this is my first time doing this
@1mrnewton
@1mrnewton Жыл бұрын
also you gonna make sure you have, scripts.js, popup.html files in your directory. you can replace the names tho. You're welcome.
@empplayz
@empplayz Жыл бұрын
@@1mrnewton I don't really know what you mean by that why do I need a scripts.js and popup.htlm file and what do they need in them?
@Visoriz
@Visoriz Жыл бұрын
How would I make the image stretched across the window not tiled Edit: I found a library about cssref (which is the same thing as the code in the css file) and I learned how to go into specific element classes and control a lot more. Unfortianently you cannot make it stretched but you can just change size
@captainT0ad
@captainT0ad 2 жыл бұрын
the code didnt work for me idk why, can you put it somewhere so that i can copy and paste it?
@theinvokerdarksoul3356
@theinvokerdarksoul3356 Жыл бұрын
I'm grateful for the knowledge that you have given me, truly a good place to start.
@akshi9046
@akshi9046 15 күн бұрын
the image for the background of the search engine isn't working for me. any ideas why?
@RebellionAlpha
@RebellionAlpha 2 жыл бұрын
Will manipulating page css stop working, because Alphabet is Implementing Manifest v3 right now?
@lnsinfotechsolution3016
@lnsinfotechsolution3016 2 жыл бұрын
How to Remove all ads and replace with my photos, text, link in javascript chrome extension, can you send code or some hints
@spillehunden
@spillehunden Жыл бұрын
Can i have the start you copy pasted in to the document at the start?
@jamieplayz247
@jamieplayz247 8 ай бұрын
Wers the browser u uysed to get that script up called\
@sivamech9140
@sivamech9140 Жыл бұрын
how the photo link came from where u used in CSS
@Bagwah
@Bagwah Жыл бұрын
How do I get the star that makes it a "wildcard"?
@yurisoares2596
@yurisoares2596 2 жыл бұрын
I already made mine, but I'm getting stucked by security bs(not really) and my js script isn't running.
@thebluemasteryt3473
@thebluemasteryt3473 2 жыл бұрын
where can i find the script for manifest.json?
@nipunpeiris
@nipunpeiris 3 жыл бұрын
Really helpful mate! Great content! Wish you will create more content like these! Good luck! 😊
@ieatwebsites
@ieatwebsites 3 жыл бұрын
Thank you so much. 😁
@trevorPhillips284
@trevorPhillips284 2 жыл бұрын
the backgroung image is not covering over 'images' 'gmail' and my account
@A7mad3109
@A7mad3109 2 жыл бұрын
can i have the manifest.json file so i can copy and paste
@omarherrera.digmaster
@omarherrera.digmaster 2 жыл бұрын
how can this extension be added as bookmarks ?
@wulfmaer8919
@wulfmaer8919 10 ай бұрын
Great starter tutorial! Thank you!
@umairiqbal7646
@umairiqbal7646 2 ай бұрын
.json file not showing up in load unpacked
@photonicsauce7729
@photonicsauce7729 2 жыл бұрын
Can you make a video for manifest version 3? Ig this is outdated
@RODIOMG7
@RODIOMG7 Жыл бұрын
how do i do this but for youtube
@kumarrparth
@kumarrparth 2 жыл бұрын
I have done all the things correct but the extension isn't loading
@iDevourLotion
@iDevourLotion 2 жыл бұрын
how do i get that coding thing
@Leprogrammeurmarocaintv
@Leprogrammeurmarocaintv Жыл бұрын
Thank you a lot for this tutorial need more tutorials if possible about creating chrome extensions.
@wilson_
@wilson_ 2 жыл бұрын
Thank you Sir. This was perfect for my use-case. I just wanted to remove/hide a few things I did not want to see from a website I use regularly. 😁
@thegreenfox011
@thegreenfox011 2 жыл бұрын
but how do i make it so it appears everywhere?
@shinobi5237
@shinobi5237 Жыл бұрын
This icon can't have 16x16 px the quality is too high!! I changed the dimensions with a photo editor and a 16x16 px icon is very very bad quality!
@brandonochia9043
@brandonochia9043 2 жыл бұрын
This was a great intro video. Thank you so much! Definitely going to play around with chrome extensions now!
@ieatwebsites
@ieatwebsites 2 жыл бұрын
Thank you!!
@pragyajain1445
@pragyajain1445 5 ай бұрын
my google background is not working i have followed each steps but still
@ajaymain3739
@ajaymain3739 2 жыл бұрын
What a clear explanation man, really appreciable 🙌🙌🙌, great
@iamPressureMan
@iamPressureMan 3 жыл бұрын
This helped me gain a better understanding of how to start building a google extension. I appreciate you bro! Keep up the good work. New subscriber
@ieatwebsites
@ieatwebsites 3 жыл бұрын
That’s great! You are very welcome.
@shadowsage9164
@shadowsage9164 2 жыл бұрын
What’s the app
@Timooooooooooooooo
@Timooooooooooooooo 3 жыл бұрын
I've wondered about this and looked into this a bit before, but I've never tried it out fully. Thanks for this walk-through! I wouldn't mind watching more episodes of this. Feedback for this video: the part about putting the icons in the manifest took quite long. I think it would be fine if you went over that a little faster.
@ieatwebsites
@ieatwebsites 3 жыл бұрын
Thank you so much timo! Yes! Sometimes I focus on thing that are not very important 😂
@guywholikesbreathing1263
@guywholikesbreathing1263 2 жыл бұрын
@@ieatwebsites Hello i'm not sure if you'll respond to my request or even see it since this is an 9 month old video but I am wondering how to make it so that the backround changes to a new picture for example every 24 hours, so I can automatically get a new background every 24 hours.
@AviatingRandom
@AviatingRandom 2 жыл бұрын
the manifest part wasn't much help. he copy and pasted all that code and didn't tell us where we could get it
@ureo_umbreon8601
@ureo_umbreon8601 Жыл бұрын
@@ieatwebsites Hey can you link the basic code for me? I have had trouble finding it, and I have to type it out manually.
@pr0tr0ll3r
@pr0tr0ll3r Жыл бұрын
@@ureo_umbreon8601 yes tht would be very helpful
@auwalumar5350
@auwalumar5350 Жыл бұрын
Who can help me create a Chrome Browser Extension for my SEO Tool website please ?
@DR.FRIZZY
@DR.FRIZZY 7 ай бұрын
my exstention is still gray :(
@yeetgaming6720
@yeetgaming6720 Жыл бұрын
fudge I'm on a Chromebook I need to learn how to make files on this thing
@fahimhossain6109
@fahimhossain6109 2 жыл бұрын
Nice,I got what I needed,thanks ,such a clear explanation,love it
@beautifullgirls8289
@beautifullgirls8289 Жыл бұрын
i want to add JavaScript and do automatic things like checked in 1000 cells ratio
@Visoriz
@Visoriz Жыл бұрын
You can probably do that by calling the js in the json
@deprixionz5850
@deprixionz5850 Жыл бұрын
It doesn't appear when I search things on google
@allesprobieren
@allesprobieren 3 ай бұрын
Such a good tutourial.
@Revelatus
@Revelatus 2 жыл бұрын
does this overwrite the existing css on a webpage with your new css file? or do you need to do a bunch of remove rules to get rid of conflicting css lines on the existing webpage?
@4MXW
@4MXW 2 жыл бұрын
I'm not sure. I think is like an extension of the css. But looks like normal CSS behaviour. If you say that x=1 at the beginning and later say that x=2... then x will be 2. and won't even matter that you wrote x=1 in the first place.
@TheEamonKeane
@TheEamonKeane 2 жыл бұрын
This was great. Almost exactly what I was looking for. Guessing we can add an array of domains to matches?
@eraysona7916
@eraysona7916 6 ай бұрын
thank you so much you inspired me
@ibrahimseyam1621
@ibrahimseyam1621 2 жыл бұрын
how can replace code
@jozsi26
@jozsi26 2 жыл бұрын
Thank you, this was a great way to start learning Chrome development! Awesome!
@Borma425
@Borma425 2 жыл бұрын
I watched other videos but I didn't like it You are just excellent A great effort in zooming in on the screen, explanation and everything Thank you
@ieatwebsites
@ieatwebsites 2 жыл бұрын
Glad you liked the videos. You are welcome! 😁
@ap74249
@ap74249 2 жыл бұрын
Thanks man!
@saidalkharusi7824
@saidalkharusi7824 2 жыл бұрын
You're a life saver, just what I wanted. Thanks!
@burado4020
@burado4020 2 жыл бұрын
what is the difference between manifest v2 and v3 regarding this video ?
@KcClips
@KcClips 2 жыл бұрын
from 2023 manifest v2 will no more work
@Sunny-tl6qg
@Sunny-tl6qg 2 жыл бұрын
I've tried and it worked on google even though I had to change the image background to that one that you gave it seems that it's not available anymore. Then I tried with youtube and it didn't work, I wonder why...of course, I changed the matches link as well.
@rakeshrosh3794
@rakeshrosh3794 2 жыл бұрын
I am also trying it right now but my extension is not activating do u know why ??
@PSProduktions
@PSProduktions Жыл бұрын
Damn you explained that so nicely! I had no idea how to make a chrome extension and always thought it's something only god-tier programmers can do but you broke that delusion of mine and for that THANK YOU!
@mh69197
@mh69197 Жыл бұрын
Quick question: Is is required to register as a developer in chrome app store to upload and test your extension?
@qedro
@qedro 8 ай бұрын
To upload, yes, to test, no. To test, just enable the developer mode on the extensions page and upload your extension’s folder.
@sachindeveloperko8424
@sachindeveloperko8424 3 жыл бұрын
😀 thank you for making tutorial
@ieatwebsites
@ieatwebsites 3 жыл бұрын
You are very welcome. 😁
@vasaramadanovic8045
@vasaramadanovic8045 2 жыл бұрын
I cant load icon idk why i was followint the tutorial it said:Could not load icon 'images/icon16.png' specified in 'icons'. Could not load manifest.
@appleid3223
@appleid3223 2 жыл бұрын
make sure your file path is correct
@Mujiboy
@Mujiboy 2 жыл бұрын
You will have to Load the image as a separate file in the same folder
@hassanjamil841
@hassanjamil841 Жыл бұрын
Pretty simple and to the point, for beginners like me.
@FriedMonkey362
@FriedMonkey362 Жыл бұрын
Not to the point at all he spent 1/3 talking about images so he could reach 10 minutes and monitize
@tieflabs
@tieflabs Жыл бұрын
thank you so much!
@devbites77
@devbites77 2 жыл бұрын
A nice ‘hello world’ for chrome extensions. Thanks! Looking forward to diving in.
@ieatwebsites
@ieatwebsites 2 жыл бұрын
You welcome! 😄
@stoicis
@stoicis Жыл бұрын
can I use this in sublime text also?
@ieatwebsites
@ieatwebsites Жыл бұрын
Yes!
@NanogalaxyOrgMedia
@NanogalaxyOrgMedia 2 жыл бұрын
Thanks a lot. How do you inject js?
@amobeats8088
@amobeats8088 Жыл бұрын
What is the program you are using on the left window the whole time when you are coding? Kinda new into this and would appreciate if anyone replies.
@andper0
@andper0 Жыл бұрын
visual studio
@amobeats8088
@amobeats8088 Жыл бұрын
@@andper0 Thanks
@Visoriz
@Visoriz Жыл бұрын
It's Visual Studio but you can just do it with file explorer if you want.
@amobeats8088
@amobeats8088 Жыл бұрын
@@Visoriz Thanks bro
@peterszarvas94
@peterszarvas94 2 жыл бұрын
Thank you!
@aswanaswan6732
@aswanaswan6732 Жыл бұрын
why there is no chrome extension tutorials , there is just videos like this that shows you how to install google chrome
@acloudyboy
@acloudyboy 2 жыл бұрын
here is the manifest file for anyone wondering also if you ever need to copy paste code from photos or videos just install the blackbox chrome extension it makes a few mistakes with comma and " those but you can just fix it up ok heres the code: { "manifest_version": 2, "name": "", "description": "" ,"version": "" ,"icons": { "16": "" ,"48": " " , "128": "" }, "page_action": { "default_icon": { "16": "" ,"48": "" ,"128": "" }, "content_scripts": [{}] } }
@simplephotos6803
@simplephotos6803 2 жыл бұрын
ur awesome
@lorlor9008
@lorlor9008 Жыл бұрын
They should pin your comment👍
@polymathematics_
@polymathematics_ 2 жыл бұрын
Super helpful! Thank you.
@thewallstreetbusinesstrapp2761
@thewallstreetbusinesstrapp2761 Жыл бұрын
What software are you using to code?
@ieatwebsites
@ieatwebsites Жыл бұрын
VS Code
@chompplays1137
@chompplays1137 2 жыл бұрын
Is it possible to share information between two different peoples extensions For example if P1 types in bean it will show up for P2
@timustica9417
@timustica9417 2 жыл бұрын
I would also like to know the answer to this
@StijnHommes
@StijnHommes 2 жыл бұрын
Why do you have to point to at least 3 different logo files in your manifest? Why not just point to a svg single vector images and be done?
@LeviAckerman-tr9qu
@LeviAckerman-tr9qu Жыл бұрын
best for getting started . upload website permission based videos if you can.
@TheLanceGamer
@TheLanceGamer 2 жыл бұрын
This opened my mind 10x instead of using c# to control the browser Use this 😂
@ieatwebsites
@ieatwebsites 2 жыл бұрын
🤯
@armaanoo
@armaanoo 2 жыл бұрын
I am just starting out. Dumb question: But what's the IDE on the left? How do I get that?
@armaanoo
@armaanoo 2 жыл бұрын
Ok, I got access to an IDE on replit. Now, I am downloading the file and then trying to upload the json file but it's greyed out when I try and upload the json.
@armaanoo
@armaanoo 2 жыл бұрын
Okay, I got super close - I am able to load the package and resolve all errors. However, I am facing one last problem - the google home page is not showing the image I selected :( It's just going black... Any tips?
@bricolomagnac
@bricolomagnac 2 жыл бұрын
Hello, I have a question, is it possible with an extension to remove the cross at the top right corner to close the window?
@greenwiener
@greenwiener 2 жыл бұрын
no. it's a part of a window not a website.
@bricolomagnac
@bricolomagnac 2 жыл бұрын
@@greenwiener with an extension we can' t access to the settings of chrome or something like that? because the presence or not of a cross this kind of thing is relative to the software code, so if the extension access to some variables of chrome it should be able to change that
@bricolomagnac
@bricolomagnac 2 жыл бұрын
@@greenwiener with an extension we can't access to the settings of chrome or something like that? because the presence or not of a cross this kind of thing is relative to the software code, so if the extension access to some variables of chrome it should be able to change that
@nikhilgupta5020
@nikhilgupta5020 2 жыл бұрын
I have a question that if I want to create an extension where data is take from the other website for example Seo Audit extensions, keyword extension, ect. what is the process for that?
@xxwoman
@xxwoman 2 жыл бұрын
Oh my gosh this was great! Thank you, can I ask why manifest has to be set at 2?
@KcClips
@KcClips 2 жыл бұрын
it is 3 now
@bappi5702
@bappi5702 2 жыл бұрын
thanks man
@adammartinez6033
@adammartinez6033 Жыл бұрын
I just did it for the first time! Awesome video! Thank you!
@desenvolvedor5digibyte591
@desenvolvedor5digibyte591 2 жыл бұрын
Best intro on how to create extensions for Chrome, thanks
@user-du4of6in6l
@user-du4of6in6l 2 жыл бұрын
Thank you for this perfect tutorial Can you please help me I want to make a site blocker addon that blocks a specific page or account not all the site and have the ability to block a whole site too. I am trying to develop a non profit site blocker addon for schools and I am having hard time as I am so new to programming I am trying to make it so it can check a url site like pastebin every time the browser opens and take the urls I post in post pastebin and add it to block list (I will update the list daily so I need it to check it every time the browser opens) And I want to make the list encrypted students cannot take blocked urls from the addon So can you please help like guide me to tutorials or links that explain these things or make a video about it so it will be content for the channel too Thank you very much and sorry for requesting many things I am lost and confused
@RyanMorizz
@RyanMorizz 3 ай бұрын
good luck
@dumo178
@dumo178 9 ай бұрын
tysm!!!!
@bigfeetentertainment5473
@bigfeetentertainment5473 2 жыл бұрын
thanks!
@learningstuff5679
@learningstuff5679 2 жыл бұрын
Very frustrating - this is the second Javascript / Chrome Extension where I followed along exactly and it didn't work. Would have been helpful if you copy and pasted your code for people to compare / follow along.
@skyfall_04
@skyfall_04 2 жыл бұрын
yeah
@mathbrah
@mathbrah 4 ай бұрын
How do I make my vs code look good like yours?!?!
@ieatwebsites
@ieatwebsites 4 ай бұрын
You can create your own theme or install a theme.
@mathbrah
@mathbrah 4 ай бұрын
@@ieatwebsiteswhat are your settings? Show pls!!!!!!!!!!!!!!!!!
@udhayasilambam96
@udhayasilambam96 Жыл бұрын
Great Thanks
@kazoottt4718
@kazoottt4718 2 жыл бұрын
thanks a lot
@saeedsaeedi1310
@saeedsaeedi1310 2 жыл бұрын
thank you
@That-------------------Guy
@That-------------------Guy Жыл бұрын
I CANT FIND THE EXTENSIONNNN FILEEEEE!!!!
@Ti-03
@Ti-03 Жыл бұрын
Thank you !! Keep going the good work ❤️❤️
@montanavfx
@montanavfx 2 жыл бұрын
What app do you use
@ieatwebsites
@ieatwebsites 2 жыл бұрын
Vs code
@montanavfx
@montanavfx 2 жыл бұрын
@@ieatwebsites thx
@GreenLyfe00
@GreenLyfe00 Жыл бұрын
wholesome video
@jermsbestfriend9296
@jermsbestfriend9296 Жыл бұрын
Love this. Can you tell me a way to execute some js?
@mrbosstech09
@mrbosstech09 2 жыл бұрын
Hey...this is an Amazing tutorial and walk through...do you have any idea as to how can we create a chrome extension that can help us autofill the job applications like workday one. I know some extensions exist that are similar but they are not really that efficient...or if you could point me to a similar resource. Thank you for this video and your help :)
@Aced_Dreamer
@Aced_Dreamer 2 жыл бұрын
This was pretty straightforward
@aaronmarroquin2636
@aaronmarroquin2636 Жыл бұрын
What if you wanted to keep an extension from injecting code on a site? Is this possible?
@soumyamondal
@soumyamondal 2 жыл бұрын
My chrome is not recognizing Manifest.json file
@datgirl2760
@datgirl2760 2 жыл бұрын
mine too, I can't upload it on extensions
@datgirl2760
@datgirl2760 2 жыл бұрын
update me if you find a solution!
@soumyamondal
@soumyamondal 2 жыл бұрын
@@datgirl2760 I found solution, We need to select the whole folder, not the specific json file.
@datgirl2760
@datgirl2760 2 жыл бұрын
@@soumyamondal thank you for the tip but it didn’t work. Did watch a video tutorial or something of that sort to fix your error. Could you share it with me?
@soumyamondal
@soumyamondal 2 жыл бұрын
@@datgirl2760 wherever you have the manifest file, come to he main folder of it, then single click select it, choose 'select folder' from bottom right. I hope you're using Windows.
@ushiksinghal816
@ushiksinghal816 Жыл бұрын
someone please send the code
@ilovejesus3959
@ilovejesus3959 Жыл бұрын
First of all, whats your pfp? second of all, you are supposed to follow the video, instead of just using the same code.
@AviatingRandom
@AviatingRandom 2 жыл бұрын
you didnt even give us where to paste that code from
@mr.grotto
@mr.grotto Жыл бұрын
No clue how to do this in windows 10 instead of Mac. I could fumble around in the dark I guess.
@jorgegonzalez4720
@jorgegonzalez4720 2 жыл бұрын
Is this still working for anyone in 2022? It's not working for me 🤔
Full Tutorial | Building a Chrome Extension in Typescript and Vite
32:58
I Made a Chrome Extension
5:46
conaticus
Рет қаралды 369 М.
Cat Corn?! 🙀 #cat #cute #catlover
00:54
Stocat
Рет қаралды 16 МЛН
Clowns abuse children#Short #Officer Rabbit #angel
00:51
兔子警官
Рет қаралды 73 МЛН
УГАДАЙ ГДЕ ПРАВИЛЬНЫЙ ЦВЕТ?😱
00:14
МЯТНАЯ ФАНТА
Рет қаралды 3,3 МЛН
Build an AD BLOCKER Chrome Extension in Less Than 10 Minutes
8:06
11.4: Chrome Extensions: Background Scripts - Programming with Text
16:20
The Coding Train
Рет қаралды 156 М.
How To Debug React Apps Like A Senior Developer
21:07
Web Dev Simplified
Рет қаралды 57 М.
The ULTIMATE Browser Tier List (Based Tier to Spyware Tier)
39:19
Eric Murphy
Рет қаралды 2,1 МЛН
What Happened To Google Search?
14:05
Enrico Tartarotti
Рет қаралды 3,1 МЛН
Coding A Chrome Extension in JavaScript Tutorial
23:03
PedroTech
Рет қаралды 74 М.
Cat Corn?! 🙀 #cat #cute #catlover
00:54
Stocat
Рет қаралды 16 МЛН