denisz / web-extension-starter

Typescript React Redux Styled-Component Webpack based web extension boilerplate. Runs on Chrome and Firefox.

Web Extension Starter

This project containes a minimal setup for developing a performant and well structured web extension. The extension contains a demonstration counter that is displayed on the popup and options pages as well as any open tab.

Good to know before using:

• Typescript
• React
• redux
• styled-components

Requirements:

• NodeJS - Javascript runtime
• VSCode - Recomended editor
• Chrome or Firefox - Web browser

How to run:

In terminal or command prompt

install dependencies
 - npm install
Transpile the code
 - npm run dev (only transpiles the code)
 - npm run watch (transpiles and watches for code changes)


yarn commands will work too if yarn is installed.

In Chrome web browser

1. Go to: chrome://extensions
2. Toggle: "developer mode" on.
3. Click on: "Load unpacked"
4. Select the newly created folder "dist" from the project folder.
5. Thats it.

In Firefox web browser

1. Go to: about:debugging
2. Select: "Enable add-on debugging"
3. Click on: "Load Temporary Add-on…"
4. Open the newly created folder "dist" from the project folder, and choose the "manifest.json" file.
5. Thats it.

License

MIT