How is it well produced?? The video wouldve been great if the audio didnt cut out, or if the video wasnt cut in half. He also didnt upload the vite app to github like he said he would in the video.
Phenomenal tutorial James! This video has all the relevant information required for development and the iterative approach is extremely useful. The end product is awesome!
Nice video man. What's missing in this is a hot module reload set up - something I'm trying to figure out. this way you don't need to keep running the build command but have your changes appear live in the extension
Hey, thanks for the tutorials. I'm just starting to learn how to code my own Chrome extensions and I really enjoyed your detailed step-by-step guide! Also, I wonder how do you type so fast? Or did you just record a coding video and then recorded your explanations?
When you get to using Vite, you switch to having javascript files that are referenced from an index.html file. This suits what Vite expects, and allows Vite to use the index.html as the entry point, but for most chrome extensions, you will want to have possibly multiple javascript entry points that are referenced from your manifest.json and not from an html file. Is there a way to do this? I'm tempted to skip Vite and just use tsc directly to build. EDIT: I gave up too easily looking for an answer. It looks like it's actually quite easy. I haven't tested this yet, but something like: javascript // vite.config.js import { defineConfig } from 'vite'; export default defineConfig({ build: { rollupOptions: { input: { page: 'src/page.ts', options: 'src/options.ts', worker: 'src/worker.ts', // Add more entry points as needed }, }, }, });
If you wanted to add a service-worker to the vite application, would it be in the public or src folder, and how would the manifest point to it? Thanks!
This article might help but I've not done it so can't speak from experience dev.to/reeshee/how-to-bundle-your-custom-service-worker-in-vite-without-using-pwa-4nk
Awesome video! Thanks so much. Quick q: how would you pass state from the page context to the popup context? I love that we can easily pass from popup to page via the args function, but what way would you recommend to go from page -> popup. I want to have my popup react to the current page the user is on! Thanks :)
I have spent over 5 hours just loading unpacked extension files. I am using Linux (PopOS) finally with help I found the issue. Because of portal bugs, if your source code is under home, it won't see it. Even if you click the button and select the directory, nothing changes. Move your source code under another directory like Documents, instead of Home. If the button still the button still does not work, just drag the directory (folder) and drop it to the extensions page. It should work.
hi, great tutorial, I have a question, let's say I want to use the chrome.storage.sync.get API inside a useEffect in my App.jsx file so I keep synced my service-worker and my popup, when I run npm run dev, react does not have access to the chrome API, how can I access it to keep emulating my chrome extension in dev like it were a standalone react app?
I still feel some gap between using chrome extensions from the scratch and with vite installation, but anyway this video helped me get started, thanks!
❤❤❤ but i have a little bit confuse about popup context and content script in the section use vite. Why change theme in onClick impact to the whole page
Great tutorial , but one part I didn't understand is you told me that we need the *Content Script* to actually change the content of the page we are interacting with. But here you directly modified that in the same file where we were running that popup. One more thing why did you clear the service worker file ?
if you can make a tutorial of automating clicking element selectors while the user is opening another tab while its performing the actions in the background with no interruptions would be very helpful i would even subscribe.
Hey @@traintocode Could you send a link to the code that includes the ts + vite section? Seems a lot of the code is off screen it's difficult to follow. Thanks!
Hi man, wanderful video, I love it. Can you help me, please? I have a extension built with Vanilla JavaScript and it rund when the page load, I followed your video but I can't do it run when the page load, only when clicked. How can I do that?
So frustrating, I tried to launch my extension but keep getting auth2 errors and each time I load a new version in developer mode it creates a new ID. Any ideas?
@@traintocode No it's a newer chrome api which persists across page navigation and page changes. I can't post links because the last comment I did that got deleted Just look up "side panel chrome api" to see the api docs and search the same on youtube to see how it looks
@@traintocode This is my 3rd time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 3rd time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
@@traintocode This is my 4th time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 4th time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
@@traintocode This is my 4th time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 4th time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
Nice introduction! Saving, running npm build, reloading the extension, reloading the page (maybe this is somewhat optional) seems to be very tedious. It would be nice to have at least some of these steps automated. Also showing some more errors, e.g. in background scripts and how to debug them would be useful for beginners.
I want to know how to make an extention which could be interacted by a website. In other words how to manage content.js and background.js console.log('Content script loaded'); const script = document.createElement('script'); script.src = chrome.runtime.getURL('inject.js'); (document.head || document.documentElement).appendChild(script); script.onload = () => { console.log('Inject script loaded'); script.remove(); }; window.addEventListener('message', function(event) { if (event.source !== window) return; if (event.data.direction && event.data.direction === 'from-page-script') { chrome.runtime.sendMessage({ type: 'CUSTOM_WALLET_REQUEST', payload: event.data.message }, (response) => { window.postMessage({ direction: 'from-content-script', message: response }, '*'); }); } }); THis is an example code
I think I watched this vid a year ago, and I was kind of rejecting typescript. I now have a flirting relationship where I kind of understand her benefits - but she still thinks I'm probably ugly and won't hook up with me, but I am going to engage with her anyway, for chrome extensions, so I'm back to this video.
The full source code is here on Git I may have copied something wrong in the video github.com/traintocode/sample-projects/tree/main/simple-chrome-extension
What's the purpose of omitting react from the title? I came to this vid because I expected to see some pure typescript but instead I got a react tutorial instead. I feel deceived.
I do not understand the comments here about the video being "well produced". The guy rushes through everything and you constantly have to rewind and find precise timestamps, if you're uncertain about some pieces of the code. Then the guy all of a sudden talks about *the* terminal and from there on the video is a disaster. Sound is missing, one can't possibly understand what you're saying and you also don't help with setting everything up. In my years at university, I only learned about java script, html, and css, but never about the rest here, which is why this was very confusing. Also the "explanation" of Vite at the beginning of the section was not any helpful. Again: I do not understand, what video the writers of these comments watched, but for sure not the same as I did. Sorry for this much negativity, but these comments are not justified and also won't help the creator to improve. Like, at least watch the video before you upload it... Now after finishing the video: The example code isn't to find anywhere, which makes the parts that weren't visible in the video, impossible to figure out. Also, you tend to always do the important part on the bottom of the screen, which is just a terrible design choice, especially for tutorials. And once again: Comments like "Phenomenal tutorial" are really not justified. Your camera is literally blocking important pieces of the code, which are never shown. I seriously do not understand, how one can have anything positive to say about this video. It's really bad...
I had to play around few videos before I land on this, and it's bang on; explained so nicely with easy steps. Great tutorial! Thanks.
this is one of the well documented video on extensions,
this is so well produced. You deserve more subs! Thanks man
Thanks - that means a lot :)
How is it well produced?? The video wouldve been great if the audio didnt cut out, or if the video wasnt cut in half. He also didnt upload the vite app to github like he said he would in the video.
Wow life saver! I didn't realize I could pass state into the dom and always thought I was limited to using state in the popup
Thank you. Everything was explained clearly. Just the video i was looking for.
Phenomenal tutorial James! This video has all the relevant information required for development and the iterative approach is extremely useful. The end product is awesome!
Awesome, thank you!
Not even done yet but this is for sure the best chrome extension tutorial on RUclips!
Thanks!
Mate, you are absolutely brilliant. Incredibly well taught and presented. Thank you so much for this!
I loved it. It is easy to follow and gave me basic information to get started. Thank you very much for posting this video.
Thanks, you really help me to understand how work with "two scopes" (extension and web).
keep going!!!...
Thanks, will do!
Nice video man! Short and to the point.
Very helpful with clear instructions and very didactic. Thanks
Nice video man. What's missing in this is a hot module reload set up - something I'm trying to figure out. this way you don't need to keep running the build command but have your changes appear live in the extension
That was valuable. Thanks for creating such a tutorial.
Dude is managing two spellings of color in one file. Respect 🫡
Unless the spec makes me spell it incorrectly I will go with "colour" whenever possible ;)
this tutorial is good for who looking just start want to build a extension
goated. Best typescript extension tutorial
Haha thanks
exactly what I was looking for!!
Thank you so much, it's an amazing tutorial for Chrome extension!!!
Just wow!. I was exploaring if it is possible to create extention with frameworks like react or svelte and found this. Thnks a lot.
no worries thanks for commenting
Thanks for this quick and concise tutorial !
Great video hope we see advanced videos like for example auth with supabase using the extension etc
Dude dont stop the prod. You deserve a lot more subs than this. This channel is underrated
hahaha thanks! My channel is growing steadily but I just like making videos
Great tutorial, keep it up bro!
Thanks, will do!
great video man , just wanted to say thank you.
thanks!
Thanks for this great tutorial, it helped me initialize the plugin quickly and understand the structure of a plugin.
You're very welcome!
Deserves way more views!
Awesome video. Thank you :) Very clear.
Very cool! Thanks for the tut!
No problem!
Hey, thanks for the tutorials. I'm just starting to learn how to code my own Chrome extensions and I really enjoyed your detailed step-by-step guide!
Also, I wonder how do you type so fast? Or did you just record a coding video and then recorded your explanations?
Thanks! And yes I recorded the typing separately. Everything is a lie
I was wondering the same thing, until I some him "typing" with his hands off the keyboard 😂 It's a good idea!
Nicely explained! subscribed ❤
thanks!
When you get to using Vite, you switch to having javascript files that are referenced from an index.html file. This suits what Vite expects, and allows Vite to use the index.html as the entry point, but for most chrome extensions, you will want to have possibly multiple javascript entry points that are referenced from your manifest.json and not from an html file. Is there a way to do this? I'm tempted to skip Vite and just use tsc directly to build.
EDIT: I gave up too easily looking for an answer. It looks like it's actually quite easy.
I haven't tested this yet, but something like:
javascript
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
input: {
page: 'src/page.ts',
options: 'src/options.ts',
worker: 'src/worker.ts',
// Add more entry points as needed
},
},
},
});
Bro so good, I immediately subscribed
Can you please explain how to use the service worker with vite build
unbeliever you are doing such great job
sir very helpful tutorial, thank you for great explanation, I have still one query how to do background service and content service to run on it ?
If you wanted to add a service-worker to the vite application, would it be in the public or src folder, and how would the manifest point to it? Thanks!
This article might help but I've not done it so can't speak from experience dev.to/reeshee/how-to-bundle-your-custom-service-worker-in-vite-without-using-pwa-4nk
Awesome video! Thanks so much. Quick q: how would you pass state from the page context to the popup context? I love that we can easily pass from popup to page via the args function, but what way would you recommend to go from page -> popup. I want to have my popup react to the current page the user is on! Thanks :)
okay, So where i should put my background file then??
I have spent over 5 hours just loading unpacked extension files. I am using Linux (PopOS) finally with help I found the issue. Because of portal bugs, if your source code is under home, it won't see it. Even if you click the button and select the directory, nothing changes. Move your source code under another directory like Documents, instead of Home. If the button still the button still does not work, just drag the directory (folder) and drop it to the extensions page. It should work.
hi, great tutorial, I have a question, let's say I want to use the chrome.storage.sync.get API inside a useEffect in my App.jsx file so I keep synced my service-worker and my popup, when I run npm run dev, react does not have access to the chrome API, how can I access it to keep emulating my chrome extension in dev like it were a standalone react app?
I'm wondering the same thing!
there is beta vite plugin
this tutorial is amazing
Thanks!!
I still feel some gap between using chrome extensions from the scratch and with vite installation, but anyway this video helped me get started, thanks!
very helpful and clear
thanks!
which cli(terminal) are you using ?
Thank you for your excellent work. My VSCode doesn't suggest any correct methods when typing "chrome." Please help.
Amazing video, so useful
Glad it was helpful!
great tutorial sir thnakyou ☺
Great work of you
Any solution to the "I have to build the file all the time"
Wonderful video! Thank you, mate. Subscribed for more :)
Glad it was helpful!
❤❤❤ but i have a little bit confuse about popup context and content script in the section use vite. Why change theme in onClick impact to the whole page
I have a question. Would using React in an extension somehow affect production performance compared to pure HTML and JS?
Great tutorial , but one part I didn't understand is you told me that we need the *Content Script* to actually change the content of the page we are interacting with.
But here you directly modified that in the same file where we were running that popup.
One more thing why did you clear the service worker file ?
Excellent video but in some point missing audio
Thank you sir, this is the exact solution for my problem...😄
perfect tutorial! can you make a chrome extension that handles auth as well? i.e. to check what functionality a user can have access to?
if you can make a tutorial of automating clicking element selectors while the user is opening another tab while its performing the actions in the background with no interruptions would be very helpful i would even subscribe.
You sir have a high price for clicking subscribe but it's a great idea thanks!
nice tutorila but i need to build everytime. do you have any solution for it?
hello I would like to develop a chrome extension but I don't know if my idea is good and could you tell me what you think about it
Thank you for this video but can you explain how I can pass a function state to the DOm?
please share the whole project. due to screen capturing issues it's unclear in some parts
Absolutely! Here is it on GitHub github.com/traintocode/sample-projects/tree/main/simple-chrome-extension
@@traintocodeThe typescript + vite part seems to be missing.
Hey @@traintocode Could you send a link to the code that includes the ts + vite section? Seems a lot of the code is off screen it's difficult to follow. Thanks!
Man this summarizes everything I've learned so far in creating chrome extensions. You earned a sub from me!
Thanks so much!!
nice explanation
Hi man, wanderful video, I love it.
Can you help me, please?
I have a extension built with Vanilla JavaScript and it rund when the page load, I followed your video but I can't do it run when the page load, only when clicked.
How can I do that?
Someone please help me
I want to integrate monaco wirh my extension but its showing loading and is not coming. My whole extension depends on it😓
thank you so much, Great video
Glad it was helpful!
it works bro thanks 😀
No problem
How to work with service_worker using vite
So frustrating, I tried to launch my extension but keep getting auth2 errors and each time I load a new version in developer mode it creates a new ID. Any ideas?
howto implement background scripts?
so where can i found the source code of the vite? onChange code is half in the video
Hi! source code is here: github.com/traintocode/sample-projects/tree/main/simple-chrome-extension
i am facing an error of undefine the chrome keyword even after install the package in my react app.
Great! nice tutorial
Awesome!!
Thanks!
Can you do a tutorial for a side panel chrome extension
What do you mean by "side panel"? Like some UI that gets injected into the actual page or the popup when you click the extension?
@@traintocode No it's a newer chrome api which persists across page navigation and page changes. I can't post links because the last comment I did that got deleted
Just look up "side panel chrome api" to see the api docs
and search the same on youtube to see how it looks
@@traintocode This is my 3rd time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 3rd time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
@@traintocode This is my 4th time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 4th time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
@@traintocode This is my 4th time trying to reply to this post. Idky it keeps getting deleted. The side panel chrome extension is a newer api which persists across page reloads, navigation, and tab changes. I would post a link but I don't want the reply to get deleted a 4th time. Just look it up on google to see the api docs and look on youtube to see the UI in action.
I cant find the source code for the React/Typescript example.... you are missing some codelines in the video, but cant find the source code!
how to write a content.ts and then produce a content.js in dist
Run "tsc" to compile the .ts to .js. Or use a build tool that does this as part of the build process, such as Vite
no hot reload?
There are libraries that claim to make this possible but I just don't have experience using them github.com/xpl/crx-hotreload
Nice introduction!
Saving, running npm build, reloading the extension, reloading the page (maybe this is somewhat optional) seems to be very tedious. It would be nice to have at least some of these steps automated.
Also showing some more errors, e.g. in background scripts and how to debug them would be useful for beginners.
And how to read page document in extension?
Goated!
awesome ..👏
I want to know how to make an extention which could be interacted by a website.
In other words how to manage content.js and background.js
console.log('Content script loaded');
const script = document.createElement('script');
script.src = chrome.runtime.getURL('inject.js');
(document.head || document.documentElement).appendChild(script);
script.onload = () => {
console.log('Inject script loaded');
script.remove();
};
window.addEventListener('message', function(event) {
if (event.source !== window) return;
if (event.data.direction && event.data.direction === 'from-page-script') {
chrome.runtime.sendMessage({
type: 'CUSTOM_WALLET_REQUEST',
payload: event.data.message
}, (response) => {
window.postMessage({
direction: 'from-content-script',
message: response
}, '*');
});
}
});
THis is an example code
17:16 cant thank you enough
18:55 why i cant listen anything 😕??
I was confused too. Thought it was my airpods haha
More of this but advance
great feedback thanks
if you want to do a tutorial video, please make sure the video show all of the code...
I think I watched this vid a year ago, and I was kind of rejecting typescript. I now have a flirting relationship where I kind of understand her benefits - but she still thinks I'm probably ugly and won't hook up with me, but I am going to engage with her anyway, for chrome extensions, so I'm back to this video.
9:51 this leads to anonymous function error
The full source code is here on Git I may have copied something wrong in the video github.com/traintocode/sample-projects/tree/main/simple-chrome-extension
could you fix? I can help
What's the purpose of omitting react from the title? I came to this vid because I expected to see some pure typescript but instead I got a react tutorial instead. I feel deceived.
i love u
giphy.com/gifs/queue-megamind-metro-man-e5nATuISYAZ4Q
I do not understand the comments here about the video being "well produced". The guy rushes through everything and you constantly have to rewind and find precise timestamps, if you're uncertain about some pieces of the code. Then the guy all of a sudden talks about *the* terminal and from there on the video is a disaster. Sound is missing, one can't possibly understand what you're saying and you also don't help with setting everything up. In my years at university, I only learned about java script, html, and css, but never about the rest here, which is why this was very confusing. Also the "explanation" of Vite at the beginning of the section was not any helpful. Again: I do not understand, what video the writers of these comments watched, but for sure not the same as I did. Sorry for this much negativity, but these comments are not justified and also won't help the creator to improve. Like, at least watch the video before you upload it...
Now after finishing the video:
The example code isn't to find anywhere, which makes the parts that weren't visible in the video, impossible to figure out. Also, you tend to always do the important part on the bottom of the screen, which is just a terrible design choice, especially for tutorials. And once again: Comments like "Phenomenal tutorial" are really not justified. Your camera is literally blocking important pieces of the code, which are never shown. I seriously do not understand, how one can have anything positive to say about this video. It's really bad...
All feedback is good feedback, thanks for taking the time to write this so I can make my videos better.
g
f
hello
Undetectable AI has released a chrome extension that will turn your essay to human written
only bad thing about this, its because uses react 😆
Thanks a lot