Skip to content

Latest commit

 

History

History
82 lines (48 loc) · 2.9 KB

DEVELOP.md

File metadata and controls

82 lines (48 loc) · 2.9 KB
Raw

React Chrome Extension Boilerplate

A react boilerplate for building chrome extension.

Mounted with

Package Version
Webpack 5.x
TypeScript 4.x
ESLint 8.x
PostCSS 8.x
Less 4.x
Node SASS 8.x
Stylelint 14.x

How to develop

  1. Clone this repo.
  2. Run npm install.
  3. Start by npm start.
  4. Open chrome extensions chrome://extensions
  5. Click to load the extracted extension program and load the dist file in the project
  6. Open a page that uses a micro-frontend, such as https://yx.jd.com/material/#/product, open the page developer tool to see the micro-app chrome plugin.

micro-app chrome plugin

7.If you want to modify the code, new branch based on master branch.

The plugin can be hot loaded and updated in real time during development

How to build

  1. Build by npm run build.

  2. open chrome://extensions use by chrome 扩展程序

  3. found dist.crx change to dist.zip

How to make a release

  1. Open https://github.com/micro-zoe/micro-app-chrome-plugin/releases, click "Draft a new release" button.

  2. Choose a tag or create a new tag. The versioning follows the Semantic Versioning 2.0.0 specification for semantic versioning.

  3. Fill in the version number as the title. Include the update details in the description.

  4. Upload the artifacts of the current version as attachments.

  5. Publish release.

  6. Modify the download link in README.md to an attachment link.

How to fix a bug

  1. Open the relevant issue and create a branch in the "Development" sidebar. Please use only English for the branch name and avoid using Chinese.

  2. Perform bug fixes on this branch.

  3. When committing the code, include a comment in the commit message with the text "fixed #(issue number)" to reference the related issue.

  4. This issue will be automatically closed.

  5. Create a pull request with a title that includes "Fixed #(issue number)". This pull request will be automatically linked to the corresponding issue.

  6. Wait for the reviewers to review the code. Once the code review is approved, the code will be automatically merged into the branch.

Tips

For WSL users, here's a trick you can develop in a linux sub system with hot reload, and preview in windows host system Chrome application:

  1. In WSL

    npm start -- --distPath="/mnt/d/react-chrome-extension-boilerplate-dist"

  2. In chrome: Load unpack extension from D:/react-chrome-extension-boilerplate-dist