Full Tutorial | Building a Chrome Extension in Typescript and Vite

Step-by-Step Tutorial: Building a Chrome Extension in Typescript and Vite

Step 1: Create a Basic Chrome Extension

1. Create a new file named manifest.json with the required properties: manifest_version, name, and version.
2. Add the basic properties to the manifest.json file.
3. Open Chrome, go to the extensions page, and load the unpacked extension by selecting the folder containing the manifest.json file.

Step 2: Add an Icon to the Extension

1. Add an icons property to the manifest.json file to specify the location of the icon.
2. Save the changes and reload the extension in the Chrome extensions tab to see the icon.

Step 3: Implement a Background Script

1. Add a background script to the manifest.json file.
2. Create a background script file (e.g., background.js) that includes necessary Chrome API functions.
3. Modify the permissions and host permissions in the manifest.json file.
4. Reload the extension and test the background script functionality.

Step 4: Create a Pop-up Window

1. Create an index.html file in the extension folder for the pop-up window.
2. Update the manifest.json file to include the path to the index.html file.
3. Customize the content of the index.html file.
4. Reload the extension to display the pop-up window when clicked.

Step 5: Enhance the Pop-up Functionality

1. Add scripts to the index.html file to interact with the active tab using Chrome API functions.
2. Test the functionality by clicking the button in the pop-up to trigger the script on the active tab.

Step 6: Upgrade to Vite and Typescript

1. Create a new Vite application using the terminal command: npm create vite@latest.
2. Develop and test the Vite application locally.
3. Copy the output folder (dist) containing the Vite application files.
4. Update the manifest.json file to point to the Vite application files in the dist folder.
5. Reload the extension to see the Vite application integrated as the Chrome extension.

Step 7: Implement Advanced Features

1. Modify the Vite application code to include interactive elements like a Color Picker.
2. Pass variables between the pop-up context and the active tab context using script arguments.
3. Test the Chrome extension by selecting a color in the Color Picker and changing the background color of a webpage.

Step 8: Further Exploration

1. Explore additional features and functionalities for Chrome extensions.
2. Consider taking a course on Vite for deeper understanding.
3. Watch related tutorials on running Typescript in VS Code and setting up the debugger.

By following these steps, you can successfully build a Chrome extension using Typescript and Vite with enhanced functionalities like interactive pop-ups and dynamic content manipulation.