使用React、TypeScript、SCSS等构建的Chrome扩展程序入门套件
使用React、TypeScript、SCSS、Storybook、EsLint、Jest、Bootstrap和Webpack构建的Chrome扩展程序入门套件
JavaScript 其它杂项
共459Star
详细介绍
Getting Started
Run the following commands to install dependencies and start developing
yarn install
yarn dev
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
Loading the extension in Google Chrome
In Google Chrome, open up chrome://extensions in a new tab. Make sure the Developer Mode
checkbox in the upper-right corner is turned on. Click Load unpacked
and select the dist
directory in this repository - your extension should now be loaded.
Loading the extension in Brave
In Brave, open up brave://extensions in a new tab. Make sure the Developer Mode
checkbox in the upper-right corner is turned on. Click Load unpacked
and select the dist
directory in this repository - your extension should now be loaded.
Loading the extension in Mozilla Firefox
In Mozilla Firefox, open up the about:debugging page in a new tab. Click the Load Temporary Add-on...
button and select the manfiest.json
from the dist
directory in this repository - your extension should now be loaded.
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.
-
Microsoft Edge is not currently supported.
-
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
-
Includes a custom mock for the webextension-polyfill-ts package in
src/__mocks__
. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.
Built with
- React
- TypeScript
- Storybook
- Jest
- Eslint
- Prettier
- Webpack
- Babel
- Bootstrap
- SCSS
- webextension-polyfill-ts
Misc. References