Folder Structure

Here is the structure of the important folders

.
├── configs
├── custom-bootstrap
├── dist
│   ├── manifest-v2
│   └── manifest-v3
├── docs
├── public
│   ├── css
│   ├── icons
│   ├── js
│   ├── manifest-common.json
│   ├── manifest-v2.json
│   └── manifest-v3.json
├── src
│   ├── components
│   ├── popup
|   |   ├── components
|   |   ├── localization
|   |   |   ├── locales
|   |   |   └── i18n.ts
|   |   ├── models
|   |   ├── index.html
|   |   ├── index.tsx
|   |   └── routes.tsx
│   └── services
└── index.html

Here is a brief summary of what the folders do and what they contain

configs - it contains different webpack configurations for building different manifest versions of the extension

custom-bootstrap - it contains configuration to customize the bootstrap. How to customize it, we'll discuss it in another section

dist - it contains the final compiled output of the different manifest versions

docs - it contains the doc in the readme.md file inside it

public - anything placed in this folder is outputted as is in the final distribution so that our app can reference these.

src - it contains all the source files

Inside the src folder components - this folder contains different global components that is used in different sections of the project

popup - this contains the code for the popup, currently there is a sample todo app in it

services - this folder contains different helper services or ts files that contains some utility or our business logics

Inside the popup folder components - different components of the popup

localization - this contains different translations in the locale folder inside it. Currently the german and english translations are included and sample for how to change language is included in the sample app. How to change translations or add new language is discussed in another section.

models - this will contain different model class or interfaces that is used to pass data between different layers in the popup. These models are used to communicate data between services and ui components