Build a Chrome Extension With React & Webpack

Thank you very much sir

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

Amazing tutorial from start to finish :) Well done!

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

I prefer quasar with vuejs bex

Greate ui components, utls, and services

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

Thanks man. This was really very helpful video.

Loved how you explain step by step, thank you!

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

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.

Amazing.

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!

thank you for your time and consideration great video

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

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

Source please

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.

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?

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

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

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

REALLY outstanding. Thanks!

Perfectly explained, thanks!

Super!

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

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

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?

Excelent.

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

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

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?

this video is insane, extremely helpful, thankyou

Thank you very much !!!

Thanks man, really helpful.

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

nice video

beautiful

Awesome explaination, really helpful.

thanks a lot! very helpful

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

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

Very clear and helpful info, thank you a lot)

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

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

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

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/>);

Thank you for your tutorial!