Chrome Extension Typescript starter
This is a starter project for building Chrome extensions using TypeScript. It includes a basic setup with a bundler and essential packages to streamline the development process.
This project is inspired from victor blog and code. https://victoronsoftware.com/posts/create-chrome-extension/
src/: Contains the source code for the extension.dist/: The output directory for the bundled code.manifest.json: The configuration file for the Chrome extension.
We are using webpack as the bundler for this project. Webpack helps in bundling the TypeScript code and other assets into a format that can be used by the Chrome extension. It also supports various loaders and plugins to handle different types of files and optimize the build process.
Here is a list of packages used in this project and their purposes:
typescript: Adds TypeScript support to the project.webpack: Bundles the source code and assets.webpack-cli: Provides a command-line interface for webpack.ts-loader: A TypeScript loader for webpack.html-webpack-plugin: Simplifies the creation of HTML files to serve the webpack bundles.clean-webpack-plugin: Cleans the output directory before each build.copy-webpack-plugin: Copies files from the source directory to the output directory.
Here are the commands defined in package.json and their purposes:
build: Runs webpack to bundle the source code and assets.watch: Runs webpack in watch mode to automatically rebuild the project on file changes.start: Starts a development server for the extension.lint: Runs ESLint to check for code quality issues.format-check: Formats check using Prettier.format: Formats the code using Prettier.
- Clone the repository:
git clone https://github.com/CodingWithTashi/chrome-extension-starter-typescript.git- Install dependencies
npm run install- Start application
npm run start- Format code
npm run format- Build application
npm run buildIf you enjoy this project, I'd appreciate your 🌟 on GitHub.
