Chrome Extension Development Tutorial | How to Build & Publish a Chrome Extension in 13 Minutes?🔥

preview_player
Показать описание
Hey guys, In this video, We're going to develop our very own Google Chrome Extension in a few simple steps. This extension will fetch a random Joke every time a user clicks on it.

__________________

🥳 Join our Telegram Community:

🚀 Follow me on:

💸 Use coupon code ANUJBHAIYA on GeeksforGeeks to avail discounts on courses!

Hashtags:
#anujbhaiya #chrome #extension
Ignore these tags:

chrome extension
anuj bhaiya
chrome extension development
how to make chrome extension
how to make a chrome extension
chrome extension tutorial
how to create chrome extension
create chrome extension
how to create a chrome extension
anuj bhaiya chrome extension
chrome extensions
extension
google chrome extensions
make chrome extension
build chrome extension
google extensions
chrome extensions for students
how to add extension in chrome
chrome extension project
how to build chrome extension
what is chrome extension
extension for chrome
how to build a chrome extension
extension chrome
how to create extension for chrome
anuj bhaiya extension
how to make chrome extension in javascript
how to make extension
build a chrome extension
chrome extensions development
chrome extensions tutorial
chrome extension development tutorial
chrome extension anuj
anuj
anuj kumar sharma
browser extension development
create extension for chrome
google chrome extension development tutorial
make a chrome extension
google chrome extension
google extension
anuj bhaiya chrome
best extension for chrome
chrome extensions on android
create chrome extension using javascript
how to make google chrome extension
javascript tutorial
chrome
how to make an extension
how to make extensions
anuj bhaiyya
apna college
create a chrome extension
creating chrome extension
how to make browser extension
web development projects
best chrome extensions
extensions for chrome
google extensions for students
how to make a google chrome extension
making a chrome extension
chrome api
chrome customization
chrome developer tools tutorial
how to make google extension
love babbar
useful extensions for chrome
anuj bhaiya web development
best chrome extension
build chrome extension with javascript
cool extensions for google chrome
dashify chrome extension
develop chrome extension
extension build
how to create a chrome extension in python
how to make a extension for chrome
java anuj bhaiya
javascript
javascript project
making chrome extension
react chrome extension
web development
youtube extension for chrome
angular tutorial
anuj bhaiya github
anuj bhaiya java
anuj bhaiya project
api tutorial
atlassian interview
chrome chrome
chrome extension javascript
encapsulation
extension google chrome
google
java by anuj bhaiya
js projects
kunal kushwaha
striver
vpn extension for chrome
youtube video download extension chrome
aesthetic chrome extensions
ai tutorial
ajax tutorial
angular project tutorial
anjani putra full movie hindi dubbed
anuj bhaiya amazon
anuj bhaiya android development
anuj bhaiya dsa
anuj bhaiya python
anuj bhaiya resume
anuj jindal
api based projects
apni kaksha java
array rotation in java
b tree
bangladeshi food review
behindwoods anand srinivasan
best chrome extensions for youtube
best dark mode extension for chrome
best extensions for chrome
best extensions for students
best google chrome extensions
best time to buy and sell stock iii
bootstrap website
browser extensions
c++ in one video
callback function javascript
chrome extension code with harry
chrome extension react
cloud computing aws
code chrome
code with harry chrome extension
cool chrome extensions
creating a chrome extension
data structure by harry
database normalization
dba tutorial
display flex in css
dsa with java
ext js tutorial
extension chrome android
extension youtube
extensions
extensions chrome
extensions google chrome
file extension in computer
full stack web development
gate 2022
geeksforgeeks
get saged
google chrome
google chrome extensions for students
google extension for pc
Рекомендации по теме
Комментарии
Автор

ATTENTION : In Manifest version 3, "Browser_action" has been replaced by "action"

isha_ch
Автор

IMPORTANT: If you watch this video in 2022 then manifest version 2 is updated to manifest version 3 in which case this code will show errors.

abhishekpalshorts
Автор

Bhaiya ek full stack pe aap video bnao aur sath me ek project bhi usme bna ke bta do jo resume ke liye bhi use ho jaye😊

yt_viksh
Автор

Please continue with android development series with more advanced projects 🙏🙏

_obito
Автор

Hey everyone, while following this tutorial on Chrome Extension Development, I encountered an error in the code. To help others navigate this issue, here's a clarification:
1. Logo Image Display Issue:
- If the extension's logo image is not displaying, try using a different image. This change should resolve the problem.

2. CSS Correction - `display` Property:
- The correct values for the `display` property in CSS are `flex` or `inline-flex`, not `inner-flex`. Update the CSS code as shown below:

```
body {
width: 300px;
height: 300px;
background-color: aliceblue;
display: flex;
justify-content: center;
}
p {
display: flex; /* or inline-flex */
margin: auto 10px;
font-size: 22px;
color: blue;
border-radius: 6px;
border: 1px solid lightblue;
padding: 10px;
}
```

3. Manifest Version and Browser Actions Update:
- In Manifest version 3, use `"manifest_version": 3` and replace `"browser_action"` with `"action"` in the `manifest.json` file as shown in your provided code snippet.

```
{
"name": "Dad Jokes",
"version": "0.0.1",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "logo.png"
}
},
"permissions": ["activeTab"]
}
```

4. Version Number Requirement:
- Ensure the version value is non-zero and between 1-4 for 2024 Chrome Extension development. For example, `"version": "1.1.2"`.

Happy coding and may your extensions shine bright! 🚀✨

govind-
Автор

*Note:* if you're doing it in 2023, make sure version vakue must be non-zero,
For Ex :- "version" : "1.1.2",
And also numbers must between 1-4 only!

shivanshjhamtani
Автор

Wow that's really amazing. Bhaiya following you from last 3 years.. Really get some good ideas to add projects in my resume. Thank you Bhaiya ❤️

arushigarg
Автор

I am so happy that I learnt something new today :D. For anyone facing issues with manifest_version, currently 2 is depreciated so use 3 and change browser_actions in manifest.json code as follows :
{
"name" : "Dad Jokes",
"version" : "0.0.1",
"manifest_version" : 3,
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "logo.png"
}
},
"permissions" : ["activeTab"]
}

a-girl-has-no-name
Автор

@anuj Bhaiya can you reccomend some websites where we can get different apis

GauravSingh-dmrx
Автор

Manifest v2 is deprecated and support will be removed in 2023
What to do now? Please help bhaiya
Can't Load Json File because of it.
Try V3 but same issue.

smeetcoder
Автор

{
"name":"Jokes",
"version":"0.0.1",
"manifest_version":3,
"action":{
"default_popup":"popup.html",
"default_icon":"logo.png"
},
"icons": {
"128": "logo.png"
},
"permissions":["activeTab"]
}

This is the manifest version3 code if someone is looking for that here it is

RonakS-nfvj
Автор

Thank you bhaiya, really want to try this but kha se kre wo nhi pta tha

AnkitKumar-jmcz
Автор

Loving your DSA series. It really helped me a lot .

sanketmathur
Автор

Want more cool projects for my resume and learning purpose please keep uploading..this was so easy to understand and implement thankyouu!!

sukritisingh
Автор

Yesterday only I took inspiration from your project ideas video and started learning chrome extension
today you came up with the ki baat kaise padh lete ho bhaiya 😃....kai baar hua hai aisa ki kuch padh rha hun aur agle din aap usi pe video bana dete ho

mohitkanojia
Автор

Simple, amazing and beginner friendly 👍❤️

iarghya
Автор

A little explanation about fetch() and then and callback function would be useful.

princekm
Автор

Wow that's a good one, it's good to see these kind videos on your channel along with the DSA course that I am following, love your content.

foreducation
Автор

This is absolutely a new thing that I learned today thank you so much bhaiya

yourssanjeetsingh
Автор

I am not in a cs student but i am interested in coding and learning from YouTube. I want you to make a video to guide such students like me ❤️❤️. Thanks bhaiyaa 🙏.

anilsuthar