Full Tutorial | Building a Chrome Extension in Typescript and Vite

In this tutorial, we will go through the process of building a Chrome extension using Typescript and Vite. Chrome extensions are powerful tools that allow you to customize and extend the functionality of the Chrome browser. Using Typescript and Vite will help us write scalable, maintainable, and well-structured code for our extension.

Prerequisites

Before getting started, make sure you have the following prerequisites:

• Basic knowledge of HTML, CSS, and JavaScript
• Node.js installed on your machine
• An updated version of Chrome browser
• An Integrated Development Environment (IDE) of your choice

Setting up the Project

To begin, let’s create a new project folder and navigate into it:

    $ mkdir chrome-extension
    $ cd chrome-extension
    

Next, we need to initialize our project as a Node.js project by running the following command:

    $ npm init -y
    

This will create a package.json file which will keep track of our project dependencies and other details.

Now, let’s install Vite and TypeScript as dev dependencies by executing:

    $ npm install --save-dev vite typescript
    

Vite is a build tool that helps us develop our Chrome extension efficiently, while TypeScript adds static typing to our JavaScript code, making it more robust.

Creating the Manifest File

The manifest file is a crucial component of a Chrome extension as it defines the extension’s behavior, permissions, and other details. Create a new file called manifest.json in the root folder of your project, and populate it with the following content:

    {
      "manifest_version": 2,
      "name": "My Chrome Extension",
      "version": "1.0",
      "content_scripts": [
        {
          "matches": [""],
          "js": ["main.js"]
        }
      ]
    }
    

In this example, we have set the manifest version to 2 and defined the name and version of our extension. Additionally, we have specified a content script that will be injected in all URLs. We will create the main.js file later.

Creating the Main Script

Create a src folder in the root directory, and within it, create a file named main.ts. This will be our main script where we will write the logic of our extension. Replace the content of the file with the following code:

    console.log('Hello world! This is my Chrome extension!');
    

For this tutorial, we will keep it simple and just log a message to the console.

Configuring Vite

To configure Vite, create a new file called vite.config.ts in the root folder, and add the following content:

    import { defineConfig } from 'vite';

    export default defineConfig({
      build: {
        outDir: 'dist',
        emptyOutDir: true,
        rollupOptions: {
          input: './src/main.ts'
        }
      }
    });
    

This configuration specifies that Vite should output the build artifacts in the dist folder, and that the entry point for the build process is src/main.ts.

Building and Testing the Extension

To build the extension, add the following scripts to the package.json file:

    "scripts": {
      "build": "vite build",
      "dev": "vite"
    }
    

You can now run the following command to build the extension:

    $ npm run build
    

After a successful build, navigate to the Chrome browser, open the “Extensions” page by typing chrome://extensions in the address bar, and enable the “Developer mode” option. Click on “Load unpacked” and select the dist folder.

Finally, go to any website, open the developer console (Ctrl + Shift + J), and you should see the “Hello world! This is my Chrome extension!” message logged.

Conclusion

Congratulations! You have successfully built a Chrome extension using Typescript and Vite. This is just the beginning; Chrome extensions have extensive capabilities, and you can continue to enhance and customize your extension as per your requirements. Understanding the fundamentals of Chrome extension development with modern tools like Typescript and Vite will help you build powerful, feature-rich extensions that can greatly enhance the browsing experience for users.