This video is the best among all other videos I have watched on this toping in UA-cam. 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.
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'], },
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.
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
@@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?
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.
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
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?
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?
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.
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?
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'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'".
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?
@@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
@@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
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 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
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!
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, 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.
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 UA-cam. Please keep making these awesome videos and please please please continue this topic. 👏👏
@@codifytools thank you so much you are the best. 😄😄😄
Thank you for your tutorial!
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.
Thank you so much! I wasn't wanting it to end!!!!! thank you!!!!!!!!
Underrated video, thank you so much.
One the best tutorials I have seen. Thanks for sharing.
Awesome video, cleared all my doubts on react chrome extention. Great job!
Your tutorial helped a lot! Thank you for your videos!
this video was incredibly well made, thank you for this :D
Right on to the point. Please do more video like this. Your explanation is very clear. 👌
Amazing tutorial. Answered all my questions. I especially love automating 'npm run build' on changes at the end. Thank you!!
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'],
},
Very clear and helpful info, thank you a lot)
Awesome explaination, really helpful.
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. :)
Perfectly explained, thanks!
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.
this video is insane, extremely helpful, thankyou
Thanks man. This was really very helpful video.
It's a great video
It's very helpfull, i am hoping more video about this topic
Loved how you explain step by step, thank you!
REALLY outstanding. Thanks!
this is very helpful, thank you
Amazing tutorial from start to finish :) Well done!
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.
Thanks a lot! Great content.
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.
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
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?
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!!
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
Hey, thank you for the video, but could you explain how to integrate ContentScript and BackgroundScript ? It is pointless without it!
Wow. I really never wanted it to end, well done!
can you please provide the link to open the extension in a new tab during dev
? its not working on mine
How can we add content_script so we ca interact with web page
Thanks for this great tutorial
thanks a lot! very helpful
thanks for this tutorial
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.
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
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.
thank you for your time and consideration great video
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
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.
nice video
Thank you very much !!!
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?
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
Thank you very much sir
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'".
beautiful
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?
Can you share what extension you use in vs code? The hint they provide is fantastic.
@@codifytools As expected. :(
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
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!
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
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
Amazing.
I prefer quasar with vuejs bex
Greate ui components, utls, and services
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!
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!
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".