Merge pull request #88 from pivanov/feat/extension

feat: Brave, Chrome and Firefox, add browser extension build automation

.github/workflows/build-extension.yml

@@ -0,0 +1,66 @@
+name: Build Extension
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/extension/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm store
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Get package info
+        id: package
+        run: |
+          echo "name=$(node -p "require('./packages/extension/package.json').name")" >> $GITHUB_OUTPUT
+          echo "version=$(node -p "require('./packages/extension/package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Build extensions
+        run: |
+          cd packages/extension
+          pnpm pack:all
+
+      - name: Commit changes
+        if: github.ref == 'refs/heads/main'
+        run: |
+          git checkout main
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add -f packages/extension/build/*.zip
+          git diff --staged --quiet || (git commit -m "chore: update extension builds [skip ci]" && git push)

.gitignore

@@ -3,3 +3,7 @@ node_modules
 .env
 dist
 **/*.tgz
+packages/extension/build/
+!packages/extension/build/react-scan-extension.zip
+*.log
+build

CHROME_EXTENSION_GUIDE.md

@@ -1,10 +1,27 @@
-# Chrome Extension Installation Guide
+# BrowserExtension Installation Guide
 
 > [!WARNING]
-> React Scan's Chrome extension is still pending approval from the Chrome Web Store. Below is a guide to installing the extension manually.
+> React Scan's Browser extension is still pending approvals from the Chrome Web Store, Firefox Add-ons, and Brave Browser. Below is a guide to installing the extension manually.
 
-1. Download the [`dist.zip`](https://github.com/aidenybai/react-scan/blob/main/packages/extension/dist.zip?raw=true) file.
+## Chrome
+
+1. Download the [`chrome-react-scanner-extension-v1.0.0.zip`](https://github.com/aidenybai/react-scan/blob/main/packages/extension/build/chrome-react-scanner-extension-v1.0.0.zip?raw=true) file.
 2. Unzip the file.
 3. Open Chrome and navigate to `chrome://extensions/`.
 4. Enable "Developer mode" if it is not already enabled.
 5. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).
+
+## Firefox
+
+1. Download the [`firefox-react-scanner-extension-v1.0.0.zip`](https://github.com/aidenybai/react-scan/blob/main/packages/extension/build/firefox-react-scanner-extension-v1.0.0.zip?raw=true) file.
+2. Unzip the file.
+3. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`.
+4. Click "Load Temporary Add-on..."
+5. Select `manifest.json` from the unzipped folder
+
+## Brave
+
+1. Download the [`brave-react-scanner-extension-v1.0.0.zip`](https://github.com/aidenybai/react-scan/blob/main/packages/extension/build/brave-react-scanner-extension-v1.0.0.zip?raw=true) file.
+2. Unzip the file.
+3. Open Brave and navigate to `brave://extensions`.
+4. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).

packages/extension/.env.example

@@ -1,3 +1,17 @@
-# Path to the Chromium binary
-# You only need to set this if you're not using Google Chrome
-CHROMIUM_BINARY="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
+# Browser binary paths
+# You only need to set these if the browsers are not in standard locations
+
+# For macOS, use paths like:
+BRAVE_BINARY="/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser"
+CHROME_BINARY="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
+FIREFOX_BINARY="/Applications/Firefox.app/Contents/MacOS/firefox-bin"
+
+# For Windows, use paths like:
+# BRAVE_BINARY="C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"
+# CHROME_BINARY="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
+# FIREFOX_BINARY="C:\\Program Files\\Mozilla Firefox\\firefox.exe"
+
+# For Linux, use paths like:
+# BRAVE_BINARY="/usr/bin/brave"
+# CHROME_BINARY="/usr/bin/google-chrome"
+# FIREFOX_BINARY="/usr/bin/firefox"

packages/extension/README.md

@@ -1 +1,71 @@
-WIP
+# React Scanner Extension
+
+Browser extension for scanning React applications and identifying performance issues.
+
+
+### Environment Variables
+
+When developing with Brave, you need to set the `BRAVE_BINARY` environment variable. Create a `.env` file (copy from `.env.example`):
+
+```env
+# For macOS
+BRAVE_BINARY="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
+
+# For Windows
+BRAVE_BINARY="C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"
+
+# For Linux
+BRAVE_BINARY="/usr/bin/brave"
+```
+
+### Development Setup
+#### For Chrome
+1. Run development server:
+   ```bash
+   pnpm dev
+   ```
+3. This will automatically open Chrome with the extension loaded.
+
+<i>If you need to inspect the extension, open `chrome://extensions` in Chrome</i>
+#### For Firefox
+
+<br />
+
+#### For Firefox
+1. Run development server:
+   ```bash
+   pnpm dev:firefox
+   ```
+2. This will automatically open Firefox with the extension loaded.
+
+<i>If you need to inspect the extension, open `about:debugging#/runtime/this-firefox` in Firefox</i>
+
+<br />
+
+#### For Brave
+
+1. Run development server:
+   ```bash
+   pnpm dev:brave
+   ```
+
+2. This will automatically open Brave with the extension loaded.
+
+<i>If you need to inspect the extension, open `brave://extensions` in Brave</i>
+
+<br />
+
+### Building for Production
+
+To build the extension for all browsers:
+
+```bash
+pnpm pack:all
+```
+
+This will create:
+- `chrome-react-scanner-extension-v1.0.0.zip`
+- `firefox-react-scanner-extension-v1.0.0.zip`
+- `brave-react-scanner-extension-v1.0.0.zip`
+
+in the `build` directory.

packages/extension/package.json

@@ -4,8 +4,17 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build",
-    "dev": "dotenv -- vite build --watch --mode development"
+    "clean": "rm -rf dist",
+    "build": "vite build",
+    "dev": "pnpm dev:chrome",
+    "dev:chrome": "cross-env BROWSER=chrome vite",
+    "dev:firefox": "cross-env BROWSER=firefox vite",
+    "dev:brave": "cross-env BROWSER=brave vite",
+    "mkdir": "mkdir -p build",
+    "pack:chrome": "pnpm clean && pnpm build && pnpm mkdir && bestzip build/chrome-$npm_package_name-v$npm_package_version.zip dist/*",
+    "pack:firefox": "pnpm clean && BROWSER=firefox vite build && pnpm mkdir && bestzip build/firefox-$npm_package_name-v$npm_package_version.zip dist/*",
+    "pack:brave": "pnpm clean && BROWSER=brave vite build && pnpm mkdir && bestzip build/brave-$npm_package_name-v$npm_package_version.zip dist/*",
+    "pack:all": "rm -rf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -18,10 +27,11 @@
     "@types/react-dom": "^18.0.9",
     "@types/webextension-polyfill": "^0.10.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "dotenv-cli": "^7.4.2",
+    "bestzip": "^2.2.1",
+    "cross-env": "^7.0.3",
     "typescript": "~5.6.3",
     "vite": "^5.4.3",
-    "vite-plugin-web-extension": "^4.0.0",
+    "vite-plugin-web-extension": "^4.3.1",
     "webextension-polyfill": "^0.10.0"
   }
 }