create-ts-react-extension

React & Redux & Tailwind bundle Web Extension Template

Create React & Redux & Tailwind bundle Web Extension Template with no config.

• Creating an App – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

create-ts-react-extension works on Firefox, Chrome. If something doesn’t work, please file an issue. If you have questions or need help, please ask in GitHub Discussions.

Authors

• @Hokanosekai
• @FTT

Quick Overview

npx create-ts-react-extension my-app
cd my-app
npm install
npm run build
npm run web-run:firefox

Then click on the extension popup.

//GIF TERMIANL CREATE APP

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel.

You can modify your prefered manifest config

├── manifest
│   ├── beta-manifest-extra.json
│   ├── chrome-manifest-extra.json
│   ├── firefox-beta-manifest-extra.json
│   ├── firefox-manifest-extra.json
│   ├── manifest.json
│   └── safari-manifest-extra.json
...

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version, Firefox and Chromium if you want to dev on chrome on your local development machine . We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-ts-react-extension my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init ts-react-extension my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create create-ts-react-extension my-app

yarn create <starter-kit-package> is available in Yarn 0.25+

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
.
├── dist
│   ├── assets
│   │   └── icons
│   │       ├── bmac2.png
│   │       ├── bmac.png
│   │       ├── github.png
│   │       └── ytb.png
│   ├── css
│   │   └── style.css
│   ├── js
│   │   ├── background.js
│   │   ├── browser-polyfill.js
│   │   ├── content.js
│   │   ├── options.js
│   │   ├── popup.js
│   │   └── vendor.js
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── options
│   │   └── options.html
│   └── popup.html
├── manifest
│   ├── beta-manifest-extra.json
│   ├── chrome-manifest-extra.json
│   ├── firefox-beta-manifest-extra.json
│   ├── firefox-manifest-extra.json
│   ├── manifest.json
│   └── safari-manifest-extra.json
├── package.json
├── package-lock.json
├── public
│   ├── assets
│   │   └── icons
│   │       ├── bmac2.png
│   │       ├── bmac.png
│   │       ├── github.png
│   │       └── ytb.png
│   ├── css
│   │   └── style.css
│   ├── logo192.png
│   ├── logo512.png
│   ├── options
│   │   └── options.html
│   └── popup.html
├── README.md
├── src
│   ├── background.ts
│   ├── components
│   │   ├── options
│   │   │   ├── Footer.tsx
│   │   │   └── Options.tsx
│   │   ├── popup
│   │   │   ├── Footer.tsx
│   │   │   └── Header.tsx
│   │   └── Popup.tsx
│   ├── content-script.ts
│   ├── css
│   │   └── index.css
│   ├── options.ts
│   ├── popup.ts
│   ├── react-app-env.d.ts
│   ├── redux
│   │   ├── Actions.ts
│   │   ├── ActionsTypes.ts
│   │   ├── reducers
│   │   │   ├── index.ts
│   │   │   └── MessageState.ts
│   │   └── store.ts
│   ├── render
│   │   ├── OptionsRenderer.tsx
│   │   └── PopupRenderer.tsx
│   ├── serviceWorker.ts
│   ├── types.ts
│   └── utils
│       └── utils.ts
├── tailwind.config.cjs
├── tsconfig.json
└── webpack
    ├── webpack.common.js
    ├── webpack.dev.js
    ├── webpack.manifest.cjs
    └── webpack.prod.js

cd my-app

Inside the newly created project, you can run some built-in commands:

npm "build:watch:firefox"

Runs the app in watch mode and open a .

Wait Firefox to load.

The addon will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console of the developpment tool section.

//GIF

npm test

No test implementation yet.

npm run build or yarn build

Builds the app for production to the dist folder. It correctly bundles React & Tailwinds in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

What’s Included?

Your environment will have everything you need to build a modern single-page React app:

• React, JSX, ES6, TypeScript, Eslint, Tailwind and Flow syntax support.

• Language extras beyond ES6 like the object spread operator.

• Autoprefixed CSS, so you don’t need -webkit- or other prefixes.

• A build script to bundle manifest, JS, HTML Template for production, with hashes and sourcemaps.

• A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.

Contributing

We'd love to have your helping hand on create-ts-react-extension! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Supporting Create React App

Create React App is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our Open Collective.

License

Create React App is open source software licensed as MIT. The Create React App logo is licensed under a Creative Commons Attribution 4.0 International license.