https://github.com/kelcheone/ts-react-chrome-extension

A Typescript + React template for building chrome extensions.
https://github.com/kelcheone/ts-react-chrome-extension

chrome-extension chrome-plugin

Last synced: about 1 month ago
JSON representation

A Typescript + React template for building chrome extensions.

• Host: GitHub
• URL: https://github.com/kelcheone/ts-react-chrome-extension
• Owner: kelcheone
• Created: 2023-07-25T13:41:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-03T12:37:15.000Z (over 1 year ago)
• Last Synced: 2023-10-03T23:25:35.920Z (over 1 year ago)
• Topics: chrome-extension, chrome-plugin
• Language: JavaScript
• Homepage:
• Size: 223 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# React + TypeScript Chrome Extension Starter Kit (template)

This is a starter kit for building a Chrome extension using React and TypeScript. It uses [Webpack](https://webpack.js.org/) for bundling and can be used as a starting point for building your own Chrome extension.

## Getting Started

1. Create a new repository using this template

2. Run `yarn install` to install dependencies

3. Run `yarn build` to build the extension

4. Open Chrome and navigate to `chrome://extensions`

5. Enable developer mode

6. Click "Load unpacked" and select the `dist` folder in the project directory

7. The extension should now be loaded and visible in Chrome

## Development

Run `yarn start` to start a Webpack watch process. This will automatically rebuild the extension when changes are made. You can then load the extension in Chrome as described above.

## Folder Structure

- `src`: Contains the source code for the extension

- `src/background`: Contains the source code for the background script

- `src/contentScript`: Contains the source code for the content script

- `src/popup`: Contains the source code for the popup

- `src/static`: Contains static assets(`manifest.json` and images) that will be copied to the `dist` folder

## Note

Remember to change the `name` and `description` fields in `src/static/manifest.json` to match your extension.

Also in `webpack.common.js` change the `title` field in the `getHTMLPlugins` function to match your extension.