Creating a Chrome Extension Using React, TypeScript, and TailwindCSS

Source: imxsuve

In this article, we will guide you step by step on how to create a Chrome extension using React, TypeScript, and TailwindCSS, and configure it with Webpack. By the end, you’ll have a Chrome extension with a React-based UI that you can run in your browser.

Overview:

We will cover the following topics in this guide:

1. Setting up the Manifest file for the Chrome extension.
2. Webpack configuration for bundling React, TypeScript, and TailwindCSS.
3. Adding necessary loaders and plugins for Webpack.
4. Building and loading the Chrome extension.
5. Understanding the dist folder and the purpose of the build process.

Step 1: Setting up the Manifest File

The manifest.json file is essential for every Chrome extension. It contains metadata about the extension like its name, version, permissions, and the HTML page that will serve as the extension popup. Here is an example of what the manifest file should look like:

Explanation:

• manifest_version: Specifies the Chrome extension API version. We use version 3 here.
• name: The name of your extension as it will appear in the Chrome Store.
• version: Version of the extension (increment this with every release).
• action: Defines what happens when the extension’s icon is clicked. In this case, the index.html file is shown.

Step 2: Webpack Configuration

Webpack is used to bundle all the assets, such as JavaScript, TypeScript, CSS, and images. We will configure Webpack to handle React with TypeScript and TailwindCSS.

Here’s the webpack.config.js file:

Explanation:

• entry: The entry point is index.tsx, the main React file for our extension.
• module.rules: We define how different file types (TypeScript, CSS, images) are processed.
• babel-loader and ts-loader: Compile TypeScript and modern JavaScript into browser-compatible JavaScript.
• style-loader, css-loader, and postcss-loader: Handle the inclusion of TailwindCSS and autoprefixer for CSS.
• CopyPlugin: Copies the manifest.json and icon.png into the dist folder.
• HtmlWebpackPlugin: Generates the index.html file that serves as the extension’s popup.

Step 3: Adding Loaders and Plugins

Loaders are essential in Webpack for transforming files before bundling them. Let’s look at the loaders used here:

Required Loaders:

1. babel-loader: Converts modern JavaScript and JSX to browser-compatible JavaScript.

npm install babel-loader @babel/preset-env @babel/preset-react - save-dev

1. ts-loader: Compiles TypeScript files into JavaScript.

npm install ts-loader typescript - save-dev

1. css-loader: Resolves @import and url() in CSS files.
2. style-loader: Injects CSS into the DOM.
3. postcss-loader: Processes CSS using plugins like TailwindCSS and autoprefixer.

npm install css-loader style-loader postcss-loader tailwindcss 
autoprefixer - save-dev

Plugins:

• CopyPlugin: Copies files from the source to the destination folder.
• HtmlWebpackPlugin: Generates an HTML file dynamically for the popup UI.

Step 4: Building and Loading the Extension in Chrome

Once the Webpack configuration is ready, you can now build the project and load the Chrome extension.

Build the project:
npm run build

1. Load the extension:

• Open Chrome and go to chrome://extensions/.
• Enable Developer Mode.
• Click Load Unpacked and select the dist folder.

This will load the extension into Chrome, and you can now test its functionality.

Step 5: Understanding the dist Folder

The dist folder is the output directory where Webpack compiles all the source files. After running the build command, you will find the bundled files like JavaScript, CSS, the manifest.json, and any assets (icons, images) in this folder.

This folder is the final, production-ready version of your Chrome extension. When loading your extension in Chrome, you’ll point to this folder.

Conclusion:

By following these steps, you’ve created a Chrome extension using React, TypeScript, and TailwindCSS. You’ve also learned how to configure Webpack, manage loaders, and plugins, and load the extension into the browser.

With this setup, you now have a solid foundation for building more complex Chrome extensions with a modern React-based UI. You can continue to expand this extension by adding features, handling browser APIs, and further optimizing the Webpack build for production.