Full Tutorial | Building a Chrome Extension in Typescript and Vite
Vložit
- čas přidán 4. 06. 2024
- Make a browser extension in Vite, Typescript and React. This tutorial also gives you some background on how Chrome extensions work and how you can iterate on a chrome extension as you build it yourself.
#chromeextensions #vitejs #typescript #learncoding
Manifest File Schema - developer.chrome.com/docs/ext...
📺 Full Vite + Typescript course on Udemy
www.udemy.com/course/vite-dev...
🔗 More guides & articles
traintocode.com
💻 Github
github.com/traintocode
🗣️ Social Media
- / jamesjcharlesworth
- / jcharlesworthuk
00:00 Introduction
01:47 Chrome Extensions Explained
05:22 Empty Extension
06:59 Adding an Icon
08:04 Adding a Script
12:34 Adding a Popup
17:44 Vite + Typescript
30:48 Finished Product - Věda a technologie
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.
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!
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
Thanks for this quick and concise tutorial !
Thank you so much, it's an amazing tutorial for Chrome extension!!!
Man this summarizes everything I've learned so far in creating chrome extensions. You earned a sub from me!
Thanks so much!!
Thanks, you really help me to understand how work with "two scopes" (extension and web).
keep going!!!...
Thanks, will do!
Thanks for this great tutorial, it helped me initialize the plugin quickly and understand the structure of a plugin.
You're very welcome!
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 :)
Awesome video. Thank you :) Very clear.
unbeliever you are doing such great job
Deserves way more views!
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
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 ;)
Thank you for this video but can you explain how I can pass a function state to the DOm?
Very cool! Thanks for the tut!
No problem!
Thank you sir, this is the exact solution for my 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!
great video man , just wanted to say thank you.
thanks!
Nicely explained! subscribed ❤
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?
What program are you using at the beginning?
Great video hope we see advanced videos like for example auth with supabase using the extension etc
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 ?
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
},
},
},
});
okay, So where i should put my background file then??
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
thank you so much, Great video
Glad it was helpful!
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
Great! nice tutorial
very helpful and clear
thanks!
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
Wonderful video! Thank you, mate. Subscribed for more :)
Glad it was helpful!
Amazing video, so useful
Glad it was helpful!
this tutorial is amazing
Thanks!!
awesome ..👏
Awesome!!
Thanks!
Any solution to the "I have to build the file all the time"
howto implement background scripts?
it works bro thanks 😀
No problem
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 still feel some gap between using chrome extensions from the scratch and with vite installation, but anyway this video helped me get started, 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.
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!
And how to read page document in extension?
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!
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
18:55 why i cant listen anything 😕??
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.
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.
More of this but advance
great feedback thanks
i love u
giphy.com/gifs/queue-megamind-metro-man-e5nATuISYAZ4Q
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
only bad thing about this, its because uses react 😆
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.
Undetectable AI has released a chrome extension that will turn your essay to human written
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.
Thanks a lot