GutzC/chrome-extension-starter

Chrome Extension using Nx workspace and Angular.

📖 Table of Contents

• Prerequisites
• Getting Started
• Project Structure
• Commands
• Release
• License

🎯 Prerequisites

• Node.js (>= 16 required)
• npm package manager (>= 8 required)
• Chrome

🚀 Getting Started

1. Install dependencies

npm i

2. Run development live reload

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

ℹ️ More info about developing Chrome extension can be found here

🏗 Project Structure

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 also can inject content script which can be found in apps/scripts/content/src/main.ts.

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

🕹 Commands

Start with development configuration

npm run start:dev

Start with production configuration.

npm run start:prod

Build with development configuration.

npm run build:dev

Build with production configuration.

npm run build:prod

📦 Release

• Run npm run build:prod
• Create zip file from the extension directory
• Upload the zip to the Chrome developer dashboard

📜 License

MIT

chrome-extension-starter