https://github.com/avivharuzi/chrome-extension-starter

Chrome Extension starter using Nx workspace and Angular
https://github.com/avivharuzi/chrome-extension-starter

angular chrome chrome-devtools chrome-extension nx nx-workspace typescript

Last synced: 3 months ago
JSON representation

Chrome Extension starter using Nx workspace and Angular

• Host: GitHub
• URL: https://github.com/avivharuzi/chrome-extension-starter
• Owner: avivharuzi
• License: mit
• Created: 2022-05-15T16:13:21.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-09T08:49:05.000Z (about 1 year ago)
• Last Synced: 2024-04-14T21:18:18.571Z (10 months ago)
• Topics: angular, chrome, chrome-devtools, chrome-extension, nx, nx-workspace, typescript
• Language: TypeScript
• Homepage:
• Size: 1.4 MB
• Stars: 27
• Watchers: 4
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.config.js
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chrome Extension Starter

![Chrome Extension Starter Logo](.github/images/logo.png)

Chrome Extension starter using Nx workspace and Angular.

## 📖 Table of Contents

- [Features](#✨-Features)

- [Prerequisites](#🎯-Prerequisites)

- [Getting Started](#🚀-Getting-Started)

- [Project Structure](#🏗-Project-Structure)

- [Commands](#🕹-Commands)

- [Release](#📦-Release)

- [License](#📜-License)

## ✨ Features

✅ Nx Workspace

✅ Angular

✅ Typescript

✅ Chrome Types

✅ Live Reload

✅ Very Fast Build

✅ All In One Command

✅ Support Manifest V3

✅ Popup Page

✅ Options Page

✅ Devtools Panel

✅ Background Script

✅ Content Script

## 🎯 Prerequisites

- [Node.js](https://nodejs.org) (>= 16 required)

- npm package manager (>= 8 required)

- [Chrome](https://www.google.com/chrome)

## 🚀 Getting Started

1. Install dependencies

```shell

npm i

```

2. Run development live reload

```shell

npm run start:dev

```

3. Open Chrome browser

4. Go to this url: `chrome://extensions`

5. Click on `"Developer mode"`

6. Click on `"Load unpacked"`

7. Choose the `extension` directory from this root directory

8. Yay, you did it! 😏

9. Now update the code as you want! 😛

> ℹ️ More info about developing Chrome extension can be found [here](https://developer.chrome.com/docs/extensions/mv3)

## 🏗 Project Structure

So the purpose is to take the advantage of the type system of TypeScript and to use the power of Nx workspace to create multiple applications with the powerful framework Angular!

So we have 3 applications:

1. Popup (`apps/popup`) - used for the upper popup

2. Options (`apps/options`) - used for the options page

3. DevTools Panel (`apps/devtools-panel`) - used for the devtools panel

In every Chrome extension we have background script that communicate with the content scripts, which can be found in `apps/scripts/background/src/main.ts`.

We are also can inject content script which can be found in `apps/scripts/content/src/main.ts`.

All the applications have already the Chrome types so can just use `chrome` and the editor will recognize it.

## 🕹 Commands

Start with development configuration

```shell

npm run start:dev

```

Start with production configuration.

```shell

npm run start:prod

```

Build with development configuration.

```shell

npm run build:dev

```

Build with production configuration.

```shell

npm run build:prod

```

## 📦 Release

I recommend making the release automatic with GitHub actions or other ci service.

- Bump the version number in `manifest.json`

- Create a git tag containing the version you are releasing using `git tag -a `

- Run `npm run build:prod`

- Create zip file from the extension directory

- Upload the zip to the Chrome developer dashboard

## 📜 License

[MIT](LICENSE)