GitHub - aeksco/react-typescript-chrome-extension-starter: A Chrome Extension st...
source link: https://github.com/aeksco/react-typescript-chrome-extension-starter
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
react-typescript-chrome-extension-starter
🖥 A Chrome Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Jest, Bootstrap, & Webpack.
Getting Started
- Run the following commands to install dependencies and
yarn install
yarn dev
- Open up chrome://extensions in your browser. Make sure the
Developer Mode
checkbox in the upper-right corner is turned on. ClickLoad unpacked
and select thedist
directory in this repository - your extension should now be loaded.
Scripts
yarn dev
- runwebpack
inwatch
modeyarn storybook
- runs the Storybook serveryarn build
- builds the production-ready unpacked extensionyarn test -u
- runs Jest + updates test snapshotsyarn lint
- runs EsLintyarn prettify
- runs Prettier
Notes
-
Includes ESLint configured to work with TypeScript and Prettier.
-
Includes tests with Jest - note that the
babel.config.js
and associated dependencies are only necessary for Jest to work with TypeScript. -
Recommended to use
Visual Studio Code
with theFormat on Save
setting turned on. -
Example icons courtesy of FontAwesome.
-
Includes Storybook configured to work with React + TypeScript. Note that it maintains its own
webpack.config.js
andtsconfig.json
files. See example story insrc/components/hello/__tests__/hello.stories.tsx
Built with
Misc. References
- Chrome Extension Developer Guide
- https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb
ToDos
- Build out
README.md
- Description of tech used
- Document directory structure
- Add icons for tech used
- Add screenshots of Storybook
- Add screenshots of example extension
- Add links to Chrome Extension dev docs
- Add component with JS script injection example
- Add
EsLint
- Add Bootstrap + SCSS
- Add
Storybook
for more controlled component development - Add
SCSS
support - Add
manifest.json
- Add
popup.html
- Add
popup
React component - Add
Jest
+ snapshot tests - Add example icons
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK