diff --git a/README.md b/README.md index cbc6c38..a66c00f 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ # 💫 ALX Intranet Extension 💫 -
+ +
(Screenshot from v0.2.2)
Tutorial Video By Mounssif ❤️
## 🎛️ Features @@ -33,27 +34,63 @@ fully customize the styling of your intranet page There are several ways to install the extension: -- **Chrome Web Store**: You can install the extension directly from the Chrome Web Store. Updates may be delayed by ~2 days due to the store review process. -- **Release Assets**: You can download the ZIP file from the Release Assets and extract it to a folder on your computer. Then, - - Open your browser and navigate to the extensions page (`chrome://extensions` for Chrome or `edge://extensions` for Edge). - - Enable developer mode by toggling the switch in the top right corner of the extensions page. - - Click on the Load unpacked button and select the folder where you extracted the extension files. - - The extension should now be installed and ready to use! -- **Build from Source**: Requires Node.js >16.6 or >18 and either `yarn` (recommended) or `npm`. Run `yarn install` followed by `yarn build`. After, you will have a `dist` folder. Follow the previous instructions in the "Release Assets" to install the extension from the `dist` folder. +- **Web Stores**: For chromium-based browsers Chrome Web Store. + +- **Release Assets**: Download the ZIP file from the Release Assets and extract it to a folder. Then, + 1- Navigate to the dev extension page (Chrome `chrome://extensions`, Edge `edge://extensions`, + Firefox `about:debugging#/runtime/this-firefox`). + 2- Enable developer mode by toggling the switch in the top right corner of the extensions page. + 3- Click on the `Load Unpacked`, in Firefox click `Load Temporary Add-on`. + 4- Select the folder where you extracted the extension files. + 5- The extension should now be installed and ready to use! +- **Build from Source**: check following [section](#🔧-dev-and-build) to build the extension. After, you will have a `dist` folder. Follow the previous instructions in the "Release Assets" start from step 1 to install the extension from the `dist` folder. + +## 🔧 Dev and Build + +> [!NOTE] +> Requires nodeJs v18 or higher, install `pnpm` (recommended) + +### Chrome + +- run in dev mode + +```sh +pnpm dev +``` + +- build the extension -## ⚙️ Usage +```sh +pnpm build +``` + +### Firefox + +- run in dev mode + +```sh +pnpm dev:firefox +``` + +- build the extension + +```sh +pnpm build:firefox +``` + +## 🧭 Usage - **Initial Files and Directories:** Click `[Tasks]` button, and paste the command in your terminal, then click Enter -- **Task Navigation:** - Press the number keys on your keyboard to navigate to the corresponding task. - For example, pressing the 1 key will scroll the page to task 1.