Build a Chrome Extension With React & Webpack

Learn how to build your own chrome extension using react, nodejs and webpack. You will go from the very basics until the point where you will create a functional chrome extension.
0:00 - Intro
1:23 - Chrome Extension Files Setup
3:20 - React Setup
4:58 - Webpack Setup
6:31 - Webpack Entry
7:06 - Webpack Output
8:57 - Webpack Loaders (Babel Setup)
11:33 - Webpack Plugins
13:54 - Extension Setup in Browser
15:39 - Webpack Production & Development Setup
____________________________
Follow Me
Website - www.codifytools.com
Twitter - / juanpmd
Courses
ML Model Deployment with Flask, React & NodeJS - www.udemy.com/course/machine-...

[@sanujatharinda6525]

You explained 2 hours worth of content in just 17 minutes. Thank you very much...

[@Jaayy]

Criminally underrated. If you have the time you need to be the savior of coding tutorials on youtube

[@dumitru12cosmin]

I loved how clear you explained all those concepts I spent hours trying to understand. Great job!

[@TahaCrafter]

Thank you so much, very clear explanation! I can't believe you only have 80 subscribers, youtube algorithms are not fair, it should rank your videos much higher to get the number of subscribers that you actually deserve.

[@lookwhoneedsahobbie]

Amazing tutorial. Answered all my questions. I especially love automating 'npm run build' on changes at the end. Thank you!!

[@shahriarparvezshuvo4760]

Right on to the point. Please do more video like this. Your explanation is very clear. 👌

[@sunkanmiolaleye1799]

One the best tutorials I have seen. Thanks for sharing.

[@nevenpanchev441]

Amazing tutorial from start to finish :) Well done!

[@talatkuyuk6556]

Hi, you are awesome. You give very clear explanations. Hope you continue to make youtube tutorials about nodejs-react-chrome extension including script injection, service workers etc. Thank you very much again, I've subscribed, liked and get always notified.

[@CemKaraca]

Loved how you explain step by step, thank you!

[@uppadaavinash3338]

Awesome video, cleared all my doubts on react chrome extention. Great job!

[@ginebro1930]

The best video out there about this and the channel has only 1 video, insane.

[@robinbeaudru6892]

Underrated video, thank you so much.

[@hubertryan]

Thank you so much! I wasn't wanting it to end!!!!! thank you!!!!!!!!

[@proyas21]

This video is the best among all other videos I have watched on this toping in KZbin. Please keep making these awesome videos and please please please continue this topic. 👏👏

[@proyas21]

@@codifytools thank you so much you are the best. 😄😄😄

[@321123580]

Very clear and helpful info, thank you a lot)

[@dani5318]

this video was incredibly well made, thank you for this :D

[@mollu7522]

Your tutorial helped a lot! Thank you for your videos!

[@anujchoudhary859]

Thanks man. This was really very helpful video.

[@flavioherrera3792]

this video is insane, extremely helpful, thankyou

[@MrLmao9]

Perfectly explained, thanks!

[@BryantCobarrubias]

Great video. One thing tripped me up while setting up Webpack, at 12:20 you glossed over adding the line "const HtmlWebpackPlugin = require('html-webpack-plugin');" to the top of webpack.config.js. It took me a quick trip to stackoverflow to figure it out. :)

[@ironsand]

REALLY outstanding. Thanks!

[@rayfront7390]

this is very helpful, thank you

[@AntonKlimkovich]

Thanks a lot! Great content.

[@bharatkumar-be9ki]

Awesome explaination, really helpful.

[@user-ng1gk2up6n]

It's a great video It's very helpfull, i am hoping more video about this topic

[@clics-sk9fq]

thanks a lot! very helpful

[@simpleneeraj]

Super and awesome 👌 explains, Because I searched on Google lot of but nothing find helpful. Keep it up making playlist of chrome extension tutorials. And......... ❤❤❤❤❤❤❤❤

[@almogidisis274]

Wow. I really never wanted it to end, well done!

[@wadhahag8053]

thank you for your time and consideration great video

[@mrsam683]

Thanks man, really helpful.

[@mrsam683]

@@codifytools I have a question though regarding what you say at 6:40. I thought that the manifest will inject the background file anyways, so why would I need to define it in the webpack.config.js as an entry point? Also, if I define content script in the manifest that get injected on certain webpages, do I need to add them in the config aswell?

[@vivekranjan437]

thanks for this tutorial

[@DokebiAgent]

Thank you very much !!!

[@alinazari4131]

Thank you for an awesome video! I had some issues with my build command in package.json and had to add the following: "export NODE_OPTIONS=--openssl-legacy-provider;" so it looked like this: "build": "export NODE_OPTIONS=--openssl-legacy-provider; webpack --config webpack.prod.js". I did the same for my "dev" script. Looks like it's an issue with the latest version of Node. Hope this helps anyone who comes across this error when running npm run build command.

[@user-cc3rn8ve2m]

beautiful

[@churraskindequeijo8418]

Thank you very much sir

[@hubertryan]

YOU ARE DA BEST

[@mariomsumi822]

Amazing.

[@takeshi_chin]

Amazing tutorial. Now I have to figure out how to use TypeScript in that project.

[@takeshi_chin]

@@codifytools I'll definitely check the blog post! Your explanation was one of the clearest I've ever seen/heard.

[@ThiwankaKasun]

nice video

[@user-pk1nw1is6c]

Super!

[@vanguard6712]

Thank you for an informative video. Totally unrelated topic! May i know the VS Code plugin that you are using in this tutorial which autocompletes your code? especially at 12.22

[@hiratlt]

If the extension shows a blank page: Name the function in popup.jsx starting with an uppercase, for example: popup() is wrong but Popup() is right. I don't know why it doesn't let you use lowercase but this was the fix that solved my problem. Thanks for the video.

[@lucasmendonca2197]

Hi, great video! One thing that would also be useful is to configure hot reloading, so we don't need to click the update button at chrome://extensions after every file changes. Is this possible with chrome extensions?

[@tommymaher4166]

This is awesome. Would love to see some stuff surrounding fetching data from source has I'm having some trouble finding material to do this with mv2 on react for some reason.

[@tommymaher4166]

@@codifytools Turns out this is a bit tricker than I've thought but I'll most likely add what I've learned here so someone else can see.

[@tylerdurden9676]

I just skimmed through this. Does this include hot reloading, or do I have to manually reload the extension? You should make the text editor font bigger when you are recording videos.

[@Lucas-mp5dw]

remember to add in webpack.config.js the code below if creating other files named (jsx|ts|tsx), otherwise you will get import errors while building the code. resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], },

[@ipdmartins]

Excelent.

[@robinbeaudru6892]

Hey, thank you for the video, but could you explain how to integrate ContentScript and BackgroundScript ? It is pointless without it!

[@ohchloeho55]

Hi, thank you so much for this video! I'm trying to link an external CSS stylesheet to the jsx file but it doesn't seem to work, is there a way to do this and have the webpack configure the creation of the stylesheet and the import?

[@codekhalipha7759]

How can we add content_script so we ca interact with web page Thanks for this great tutorial

[@aswathyraj1414]

can you please provide the link to open the extension in a new tab during dev ? its not working on mine

[@mikeguoynes2493]

If you run into any issue with [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default, then upgrade your node version. I installed nvm and upgraded to 14

[@AbhinandanMishra1]

It's a great request. Create the chrome extension tutorials from start to end. How to access local storage of current web page? How to change data in current page? How to implement different functions of JavaScript as we do very easily for our web page? Content.js Background.js working of other parts.

[@robinbeaudru6892]

Check Google Chrome Documentations but you can declare ContentScript and BackgroundScript into the manifest.json. I don’t know if the location of the file is important as you can declare the path into the manifest.

[@robinbeaudru6892]

Ok my bad, go to 7:06!!

[@aymenmaamri2459]

hello everyone, i am currently working on an extension and i want to build the user interface of the extension in a modal/popup window that the user can move across the page and don't lose focus when the user clicks elsewhere

[@donmikkodanm.olmillo8154]

Hi, I love your video and tutorial, would love to ask what's your extension on 4:00 where it is automatically filled up? thank you

[@donmikkodanm.olmillo8154]

@@codifytools Thank you so much for the responsive reply, I was gonna guess it's copilot but many devs are fighting whether it's great or not. Anyways I love your videos, hopefully you can make a series for beginners like me

[@donmikkodanm.olmillo8154]

@@codifytools Thank you!

[@madmaxhasan]

Can you share what extension you use in vs code? The hint they provide is fantastic.

[@madmaxhasan]

@@codifytools As expected. :(

[@binodchaudhary17]

Greate tutorial! I tried to inject content script to gmail inbox but get an error => Uncaught Error: createRoot(...): Target container is not a DOM element. any solution?

[@navuyi3243]

Is there a way to write unit tests using Jest or something similiar???

[@navuyi3243]

@@codifytools I encountered several problems with jest and similiar frameworks. It throws errors with inability to use import/require outside a module, cant get it working

[@juksaaapersin]

I appreciate your effort but you forgot to mention an important step like configuring multiple entry points for content scripts. Also, if someone adds another entry point to this config, their entire JS will be bundled and linked with their popup.html (it must be configured in HtmlWebpackPlugin object with chunks). Also, stuff like css/sass, imgs, etc. I think that would be an important thing to mention if you already showed this entire process. Just a tip for your future videos. Cheers.

[@juksaaapersin]

@@codifytools Great man! Just a little constructive criticism, I am glad you understand. Looking forward to the video!

[@kaartiknagarajan5009]

@@codifytools Hey thank you so much for this video. Any updates on the video series?

[@kaartiknagarajan5009]

@@codifytools Got it, super content! Hope production goes well as this tutorial was incredible and I'm sure your series will help a lot of people!

[@fareedezzedeen8017]

I prefer quasar with vuejs bex Greate ui components, utls, and services

[@sunilharak7645]

I'm getting error :Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

[@pavanobhan1105]

I want to be able to scrape html tables and download csv using chrome extensions, how do I develop that? I followed ur tutorial till here. I have an interview on same, please reply

[@pavanobhan1105]

@@codifytools I am able to do it in Node JS, but I’m unable to integrate node js with extension

[@koaladlt]

Hey there! Thanks a lot for this video. I'm having an issue and it's happening after dev and prod webpack setup. After running npm run build or dev, I'm having this error: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.node should be one of these: false | object { __dirname?, __filename?, global? } -> Include polyfills or mocks for various node stuff. if you have an answer, it'll be great. Thanks a lot!

[@koaladlt]

@@codifytools You would not believe this, I was typing "node" instead of "mode" all the time 😂 Everything's working great, thanks a lot for this video!

[@02_kdz]

@@koaladlt I was doing the exact same thing lol. thanks!

[@koaladlt]

@@02_kdz Things happens lol!

[@celestialgatewaycg]

I think I did something wrong, whenever I open a new tab, instead of the new tab itself, my extension page opens with the following error, "Your file couldn't be accessed It may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND"... anyone else with this problem?

[@celestialgatewaycg]

@@codifytools thank you so much :D

[@JeetPaul]

I don't think HMR is supported here, can we trick it?

[@JeetPaul]

@@codifytools I tried it in many way, seems like rract refresh thinks it is as production environment and doesn't estabilish the ws connection 🤔 Maybe I'm wrong

[@Akkihearts007]

Source please

[@rude_boyie]

Broh you do you only have one video of coding put out more

[@fareedezzedeen8017]

Try to use a larger font size, please. 57+ years old developer

[@fareedezzedeen8017]

@@codifytools Thanks a lot 🌹🌹🌹

[@athipsirisawetkunwong4658]

ผมรันไม่ได้ครับพี่ชาย

[@aliraza.r10]

Hi, you are awesome, this video help me a lot thank you. just had issue in 9:30 that I solved. { test: /\.(sj|jsx)$/, } did not worked for me when the file is ( .js ), But when I changed it to { test: /\.js$|jsx/, } it was working.

[@symbol767]

THANK YOU! I was wondering why my code wasn't working, this fixed it!

[@aliraza.r10]

@@symbol767 😊😉

[@randomapperatus3773]

Seems like there should be a way to do this with far less steps in the world of "productivity".