An all-in-one starter for React developers that supports workspace (eslint, prettier, vscode settings,...) and also a playground mode for quick review of changes.
π‘ If you're looking for a starter using TypeScript only (without React), check this repository!
You can check all specs in package.json
.
- Javascript bundler: Webpack (for building the extension), Vite (for the playground mode*).
- React: React core, React Router DOM.
- Dev: ESLint (with all necessary plugins), Prettier.
- Styling: Tailwind CSS (with autoprefixer, postcss), SCSS supported.
- Utilities: lodash, webextension-polyfill, classnames, react-icons
*What is the playground mode? Normally, when you make changes to the source codes, you have to reload the extension on the Extensions Manager page. This is annoying if you are just developing the style of a component. It's better if you can see the changes in real time. This is where the playground mode comes into play. We use Webpack to create our main extension bundle (in the /dist
folder), and we use Vite for the Playground Mode. Read more in the section Playground mode.
For tester: Unzip
prod-packages/v0.0.1.zip
into a folder and then follow the next step!
Open the extension manager page of the Chromium-based browser > Enable "Developer mode" > "Load unpackaged" > Select the extension's build folder (eg. dist/
) or the unzipped folder.
β οΈ Warning: For the purpose of the demo, the extension is only enabled when you browsehttps://www.google.com/
. Change this in thesrc/static/manifest.json
!
After the installation, go to https://www.google.com/
to see a welcome panel is added at the bottom right of the page.
By default it says Hello anybody!
. You can open the popup by clicking the extension icon on the header bar to input with your name. After that, the panel changes to say Hello <your input>!
The same input field is presented in the option page of the extension.
You can also go to http://localhost:5173/
when you work with the playground.
π‘ You can use
npm
if you want.
# first install
yarn
# (use webpack) dev, package is built to dist/
yarn watch
# (use webpack) build a prod version, package is built to dist-prod/
yarn build
# π‘ I've built a script to automatically archive the dist-prod/ folder
# into a .zip file with the name of the current version
# For example, prod-packages/v0.0.1.zip
# You can use this .zip to upload to the Chrome Webstore!
# (use vite) run playground mode, also in watch mode (no visibale built folder)
yarn playground
yarn playground
This mode runs a React app that uses the same components as the main app. Please note that in playground mode we cannot use api browser
from webextension-polyfill
nor chrome
from Chrome API. Therefore we need to use 2 different files with names like XXXBrowser.*
and XXXPlayground.*
(for example, helpersBrowser.ts
and helpersPlayground
). The former is used in extension and the latter in playground mode.
You can test each component (isolatedly from the main app) by adding it to the src/react-playground/App.tsx
file.
tailwind.scss
: contains 3 tailwind assets. Note that, intailwind.config.js
, I useimportant: '.dinhanhthi'
to make tailwind to work . This means that, the tailwind classes will only take effect inside the element that contains the classdinhanhthi
.- The
content_script.scss
contains custom styles used only for the content script. - The
global.scss
contains custom styles used for both extension (contentscript, popup, options) and the playground. - The
option.scss
contains custom styles used only for the option page. - The
popup.scss
contains custom styles used only for the popup.
- Change the version in both
package.json
andmanifest.json
. The former is for the version of the package, the latter is for the version of the extension. They are usually the same.