Skip to content

Commit e4cdec1

Browse files
aidenybaiaidenybai
authored
Merge pull request #88 from pivanov/feat/extension
feat: Brave, Chrome and Firefox, add browser extension build automation
2 parents 3c9b2be + 9c91dea commit e4cdec1

File tree

19 files changed

+1088
-317
lines changed

19 files changed

+1088
-317
lines changed

‎.github/workflows/build-extension.yml‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
name: Build Extension
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- 'packages/extension/**'
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
permissions:
14+
contents: write
15+
16+
steps:
17+
- uses: actions/checkout@v4
18+
with:
19+
fetch-depth: 0
20+
ref: main
21+
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: '20'
26+
27+
- name: Setup PNPM
28+
uses: pnpm/action-setup@v2
29+
with:
30+
version: 8
31+
32+
- name: Get pnpm store directory
33+
id: pnpm-cache
34+
run: |
35+
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
36+
37+
- name: Cache pnpm store
38+
uses: actions/cache@v3
39+
with:
40+
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
41+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
42+
restore-keys: |
43+
${{ runner.os }}-pnpm-store-
44+
45+
- name: Install dependencies
46+
run: pnpm install
47+
48+
- name: Get package info
49+
id: package
50+
run: |
51+
echo "name=$(node -p "require('./packages/extension/package.json').name")" >> $GITHUB_OUTPUT
52+
echo "version=$(node -p "require('./packages/extension/package.json').version")" >> $GITHUB_OUTPUT
53+
54+
- name: Build extensions
55+
run: |
56+
cd packages/extension
57+
pnpm pack:all
58+
59+
- name: Commit changes
60+
if: github.ref == 'refs/heads/main'
61+
run: |
62+
git checkout main
63+
git config --local user.email "github-actions[bot]@users.noreply.github.com"
64+
git config --local user.name "github-actions[bot]"
65+
git add -f packages/extension/build/*.zip
66+
git diff --staged --quiet || (git commit -m "chore: update extension builds [skip ci]" && git push)

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@ node_modules
33
.env
44
dist
55
**/*.tgz
6+
packages/extension/build/
7+
!packages/extension/build/react-scan-extension.zip
8+
*.log
9+
build

‎CHROME_EXTENSION_GUIDE.md‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
1-
# Chrome Extension Installation Guide
1+
# BrowserExtension Installation Guide
22

33
> [!WARNING]
4-
> React Scan's Chrome extension is still pending approval from the Chrome Web Store. Below is a guide to installing the extension manually.
4+
> 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.
55
6-
1. Download the [`dist.zip`](https://github.com/aidenybai/react-scan/blob/main/packages/extension/dist.zip?raw=true) file.
6+
## Chrome
7+
8+
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.
79
2. Unzip the file.
810
3. Open Chrome and navigate to `chrome://extensions/`.
911
4. Enable "Developer mode" if it is not already enabled.
1012
5. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).
13+
14+
## Firefox
15+
16+
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.
17+
2. Unzip the file.
18+
3. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`.
19+
4. Click "Load Temporary Add-on..."
20+
5. Select `manifest.json` from the unzipped folder
21+
22+
## Brave
23+
24+
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.
25+
2. Unzip the file.
26+
3. Open Brave and navigate to `brave://extensions`.
27+
4. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).

‎packages/extension/.env.example‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1-
# Path to the Chromium binary
2-
# You only need to set this if you're not using Google Chrome
3-
CHROMIUM_BINARY="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
1+
# Browser binary paths
2+
# You only need to set these if the browsers are not in standard locations
3+
4+
# For macOS, use paths like:
5+
BRAVE_BINARY="/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser"
6+
CHROME_BINARY="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
7+
FIREFOX_BINARY="/Applications/Firefox.app/Contents/MacOS/firefox-bin"
8+
9+
# For Windows, use paths like:
10+
# BRAVE_BINARY="C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"
11+
# CHROME_BINARY="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
12+
# FIREFOX_BINARY="C:\\Program Files\\Mozilla Firefox\\firefox.exe"
13+
14+
# For Linux, use paths like:
15+
# BRAVE_BINARY="/usr/bin/brave"
16+
# CHROME_BINARY="/usr/bin/google-chrome"
17+
# FIREFOX_BINARY="/usr/bin/firefox"

‎packages/extension/README.md‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,71 @@
1-
WIP
1+
# React Scanner Extension
2+
3+
Browser extension for scanning React applications and identifying performance issues.
4+
5+
6+
### Environment Variables
7+
8+
When developing with Brave, you need to set the `BRAVE_BINARY` environment variable. Create a `.env` file (copy from `.env.example`):
9+
10+
```env
11+
# For macOS
12+
BRAVE_BINARY="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
13+
14+
# For Windows
15+
BRAVE_BINARY="C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"
16+
17+
# For Linux
18+
BRAVE_BINARY="/usr/bin/brave"
19+
```
20+
21+
### Development Setup
22+
#### For Chrome
23+
1. Run development server:
24+
```bash
25+
pnpm dev
26+
```
27+
3. This will automatically open Chrome with the extension loaded.
28+
29+
<i>If you need to inspect the extension, open `chrome://extensions` in Chrome</i>
30+
#### For Firefox
31+
32+
<br />
33+
34+
#### For Firefox
35+
1. Run development server:
36+
```bash
37+
pnpm dev:firefox
38+
```
39+
2. This will automatically open Firefox with the extension loaded.
40+
41+
<i>If you need to inspect the extension, open `about:debugging#/runtime/this-firefox` in Firefox</i>
42+
43+
<br />
44+
45+
#### For Brave
46+
47+
1. Run development server:
48+
```bash
49+
pnpm dev:brave
50+
```
51+
52+
2. This will automatically open Brave with the extension loaded.
53+
54+
<i>If you need to inspect the extension, open `brave://extensions` in Brave</i>
55+
56+
<br />
57+
58+
### Building for Production
59+
60+
To build the extension for all browsers:
61+
62+
```bash
63+
pnpm pack:all
64+
```
65+
66+
This will create:
67+
- `chrome-react-scanner-extension-v1.0.0.zip`
68+
- `firefox-react-scanner-extension-v1.0.0.zip`
69+
- `brave-react-scanner-extension-v1.0.0.zip`
70+
71+
in the `build` directory.

‎packages/extension/package.json‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
"private": true,
55
"type": "module",
66
"scripts": {
7-
"build": "tsc && vite build",
8-
"dev": "dotenv -- vite build --watch --mode development"
7+
"clean": "rm -rf dist",
8+
"build": "vite build",
9+
"dev": "pnpm dev:chrome",
10+
"dev:chrome": "cross-env BROWSER=chrome vite",
11+
"dev:firefox": "cross-env BROWSER=firefox vite",
12+
"dev:brave": "cross-env BROWSER=brave vite",
13+
"mkdir": "mkdir -p build",
14+
"pack:chrome": "pnpm clean && pnpm build && pnpm mkdir && bestzip build/chrome-$npm_package_name-v$npm_package_version.zip dist/*",
15+
"pack:firefox": "pnpm clean && BROWSER=firefox vite build && pnpm mkdir && bestzip build/firefox-$npm_package_name-v$npm_package_version.zip dist/*",
16+
"pack:brave": "pnpm clean && BROWSER=brave vite build && pnpm mkdir && bestzip build/brave-$npm_package_name-v$npm_package_version.zip dist/*",
17+
"pack:all": "rm -rf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave"
918
},
1019
"dependencies": {
1120
"react": "^18.2.0",
@@ -18,10 +27,11 @@
1827
"@types/react-dom": "^18.0.9",
1928
"@types/webextension-polyfill": "^0.10.0",
2029
"@vitejs/plugin-react": "^4.2.1",
21-
"dotenv-cli": "^7.4.2",
30+
"bestzip": "^2.2.1",
31+
"cross-env": "^7.0.3",
2232
"typescript": "~5.6.3",
2333
"vite": "^5.4.3",
24-
"vite-plugin-web-extension": "^4.0.0",
34+
"vite-plugin-web-extension": "^4.3.1",
2535
"webextension-polyfill": "^0.10.0"
2636
}
2737
}

‎packages/extension/public/icon/logo-animated.svg‎

Lines changed: 23 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)