Chrome-Extensions

Contents After publishing my first article on building a Chrome Extension using React, TypeScript, TailWind, and Webpack, a handful of people commented that Webpack was an antique best left on the shelf. In this article, I will walk you through creating the a Chrome Extension that uses the same tech stack but with Vite as the build tool. For the full code, check out the GitHub repository. Introduction In this tutorial, we’ll build a Chrome extension using React, TypeScript, Tailwind CSS, and Vite. Vite is a modern build tool that offers a fast and lean development experience. By the end of this guide, you’ll have a fully functional Chrome extension with a popup and side panel, all powered by React components styled with Tailwind CSS. ...

Contents This article was inspired by Creating a Chrome Extension with React a Step by Step Guide. For the full code, check out the repo. Creating a Popup 1. Create React App Use the official Create React App CLI to kickstart your project: npx create-react-app react-chrome-ext --template typescript cd react-chrome-ext 2. Update the Files Update App.tsx to show a simple string: function App() { return ( <div className="App"> Hello World </div> ); } export default App; Update index.tsx: ...