Create a Google Chrome Extension (For Beginners)

[@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]

tysm I was watching and google kept giving me errors

[@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]

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]

@@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?

[@TheLanceGamer]

This opened my mind 10x instead of using c# to control the browser Use this 😂

[@ieatwebsites]

🤯

[@eugenem529]

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]

thanks

[@luonghuuthanhnam]

god bless you :v

[@Neon-CorollaVirus]

Thanks

[@dangresys3795]

youre a legend thanks!

[@Timooooooooooooooo]

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]

Thank you so much timo! Yes! Sometimes I focus on thing that are not very important 😂

[@guywholikesbreathing1263]

@@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]

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]

@@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]

@@ureo_umbreon8601 yes tht would be very helpful

[@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!

[@hassanjamil841]

Pretty simple and to the point, for beginners like me.

[@FriedMonkey362]

Not to the point at all he spent 1/3 talking about images so he could reach 10 minutes and monitize

[@acloudyboy]

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]

ur awesome

[@lorlor9008]

They should pin your comment👍

[@iamPressureMan]

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]

That’s great! You are very welcome.

[@devbites77]

A nice ‘hello world’ for chrome extensions. Thanks! Looking forward to diving in.

[@ieatwebsites]

You welcome! 😄

[@brandonochia9043]

This was a great intro video. Thank you so much! Definitely going to play around with chrome extensions now!

[@ieatwebsites]

Thank you!!

[@wilson_]

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

[@theinvokerdarksoul3356]

I'm grateful for the knowledge that you have given me, truly a good place to start.

[@captainT0ad]

the code didnt work for me idk why, can you put it somewhere so that i can copy and paste it?

[@pulograine]

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!

[@nipunpeiris]

Really helpful mate! Great content! Wish you will create more content like these! Good luck! 😊

[@ieatwebsites]

Thank you so much. 😁

[@umairiqbal7646]

.json file not showing up in load unpacked

[@chrisder1814]

hello I had an idea but I don't know if it can be done with a chrome extension, could you tell me what you think about it

[@Borma425]

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]

Glad you liked the videos. You are welcome! 😁

[@Leprogrammeurmarocaintv]

Thank you a lot for this tutorial need more tutorials if possible about creating chrome extensions.

[@wulfmaer8919]

Great starter tutorial! Thank you!

[@photonicsauce7729]

Can you make a video for manifest version 3? Ig this is outdated

[@desenvolvedor5digibyte591]

Best intro on how to create extensions for Chrome, thanks

[@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?

[@RebellionAlpha]

Will manipulating page css stop working, because Alphabet is Implementing Manifest v3 right now?

[@aswanaswan6732]

why there is no chrome extension tutorials , there is just videos like this that shows you how to install google chrome

[@akshi9046]

the image for the background of the search engine isn't working for me. any ideas why?

[@A7mad3109]

can i have the manifest.json file so i can copy and paste

[@GreenLyfe00]

wholesome video

[@allesprobieren]

Such a good tutourial.

[@AmlizeagaGaming]

how do i get those shadows on the window corners on windows 10, like the old ones

[@ap74249]

Thanks man!

[@jozsi26]

Thank you, this was a great way to start learning Chrome development! Awesome!

[@saidalkharusi7824]

You're a life saver, just what I wanted. Thanks!

[@beautifullgirls8289]

i want to add JavaScript and do automatic things like checked in 1000 cells ratio

[@Visoriz]

You can probably do that by calling the js in the json

[@yurisoares2596]

I already made mine, but I'm getting stucked by security bs(not really) and my js script isn't running.

[@yeetgaming6720]

fudge I'm on a Chromebook I need to learn how to make files on this thing

[@kumarrparth]

I have done all the things correct but the extension isn't loading

[@thebluemasteryt3473]

where can i find the script for manifest.json?

[@ajaymain3739]

What a clear explanation man, really appreciable 🙌🙌🙌, great

[@sachindeveloperko8424]

😀 thank you for making tutorial

[@ieatwebsites]

You are very welcome. 😁

[@adammartinez6033]

I just did it for the first time! Awesome video! Thank you!

[@مراد13]

🙋im here for first tim e for subscribing

[@Eamo-21]

This was great. Almost exactly what I was looking for. Guessing we can add an array of domains to matches?

[@eraysona7916]

thank you so much you inspired me

[@Sunny-tl6qg]

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]

I am also trying it right now but my extension is not activating do u know why ??

[@peterszarvas94]

Thank you!

[@bappi5702]

thanks man

[@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

[@monofruit5020]

Manifest version 2 will be deprecated, use version 3 and instead of "page_action" you shall put "action"

[@pragyajain1445]

my google background is not working i have followed each steps but still

[@mh69197]

Quick question: Is is required to register as a developer in chrome app store to upload and test your extension?

[@qedro]

To upload, yes, to test, no. To test, just enable the developer mode on the extensions page and upload your extension’s folder.

[@udhayasilambam96]

Great Thanks

[@Ti-03]

Thank you !! Keep going the good work ❤️❤️

[@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]

visual studio

[@amobeats8088]

@@andper0 Thanks

[@Visoriz]

It's Visual Studio but you can just do it with file explorer if you want.

[@amobeats8088]

@@Visoriz Thanks bro

[@saeedsaeedi1310]

thank you

[@spillehunden]

Can i have the start you copy pasted in to the document at the start?

[@Bagwah]

How do I get the star that makes it a "wildcard"?

[@armaanoo]

I am just starting out. Dumb question: But what's the IDE on the left? How do I get that?

[@armaanoo]

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]

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?

[@sivamech9140]

how the photo link came from where u used in CSS

[@kazoottt4718]

thanks a lot

[@learningstuff5679]

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]

yeah

[@lnsinfotechsolution3016]

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

[@jamieplayz247]

Wers the browser u uysed to get that script up called\

[@fahimhossain6109]

Nice,I got what I needed,thanks ,such a clear explanation,love it

[@trevorPhillips284]

the backgroung image is not covering over 'images' 'gmail' and my account

[@empplayz]

I have: { "manifest_version": 3, "name": "YouHelp", "description": "Help with all things KZbin", "version": "1.0", "icons": { "16": "/images/icon16.png", "48": "/images/icon48.png/", "128": "/imgaes/icon128.png" } } and its not working :|

[@empplayz]

did i delete something i shouldnt have?

[@dumorando]

tysm!!!!

[@thewallstreetbusinesstrapp2761]

What software are you using to code?

[@ieatwebsites]

VS Code

[@DR.FRIZZY]

my exstention is still gray :(

[@stoicis]

can I use this in sublime text also?

[@ieatwebsites]

Yes!

[@thegreenfox011]

but how do i make it so it appears everywhere?

[@omarherrera.digmaster]

how can this extension be added as bookmarks ?

[@deprixionz5850]

It doesn't appear when I search things on google

[@RODIOMG7]

how do i do this but for youtube

[@LeviAckerman-tr9qu]

best for getting started . upload website permission based videos if you can.

[@Aced_Dreamer]

This was pretty straightforward

[@burado4020]

what is the difference between manifest v2 and v3 regarding this video ?

[@KcClips]

from 2023 manifest v2 will no more work

[@tasdau]

A beginner like me doesn't know what program you're using on the left side of the screen. I guess I need the pre-beginner...

[@harmandhamija1]

That's Visual Studio IDE.

[@spacemole]

It's vscode, this will work in any text editor

[@polymathematics_]

Super helpful! Thank you.

[@trxggeredtrash9273]

first, i havent even got 2 mins into the video and i wish i could ask u a question already. understand, im genuinely brand new to this so im aware this is entirely a learning process, so with that in mind i completely appreciate anyone willing to take effort/time into teaching me a valued lesson :) at about 1:15 , u mention you will copy and paste the, "basics," referring to the foundation of the browser extension itself, is how i understood when u refer to as basics. i thought it was a good idea, you've been through this before and if its about efficiency, i understand and agree. i suppose with all of that being said im wondering, as someone who's brand new to this, am i supposed to do my best to copy that from what i see from da video into my own empty folder, create a file within that folder, named "manifest.json" then i can do my best to copy down from the video what u refer to as, "basics," the same exact way you do? that's my first question, does everything need to look exactly like how u have it, correct? all same spacing and everything? because i cant exactly tell how many spaces are in between certain characters. could u break this down to me? or point me in the direction of a video/forum where i can learn what im asking? i would genuinely appreciate that very much:)

[@jujipotle]

hey! not sure how much coding experience you have, so apologies if i say something you alr know the person in the video is using visual studio code, and i'd suggest you download that since it's a pretty typical software among programmers. once you do, search up "visual studio code beginner tutorials" so you can get used to making files (which can help answer your first question). that'll also probably help you answer your second question about spacing, but regardless spacing doesn't really matter except for indentations (which you can do by pressing tab in visual studio code). lmk if you have any more questions, i'm happy to help!

[@trxggeredtrash9273]

@@jujipotle thank you! appreciate your thoughts and time :) gon go learn

[@mr.grotto]

No clue how to do this in windows 10 instead of Mac. I could fumble around in the dark I guess.

[@mathbrah]

How do I make my vs code look good like yours?!?!

[@ieatwebsites]

You can create your own theme or install a theme.

[@mathbrah]

@@ieatwebsiteswhat are your settings? Show pls!!!!!!!!!!!!!!!!!

[@vasaramadanovic8045]

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.

[@codewithegai]

make sure your file path is correct

[@Mujiboy]

You will have to Load the image as a separate file in the same folder

[@anilbadiger]

really cool for beginners thank you

[@ieatwebsites]

You welcome!

[@montanavfx]

What app do you use

[@ieatwebsites]

Vs code

[@montanavfx]

@@ieatwebsites thx

[@Revelatus]

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]

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.

[@chompplays1137]

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]

I would also like to know the answer to this

[@iDevourLotion]

how do i get that coding thing

[@xxwoman]

Oh my gosh this was great! Thank you, can I ask why manifest has to be set at 2?

[@KcClips]

it is 3 now

[@AviatingRandom]

you didnt even give us where to paste that code from

[@codematics8344]

thank you! will be building a chrome extension thanks to this tute

[@ieatwebsites]

Have fun!

[@auwalumar5350]

Who can help me create a Chrome Browser Extension for my SEO Tool website please ?

[@ibrahimseyam1621]

how can replace code

[@shadowsage9164]

What’s the app

[@jorgegonzalez4720]

Is this still working for anyone in 2022? It's not working for me 🤔

[@TaigiTWeseFormosanDiplomat]

New world！

[@soumyamondal]

My chrome is not recognizing Manifest.json file

[@datgirl2760]

mine too, I can't upload it on extensions

[@datgirl2760]

update me if you find a solution!

[@soumyamondal]

@@datgirl2760 I found solution, We need to select the whole folder, not the specific json file.

[@datgirl2760]

@@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]

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

[@That-------------------Guy]

I CANT FIND THE EXTENSIONNNN FILEEEEE!!!!

[@rangabharath4253]

Awesome thank you ☺️👍

[@ieatwebsites]

You welcome!

[@davidcolver2502]

Really clear.