How to Make Chrome Extension in HTML CSS & JavaScript | Color Picker Extension in JavaScript
HTML-код
- Опубликовано: 16 май 2024
- In this video, I've shown How to Make Color Picker Chrome Extension in HTML, CSS, and JavaScript. In this color picker, users can easily pick any color on the screen, see the picked colors, and copy or clear them with a single click.
Download Color Picker Extension's Icons Only:
drive.google.com/file/d/1FPIX...
Click this link to download codes and a detailed explanation of this extension
www.codingnepalweb.com/create...
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Timestamps:
0:00 Demo of Extension
2:00 HTML & CSS Start
9:00 JavaScript Start
9:26 Opening Eye Dropper & Getting Picked Color
12:36 Storing & Fetching Picked Colors from Local Storage
18:53 Copying Selected Color to the Clipboard
21:36 Removing All Colors on the "Clear All" Click
25:03 Creating manifest.json file
26:02 Uploading Extension to the Chrome
Icons credit: www.flaticon.com
Music Credit:
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Ikson - Lights [Official]
• #32 Lights (Official)
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Thank you for making beginners like me really fun to practice =)
This channel makes me fall in love with vannila Javascript so much❤❤
It amazing video, Thank you so much😊
OH MY GOD. THIS IS LIKE ADVANCED JAVASCRIPT BUT EASY FOR NEWBIE TO LEARN. I code along with you and successfully built as intended. Thank you so much! There are many new things I learn in this one video only. You are so talented!
I'll repeat this coding process to make sure I understand what I learnt. Thank you so so much! You are a great person for teaching us!
I can't believe it's that easy to create a Chrome extension! I really appreciated this tutorial, thanks so much!
You're welcome!
This is very nice, keep up the good work!
Maaaaaaaaaaaannnnnnnnnnnnnn!!!! Absolutely, A masterpiece😍😍😍...It's incredible to see that making a chrome extension is that easy, I wasn't expecting that. Thank you soooo much for making this video🤩😍🥰
At 10:30 the correct Code is
const eyeDropper = new EyeDropper();
just capitalize first letter of EyeDropper and all set
The best training I have ever seen on JavaScript, thank you very much🙂🙂✅✅
You're very welcome!
Thank you.
Do you know how to make a highlight extension that show highlights on text when it runs.
I just love what you are doing you are a great developer. God bless you more and more
Thank you so much!
@@CodingNepal Anytime I went to React interview they interviewer gave me coding challenge in Javascript not React so I was shocked. So the content here is very useful for us to grow as Javascript developers
@@CodingNepal I was asked to build application that accept two input which is hours and minute of a displayed clock for a user to use the input boxes to change the time according to the minute and hour. I was given only 12 minute for this.
wow very important tutorial nice job! this one is new to me thanks alot bro. a like is on the way for you.
Much appreciated
❤ love this
Really thank you for this and can you add auto detecting environment...
Vivaan...
Thank you so much sir..♥️♥️
Please make video on how to hide mobile menu when we slide left if it is open from left just like gmail or linkedin mobile menu.when we slide it goes off screen
Ajoyib 👍👍
Wow Nice bro
reply please at 11:00 ReferenceError: Cannot access 'eyeDropper' before initialization
at HTMLButtonElement.activateEyeDropper
If you use let/const with function expression maybe there should be semicolon in the end, like this };
May be you are not doing it intentially/forget/something else, but maybe you will find in interesting.
Anyway, thank you for your work, every single tutorial is unique, every time here is something new, diiferent, usefull. This is something.
In JavaScript, it is not mandatory to add a semicolon after the end of a function expression that is declared with const or let.
However, it is a best practice to include a semicolon after function expressions and other statements in JavaScript to prevent issues with automatic semicolon insertion (ASI).
I have a problem with picking color. I figured out that it happens bc of 2 monitors. While i am working on my main monitor, eyedropper picks color from my second monitor while my mouse is on the first one. Cant find any info about this issue. Without extending monitors it works fine
Hi, i am getting error "ReferenceError: Cannot access 'eyeDropper' before initialization"
When i click on pick color ... At 11:00
Code Is Perfect...
And EyeDropper Also Not Opening
Can you make a account system, with login, register and remember pass
This video is incredible thanks
Happy to hear :)
Hi! I remember when you create forms (register, forgot password) before 2 years. But how to make 2FA with forms
Eye Dropper Is Opening Using Extension But Not In Web Site...
More, please
It has some issues on linux ubuntu Chrome/Chromium/Firefox. If you publish another way i'll be so glad :))
super
Amazing 😍
Thank you!
many thanks bro😇
You're welcome!
From where did you learn javascript?
Brother uploading on chrome extension will not cause copyright problem.
reply plzReferenceError: Cannot access 'eyeDropper' before initialization
at HTMLButtonElement.activateEyeDropper
Awesome ❤️
Thanks
I followed your code as it is but when I uploaded it on the chrome it is giving an error in the function definition of showColors and that line is
if(!pickedColors.length) return; //first line of the function
And error is:
Uncaught TypeError: cannot read properties of null (reading 'length')
Stack Trace
script.js (anonymous function)
Can you explain why this error and how to resolve it ??? Plzzzz must tell me I want to upland my first extension thanks to you but I don't know why this error😢😢
Could you please create a text extractor in chrome extnsion it would be very useful
Can you explain more..?
Like extracting any text from the captured image
I like your suggestion bro good one
@@SKBD01I use blackbox, extension is perfect and work really good, it is easy to use.
You should try it, she is very popular
can u please make a video on "alarm clock with challenger"
Here is the video: ruclips.net/video/coj-l7IrwGU/видео.html
@@CodingNepal make a video on Challenger alarm clock
color and colour
Hii do you know how to fix this error, "ReferenceError: Cannot access 'eyeDropper' before initialization
at HTMLButtonElement.activeColorPicker"
It should be const eyeDropper = new EyeDropper();
Double check this line.. Maybe you've written eyeDropper() instead of EyeDropper()
@@CodingNepal I had the same issue. Thanks for helping and @FarukSardar for raising the issue.🌻
Second bcz everyone is first *
😂😂 Hope you enjoyed the video!
Is it possible to do this in replit? I think it is possible because I can code it then download it, anyway please tell me your thinking.
Yes
@@mahanta9611 how?
well you can just use the same technique you just said and then download fine no need of extra ide
at 10:54 it says "cant access 'eyedropper' before initializing" what should i do i wrote everything as you wrote
i found it i used
const eyeDropper = new EyeDropper();
same problem comes with me......if you found the solution please help me too
@@rohitjain7098 const eyeDropper = new EyeDropper();
@@rohitjain7098 The second EyeDropper should be wrote like that
3:00
Please build make post comment with HTML, CSS and JavaScript and see all other people's comments, please tutorial!
I got this error : ReferenceError: Cannot access 'eyeDropper' before initialization
at HTMLButtonElement.activateEyeDropper (index.js:5:28)
It should be const eyeDropper = new EyeDropper();
Double check this line.. Maybe you've written eyeDropper() instead of EyeDropper()
@@CodingNepal now i got this : ReferenceError: EyeDropper is not defined
at HTMLButtonElement.activateEyeDropper (index.js:7:28)
@@crishl19 " const eyeDropper = new EyeDropper(); " worked for me
@@yvng4697 I changed it but now I got new error .
@@crishl19 did u write everything correctly?
Plz make us snake game.
Okay, I'll try to make video on it!
Do you have any tutorial on "Earn money from Chrome extension selling".
Not yet!
@@CodingNepal would you please make it on priority basis in the next upcoming release?
If your extension is useful to the users, there are several ways to monetize it, but the two most common methods are:
1. Offer a premium version of your extension with additional features or support for a fee.
2. Sell advertising space within your extension.
If possible, I'll try to write a blog on this topic on www.codingnepalweb.com.
@@CodingNepal The Sound is good,
We are looking forward to your lovely cooperation and positive effort.
🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲
Hi, i am getting error "ReferenceError: Cannot access 'eyeDropper' before initialization"
When i click on pick color ... At 11:00
Code Is Perfect...
And EyeDropper Also Not Opening
reply plsease ReferenceError: Cannot access 'eyeDropper' before initialization
at HTMLButtonElement.activateEyeDropper
Hi, i am getting error "ReferenceError: Cannot access 'eyeDropper' before initialization"
When i click on pick color ... At 11:00
Code Is Perfect...
And EyeDropper Also Not Opening
Hi, i am getting error "ReferenceError: Cannot access 'eyeDropper' before initialization"
When i click on pick color ... At 11:00
Code Is Perfect...
And EyeDropper Also Not Opening
i have same problem how to solve this did you find any solution to this problem
Hi, i am getting error "ReferenceError: Cannot access 'eyeDropper' before initialization"
When i click on pick color ... At 11:00
Code Is Perfect...
And EyeDropper Also Not Opening
@@tanishashrivas1198 yes I tried thanku..