Build a Chrome Extension With React & Webpack

Thank you for your tutorial!

Note : render is depreciated , you can use instead :--
import { createRoot } from 'react-dom/client';
const container = document.getElementById('react-target');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<Popup/>);

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

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

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

Very clear and helpful info, thank you a lot)

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

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

thanks a lot! very helpful

Awesome explaination, really helpful.

beautiful

nice video

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

Thanks man, really helpful.

Thank you very much !!!

this video is insane, extremely helpful, thankyou

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?

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

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'".

Excelent.

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?

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

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

Super!

Perfectly explained, thanks!

REALLY outstanding. Thanks!

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

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

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

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?

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.

Source please

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

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

thank you for your time and consideration great video

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!

Amazing.

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.

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

Loved how you explain step by step, thank you!

Thanks man. This was really very helpful video.

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

I prefer quasar with vuejs bex

Greate ui components, utls, and services

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

Amazing tutorial from start to finish :) Well done!

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'],
},

Thank you very much sir