This video is the best among all other videos I have watched on this toping in RUclips. Please keep making these awesome videos and please please please continue this topic. 👏👏
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.
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. :)
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.
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.
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'], },
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
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.
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.
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.
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
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.
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?
@@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?
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'".
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
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.
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?
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?
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?
@@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
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
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.
@@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
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!
@@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!
@@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
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.
![[Chrome Extension Tutorial] Build Chrome Extension with React & Typescript](http://i.ytimg.com/vi/h-OP0dtkyI8/mqdefault.jpg)
You explained 2 hours worth of content in just 17 minutes. Thank you very much...
Criminally underrated. If you have the time you need to be the savior of coding tutorials on youtube
I loved how clear you explained all those concepts I spent hours trying to understand. Great job!
The best video out there about this and the channel has only 1 video, insane.
This video is the best among all other videos I have watched on this toping in RUclips. Please keep making these awesome videos and please please please continue this topic. 👏👏
@@codifytools thank you so much you are the best. 😄😄😄
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.
Right on to the point. Please do more video like this. Your explanation is very clear. 👌
Thank you for your tutorial!
Thank you so much! I wasn't wanting it to end!!!!! thank you!!!!!!!!
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. :)
Amazing tutorial. Answered all my questions. I especially love automating 'npm run build' on changes at the end. Thank you!!
Underrated video, thank you so much.
Awesome video, cleared all my doubts on react chrome extention. Great job!
One the best tutorials I have seen. Thanks for sharing.
Your tutorial helped a lot! Thank you for your videos!
Amazing tutorial. Now I have to figure out how to use TypeScript in that project.
@@codifytools I'll definitely check the blog post! Your explanation was one of the clearest I've ever seen/heard.
this video was incredibly well made, thank you for this :D
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.
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.
Very clear and helpful info, thank you a lot)
It's a great video
It's very helpfull, i am hoping more video about this topic
Wow. I really never wanted it to end, well done!
Awesome explaination, really helpful.
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'],
},
Loved how you explain step by step, thank you!
this video is insane, extremely helpful, thankyou
Perfectly explained, thanks!
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
Thanks man. This was really very helpful video.
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.
Amazing tutorial from start to finish :) Well done!
Hey, thank you for the video, but could you explain how to integrate ContentScript and BackgroundScript ? It is pointless without it!
this is very helpful, thank you
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.
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.
Ok my bad, go to 7:06!!
can you please provide the link to open the extension in a new tab during dev
? its not working on mine
REALLY outstanding. Thanks!
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
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.
@@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.
thanks a lot! very helpful
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?
@@codifytools thank you so much :D
Thanks man, really helpful.
@@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?
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'".
thank you for your time and consideration great video
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
How can we add content_script so we ca interact with web page
Thanks for this great tutorial
thanks for this tutorial
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.
Thanks a lot! Great content.
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?
YOU ARE DA BEST
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?
Thank you very much !!!
Thank you very much sir
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 don't think HMR is supported here, can we trick it?
@@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
nice video
beautiful
I prefer quasar with vuejs bex
Greate ui components, utls, and services
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
@@codifytools I am able to do it in Node JS, but I’m unable to integrate node js with extension
Can you share what extension you use in vs code? The hint they provide is fantastic.
@@codifytools As expected. :(
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.
@@codifytools Great man! Just a little constructive criticism, I am glad you understand. Looking forward to the video!
@@codifytools Hey thank you so much for this video. Any updates on the video series?
@@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!
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
@@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
@@codifytools Thank you!
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!
@@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!
@@koaladlt I was doing the exact same thing lol. thanks!
@@02_kdz Things happens lol!
Is there a way to write unit tests using Jest or something similiar???
@@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
Amazing.
Super!
Excelent.
Broh you do you only have one video of coding put out more
Source please
Try to use a larger font size, please.
57+ years old developer
@@codifytools
Thanks a lot
🌹🌹🌹
ผมรันไม่ได้ครับพี่ชาย
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.
THANK YOU! I was wondering why my code wasn't working, this fixed it!
@@symbol767 😊😉
Seems like there should be a way to do this with far less steps in the world of "productivity".