Full Tutorial | Building a Chrome Extension in Typescript and Vite

[@playagain4397]

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.

[@justin9494]

this is so well produced. You deserve more subs! Thanks man

[@traintocode]

Thanks - that means a lot :)

[@Immigrantlovesamerica]

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.

[@PaDSt3r]

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

[@sujansinhthakor2314]

this is one of the well documented video on extensions,

[@baljinderbenipal5804]

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!

[@traintocode]

Awesome, thank you!

[@davidc.2525]

Not even done yet but this is for sure the best chrome extension tutorial on KZbin!

[@traintocode]

Thanks!

[@AutomobiliBeast]

Dude dont stop the prod. You deserve a lot more subs than this. This channel is underrated

[@traintocode]

hahaha thanks! My channel is growing steadily but I just like making videos

[@robj3d3]

Mate, you are absolutely brilliant. Incredibly well taught and presented. Thank you so much for this!

[@5minutes106]

Thank you. Everything was explained clearly. Just the video i was looking for.

[@vinod.sharma]

I loved it. It is easy to follow and gave me basic information to get started. Thank you very much for posting this video.

[@otisrancko]

this is now 10x content....Thanks

[@maninalift]

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 }, }, }, });

[@ronaldsupenieks803]

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

[@cirExUAB]

Thanks, you really help me to understand how work with "two scopes" (extension and web). keep going!!!...

[@traintocode]

Thanks, will do!

[@bobsmithy3103]

goated. Best typescript extension tutorial

[@traintocode]

Haha thanks

[@alexdin1565]

Nice video man! Short and to the point.

[@mightyboateng]

That was valuable. Thanks for creating such a tutorial.

[@virtual5819]

exactly what I was looking for!!

[@leonardoalmeida7746]

Very helpful with clear instructions and very didactic. Thanks

[@姬霓太美-w1z]

Thank you so much, it's an amazing tutorial for Chrome extension!!!

[@EpicKeyz]

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?

[@traintocode]

Thanks! And yes I recorded the typing separately. Everything is a lie

[@KryptechOfficial]

I was wondering the same thing, until I some him "typing" with his hands off the keyboard 😂 It's a good idea!

[@MincongHuang]

Thanks for this great tutorial, it helped me initialize the plugin quickly and understand the structure of a plugin.

[@traintocode]

You're very welcome!

[@mikkun_]

Man this summarizes everything I've learned so far in creating chrome extensions. You earned a sub from me!

[@traintocode]

Thanks so much!!

[@super-social-saltyfish]

this tutorial is good for who looking just start want to build a extension

[@pavelsavelev2560]

great video man , just wanted to say thank you.

[@traintocode]

thanks!

[@PokeFangOfficial]

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?

[@ritavdas7570]

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 ?

[@fabianmerchan]

Great tutorial, keep it up bro!

[@traintocode]

Thanks, will do!

[@omarelouafi]

Thanks for this quick and concise tutorial !

[@kumarchandresh0]

Dude is managing two spellings of color in one file. Respect 🫡

[@traintocode]

Unless the spec makes me spell it incorrectly I will go with "colour" whenever possible ;)

[@DelwarAhmedHabib]

Just wow!. I was exploaring if it is possible to create extention with frameworks like react or svelte and found this. Thnks a lot.

[@traintocode]

no worries thanks for commenting

[@Ryguy12543]

Awesome video. Thank you :) Very clear.

[@jeswer9]

Deserves way more views!

[@MuhammadHamid-r6o]

unbeliever you are doing such great job

[@ipranay]

Very cool! Thanks for the tut!

[@traintocode]

No problem!

[@minaamir3056]

okay, So where i should put my background file then??

[@vedbhanushali608]

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 ?

[@wahibakamoulcode]

Great video hope we see advanced videos like for example auth with supabase using the extension etc

[@kooday]

Can you please explain how to use the service worker with vite build

[@kumarutsav1123]

Bro so good, I immediately subscribed

[@rfgonzalezweb]

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?

[@eliasbenjamin4228]

I'm wondering the same thing!

[@ivodelev9794]

there is beta vite plugin

[@dmitriyvainila4227]

Wonderful video! Thank you, mate. Subscribed for more :)

[@traintocode]

Glad it was helpful!

[@idle.observer]

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.

[@kunalukey5870]

Nicely explained! subscribed ❤

[@traintocode]

thanks!

[@mrlectus]

Any solution to the "I have to build the file all the time"

[@ArmanJindal-ls8yo]

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 :)

[@tfdesign4072]

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?

[@TheDemoded]

please share the whole project. due to screen capturing issues it's unclear in some parts

[@traintocode]

Absolutely! Here is it on GitHub github.com/traintocode/sample-projects/tree/main/simple-chrome-extension

[@oleholgerson3416]

@@traintocodeThe typescript + vite part seems to be missing.

[@markh9646]

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!

[@goldenboy3627]

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.

[@traintocode]

You sir have a high price for clicking subscribe but it's a great idea thanks!

[@hurdurstudy295]

this tutorial is amazing

[@traintocode]

Thanks!!

[@ericborder5996]

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!

[@longqi-b8s]

Thank you for your excellent work. My VSCode doesn't suggest any correct methods when typing "chrome." Please help.

[@eliasbenjamin4228]

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!

[@traintocode]

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

[@mahmoudaboueleneen]

Amazing video, so useful

[@traintocode]

Glad it was helpful!

[@wellshubtube]

Thank you for this video but can you explain how I can pass a function state to the DOm?

[@rodrigoserrasqueiro]

I have a question. Would using React in an extension somehow affect production performance compared to pure HTML and JS?

[@btechstuff]

very helpful and clear

[@traintocode]

thanks!

[@AdityaG.]

Thank you sir, this is the exact solution for my problem...😄

[@xf2809]

which cli(terminal) are you using ?

[@chrisder1814]

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

[@LearnCodeFromForeigner]

❤❤❤ 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

[@fandhipray]

great tutorial sir thnakyou ☺

[@mohammadrezahosseini8435]

Great work of you

[@LucianoMendes]

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?

[@Morimove]

nice tutorila but i need to build everytime. do you have any solution for it?

[@edoardododoguzzi]

Excellent video but in some point missing audio

[@tubemyren3038]

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!

[@olumideoni8101]

thank you so much, Great video

[@traintocode]

Glad it was helpful!

[@maanas_sehgal]

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😓

[@alizaidbaber1905]

i am facing an error of undefine the chrome keyword even after install the package in my react app.

[@learning_trespasser]

nice explanation

[@symbi21]

so where can i found the source code of the vite? onChange code is half in the video

[@traintocode]

Hi! source code is here: github.com/traintocode/sample-projects/tree/main/simple-chrome-extension

[@donnieyang7453]

Great! nice tutorial

[@juangabriel2559]

Goated!

[@jaybeatz8084]

it works bro thanks 😀

[@traintocode]

No problem

[@KeshavD-ys7el]

How to work with service_worker using vite

[@keshav_dhiman]

howto implement background scripts?

[@christianbensoncapon]

Awesome!!

[@traintocode]

Thanks!

[@CaleyHamiltonProjects]

Can you do a tutorial for a side panel chrome extension

[@traintocode]

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?

[@CaleyHamiltonProjects]

@@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

[@CaleyHamiltonProjects]

@@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.

[@CaleyHamiltonProjects]

@@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.

[@CaleyHamiltonProjects]

@@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.

[@justin9494]

no hot reload?

[@traintocode]

There are libraries that claim to make this possible but I just don't have experience using them github.com/xpl/crx-hotreload

[@AndreiDamian]

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.

[@Abcdef-hq3vf]

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

[@jianjunxiao5779]

how to write a content.ts and then produce a content.js in dist

[@traintocode]

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

[@piotrs448]

And how to read page document in extension?

[@EvansRutto-kd8fw]

awesome ..👏

[@nonamenothing2000]

if you want to do a tutorial video, please make sure the video show all of the code...

[@Ragehunter]

17:16 cant thank you enough

[@tomkarho]

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.

[@coderlicious6565]

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.

[@rahulgupta373]

18:55 why i cant listen anything 😕??

[@davidc.2525]

I was confused too. Thought it was my airpods haha

[@gamehubby]

More of this but advance

[@traintocode]

great feedback thanks

[@pavelgrishin]

9:51 this leads to anonymous function error

[@traintocode]

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

[@idle.observer]

could you fix? I can help

[@Stericcc]

i love u

[@traintocode]

giphy.com/gifs/queue-megamind-metro-man-e5nATuISYAZ4Q

[@chrisder1814]

g f hello

[@jonass_-yd3ww]

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

[@traintocode]

All feedback is good feedback, thanks for taking the time to write this so I can make my videos better.

[@DelPieroJoga10]

only bad thing about this, its because uses react 😆

[@masterjericho9026]

Undetectable AI has released a chrome extension that will turn your essay to human written

[@iheanachovictor4884]

Thanks a lot