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.

[@sujansinhthakor2314]

this is one of the well documented video on extensions,

[@cryptosauce_]

excellent introduction to really settle the viewer in nicely

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

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

[@havfdeco]

FINALLLY SOMEONE WHO EXPLAINS IT :D

[@semireolatunde-salawu758]

Really easy to follow! I'm using plain javascript to build my extension but I really benefited from this!

[@davidc.2525]

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

[@traintocode]

Thanks!

[@girldocode8408]

how cool ! thanks, this was very new and helpful for me

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

[@seriouslee4119]

Sweet tutorial, just what I needed. Thanks guy!

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

[@tbbbasjwqkkksjj]

Thanks! your tutorial makes beginner inspired to build more extension. Subs!

[@MoonLee-w3k]

Nice explanation of the basic concept of Chrome extension

[@matt-pierce]

Amazing video. Learned so much so quick. You are clearly very knowledgable about this topic :)

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

[@5minutes106]

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

[@bobsmithy3103]

goated. Best typescript extension tutorial

[@traintocode]

Haha thanks

[@0jaxay0]

really nice tutorial, thanks!

[@ThomasChester-e7g]

PSA for anyone whose button doesn't work when following this: it might be because of an update to Chrome, but I had to add an argument to the tabs query: "let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });"

[@traintocode]

Thanks! I'm trying to work out a way to host the source code on my site so I can add a link card to the video

[@robj3d3]

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

[@markuscwatson]

absolutely beautiful tutorial mate. u have a new sub here

[@mikkun_]

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

[@traintocode]

Thanks so much!!

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

[@alexdin1565]

Nice video man! Short and to the point.

[@cirExUAB]

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

[@traintocode]

Thanks, will do!

[@pavelsavelev2560]

great video man , just wanted to say thank you.

[@traintocode]

thanks!

[@oletrn]

amazing tutorial, thank you so much!

[@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 ;)

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

[@姬霓太美-w1z]

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

[@virtual5819]

exactly what I was looking for!!

[@fabianmerchan]

Great tutorial, keep it up bro!

[@traintocode]

Thanks, will do!

[@leonardoalmeida7746]

Very helpful with clear instructions and very didactic. Thanks

[@omarelouafi]

Thanks for this quick and concise tutorial !

[@mightyboateng]

That was valuable. Thanks for creating such a tutorial.

[@ipranay]

Very cool! Thanks for the tut!

[@traintocode]

No problem!

[@mrlectus]

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

[@otisrancko]

this is now 10x content....Thanks

[@super-social-saltyfish]

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

[@Ryguy12543]

Awesome video. Thank you :) Very clear.

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

[@nafiulawal1443]

Why not have one entry point and use some logic to execute individual entry points?

[@MuhammadHamid-r6o]

unbeliever you are doing such great job

[@kunalukey5870]

Nicely explained! subscribed ❤

[@traintocode]

thanks!

[@kumarutsav1123]

Bro so good, I immediately subscribed

[@tommmosadeq9843]

A great tutorial, thanks a lot

[@kooday]

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

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

[@hurdurstudy295]

this tutorial is amazing

[@traintocode]

Thanks!!

[@dmitriyvainila4227]

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

[@traintocode]

Glad it was helpful!

[@jeswer9]

Deserves way more views!

[@minaamir3056]

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

[@mahmoudaboueleneen]

Amazing video, so useful

[@traintocode]

Glad it was helpful!

[@moulcode]

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

[@btechstuff]

very helpful and clear

[@traintocode]

thanks!

[@fandhipray]

great tutorial sir thnakyou ☺

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

[@mohammadrezahosseini8435]

Great work of you

[@AdityaG.]

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

[@olumideoni8101]

thank you so much, Great video

[@traintocode]

Glad it was helpful!

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

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

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

[@jaybeatz8084]

it works bro thanks 😀

[@traintocode]

No problem

[@learning_trespasser]

nice explanation

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

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

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

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

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

[@KeshavD-ys7el]

How to work with service_worker using vite

[@donnieyang7453]

Great! nice tutorial

[@wellshubtube]

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

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

[@edoardododoguzzi]

Excellent video but in some point missing audio

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

[@rahulxfd]

which cli(terminal) are you using ?

[@christianbensoncapon]

Awesome!!

[@traintocode]

Thanks!

[@longqi-b8s]

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

[@Morimove]

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

[@rodrigoserrasqueiro]

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

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

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

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

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

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

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

[@keshav_dhiman]

howto implement background scripts?

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

[@piotrs448]

And how to read page document in extension?

[@juangabriel2559]

Goated!

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

[@EvansRutto-kd8fw]

awesome ..👏

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

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

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

[@rahulgupta373]

18:55 why i cant listen anything 😕??

[@davidc.2525]

I was confused too. Thought it was my airpods haha

[@nonamenothing2000]

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