From 3bc4ef68e073c37c463197873fd7093d37edbff0 Mon Sep 17 00:00:00 2001 From: lin onetwo Date: Sun, 26 Jan 2025 12:27:29 +0800 Subject: [PATCH] Create Development.md --- docs/Development.md | 65 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 docs/Development.md diff --git a/docs/Development.md b/docs/Development.md new file mode 100644 index 0000000..7080e8f --- /dev/null +++ b/docs/Development.md @@ -0,0 +1,65 @@ +# Development + +## Running in dev mode + +Ensure you have + +- [Node.js](https://nodejs.org) 16 or later installed +- [pnpm](https://pnpm.io) installed + +Then run the following: + +- `pnpm install` to install dependencies. +- `pnpm dev` to start the development server. +- `pnpm build` to build an unpacked extension in `dist` `dist-firefox`, and bundle packed zips in `bundle` folder. + +### Load dev extension in Chrome (Chromium, Manifest V3)** + +1. Go to the browser address bar and type `chrome://extensions` +1. Check the `Developer Mode` button to enable it. +1. Click on the `Load Unpacked Extension` button. +1. Select your `dist` folder in the project root. + +### Load dev extension in Firefox (Partial Manifest V3)** + +1. Go to the browser address bar and type [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox) (not the [about:addons](about:addons)) +1. Click on the `Load Temporary Add-on` list item after click on setting button. +1. Select your `dist-firefox` folder in the project root. +1. [Debug popup in firefox](https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html) + +### Other Commands + +- `pnpm clean` to remove dist folder. `dev` and `build` commands call this command. +- `pnpm format` to fix code with eslint and prettier. +- `pnpm lint` to call ESLint and Prettier. +- `pnpm test` for testing. + +### Upload to Store + +1. tag a git commit with `vx.x.x` or `vx.x.x-xxx` +1. Github Action will auto release new zips to https://github.com/tiddly-gittly/Browser-Extension-Tiddlywiki-Collector/releases +1. Manually upload zip to stores + +- Firefox: https://addons.mozilla.org/zh-CN/developers/addons +- Chrome: https://chrome.google.com/u/2/webstore/devconsole + +### zustand + +You can use zustand (zustand-toolkit) as state manager between popup, background, content and custom pages. Read the documentation for more. + +#### [@eduardoac-skimlinks/webext-zustand](https://github.com/eduardoacskimlinks/webext-zustand) + +## Bundling + +#### [@crxjs/vite-plugin](https://github.com/crxjs/chrome-extension-tools) + +> **Note** This plugin powers the development side of this starter. +> +> docs: https://crxjs.dev/vite-plugin +> +> Special thanks to [@jacksteamdev](https://github.com/jacksteamdev) and contributors for this amazing plugin. + +## Commit and PR + +This repository is following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard. +