chrome-extension-starter-typescript

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.

Project Structure

• 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.

Bundler

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.

Packages

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.

Commands

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.

Getting Started

1. Clone the repository:

git clone https://github.com/CodingWithTashi/chrome-extension-starter-typescript.git

2. Install dependencies

npm run install

3. Start application

npm run start

4. Format code

npm run format

5. Build application

npm run build