Chrome Extension Angular Boilerplate

Chrome Extension starter using Nx workspace and Angular.

📖 Table of Contents

• Features
• Getting Started
• Project Structure
• Commands
• License

✨ Features

✅ Nx Workspace

✅ Angular

✅ Tailwind

✅ Live Reload

✅ Popup Page

✅ Options Page

✅ Devtools Panel

✅ Background Script

✅ Content Script

✅ E2E testing

✅ CI/CD

🚀 Getting Started

1. Install dependencies

yarn install

2. Run development live reload

yarn 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

🏗 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 6 components:

1. Metadata (components/metadata) - manifest and static assets for extensions
2. Popup (components/popup) - used for the upper popup
3. Options (components/options) - used for the options page
4. DevTools Panel (components/devtools-panel) - used for the devtools panel
5. Background Script (components/background-script) - used for run background job readmore
6. Content Script (components/content-script) - script run in the context of web pages readmore

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

We are also can inject content script which can be found in components/content-script/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

yarn start:dev

Start with production configuration.

yarn start:prod

Build with development configuration.

yarn build:dev

Build with production configuration.

yarn build:prod

Run unit test

yarn test:unit

Run test e2e

yarn test:e2e

Run test on ci

yarn test:ci

📜 License

MIT