A quick way to get started building Chrome Extensions with React and Tailwind CSS.
This project was developed and tested with Node 14.17.0 and yarn 1.22.15.
- Click Use this template.
- Clone the repository.
- Install dependencies by running:
yarn install- Build the extension by running:
yarn build- In your browser, go to
chrome://extensions/and enable developer mode.
Click the Chrome menu icon and select Extensions from the Tools menu. Ensure that the "Developer mode" checkbox in the top right-hand corner is checked.
- Click Load unpacked.
- Upload the
build/directory from the project.
The manifest.json file is located in the public/ directory. For the most part, the extension functions like a normal React app. Make changes in the src/App.js file. After making a change, you need to:
- Rebuild the app:
yarn build- Refresh the extension upload. In your browser, go to
chrome://extensions/. Click the refresh icon on your extension's card.
- @testing-library/jest-dom
^5.11.4 - @testing-library/react
^11.1.0 - @testing-library/user-event
^12.1.10 - react
^17.0.2 - react-dom
^17.0.2 - react-scripts
"4.0.3 - web-vitals
^1.0.
- autoprefixer
9.0.0 - postcss
7.0.0 - tailwindcss
npm:@tailwindcss/postcss7-compat@^2.2.17