Skip to content

Commit a7713ea

Browse files
alexremoonalexremoon
committed
chore: format
1 parent 4fdf7b7 commit a7713ea

14 files changed

Lines changed: 4231 additions & 3713 deletions

File tree

‎.github/workflows/release.yml‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v*'
7+
8+
jobs:
9+
release:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: Checkout
13+
uses: actions/checkout@v4
14+
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v4
17+
with:
18+
node-version: '18'
19+
registry-url: 'https://registry.npmjs.org'
20+
21+
- name: Install pnpm
22+
uses: pnpm/action-setup@v4
23+
with:
24+
version: 8
25+
26+
- name: Install dependencies
27+
run: |
28+
cd claude-devtools-host
29+
pnpm install --frozen-lockfile
30+
31+
- name: Package Chrome Extension
32+
run: |
33+
cd chrome-devtools-extension
34+
zip -r ../claude-devtools-extension-${{ github.ref_name }}.zip . \
35+
-x "node_modules/*" "*.log" ".DS_Store"
36+
37+
- name: Publish to npm
38+
run: |
39+
cd claude-devtools-host
40+
npm publish
41+
env:
42+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
43+
44+
- name: Create GitHub Release
45+
uses: actions/create-release@v1
46+
env:
47+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
48+
with:
49+
tag_name: ${{ github.ref }}
50+
release_name: Claude DevTools ${{ github.ref_name }}
51+
body: |
52+
## Installation
53+
54+
### Host Server
55+
```bash
56+
npm install -g @alexstrnik/claude-devtools@${{ github.ref_name }}
57+
```
58+
59+
### Chrome Extension
60+
1. Download the extension zip below
61+
2. Extract to a folder
62+
3. Load unpacked in Chrome Extensions
63+
64+
## Changes
65+
See commits since last release.
66+
draft: false
67+
prerelease: false
68+
69+
- name: Upload Extension Asset
70+
uses: actions/upload-release-asset@v1
71+
env:
72+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
73+
with:
74+
upload_url: ${{ steps.create_release.outputs.upload_url }}
75+
asset_path: ./claude-devtools-extension-${{ github.ref_name }}.zip
76+
asset_name: claude-devtools-extension-${{ github.ref_name }}.zip
77+
asset_content_type: application/zip

‎README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Claude DevTools
2+
3+
![Claude DevTools](screenshots/demo.png)
4+
5+
**Fix your frontend code right from DevTools.**
6+
7+
Pick a component, write your prompt, and send it directly to a Claude session—without leaving the page.
8+
9+
---
10+
11+
## Quick Start
12+
13+
### 1. Install the host server
14+
15+
The host server runs in your project folder like the regular Claude CLI and listens on port `47923` for commands from the extension.
16+
17+
```bash
18+
npm install -g @alexstrnik/claude-devtools
19+
# or
20+
pnpm add -g @alexstrnik/claude-devtools
21+
```
22+
23+
### 2. Install the Chrome extension
24+
25+
**Option A: Download latest release**
26+
1. Go to [Releases](https://github.com/AlexStrNik/claude-devtools/releases/latest)
27+
2. Download `claude-devtools-extension-vX.X.X.zip`
28+
3. Extract the zip file
29+
4. Open Chrome → Extensions → Developer mode
30+
5. Click **Load unpacked** → select the extracted folder
31+
32+
**Option B: Clone from source**
33+
1. Clone this repo: `git clone https://github.com/AlexStrNik/claude-devtools`
34+
2. Open Chrome → Extensions → Developer mode
35+
3. Click **Load unpacked** → select `chrome-devtools-extension` folder
36+
37+
### 3. Start the host server
38+
39+
```bash
40+
claude-devtools
41+
```
42+
43+
---
44+
45+
## How it works
46+
47+
```
48+
Web Page → Chrome Extension → Host Server → Claude Code PTY
49+
```
50+
51+
- **Chrome Extension**: Detects components and captures element data.
52+
- **Host Server**: Bridges your browser and Claude Code, manages the PTY, handles images, queues requests, and maintains persistent sessions.
53+
- **Claude Code**: Receives full context for debugging or live modifications.
54+
55+
---
56+
57+
## Using Claude DevTools
58+
59+
1. Start the host server (`claude-devtools`)
60+
2. Open DevTools → **Claude DevTools** tab
61+
3. Click **Pick Element** → select a component
62+
4. Write your prompt or question
63+
5. Hit **Send to Claude Code**
64+
65+
Your element’s context is sent directly to Claude, including:
66+
67+
- Component name (React or Angular)
68+
- Props
69+
- DOM slice
70+
- Computed styles
71+
- Screenshots (macOS only)
72+
- File path
73+
74+
---
75+
76+
## Features
77+
78+
- **React support**: Extracts component names, props, and source locations (React 18 & 19)
79+
- **Angular support**: Full component detection with props and source mapping (Angular 17)
80+
- **Screenshots**: Automatic element cropping for visual context (macOS only)
81+
- **Source mapping**: Maps compiled JS back to original TypeScript files
82+
- **Customizable context**: Include exactly what you need
83+
84+
---
85+
86+
## Development
87+
88+
```bash
89+
# Clone repository
90+
git clone https://github.com/AlexStrNik/claude-devtools
91+
92+
# Install host dependencies
93+
cd claude-devtools-host
94+
pnpm install
95+
96+
# Start development server
97+
pnpm dev
98+
99+
# Load extension in Chrome DevTools
100+
```
101+
102+
---
103+
104+
## Examples
105+
106+
- `react-example-18` – React 18 test app
107+
- `react-example-19` – React 19 test app
108+
- `angular-17` – Angular 17 test app
109+
110+
---
111+
112+
## Todo / Roadmap
113+
114+
- Support more frameworks (currently React & Angular)
115+
- Add image support on Linux/Windows
116+
- Port control directly in extension UI
117+
- Improve React 19+ source path detection

‎chrome-devtools-extension/content.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ class ClaudeDevTools {
1111
}
1212

1313
init() {
14-
// Inject the detection script
1514
this.injectScript();
16-
17-
// Listen for messages from DevTools panel
1815
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
1916
if (request.action === "startPicking") {
2017
this.startPicking();
@@ -322,7 +319,7 @@ class ClaudeDevTools {
322319
id: messageId,
323320
elementId: elementId,
324321
},
325-
"*"
322+
"*",
326323
);
327324

328325
setTimeout(() => {
@@ -469,7 +466,7 @@ class ClaudeDevTools {
469466
dpr: window.devicePixelRatio,
470467
},
471468
},
472-
resolve
469+
resolve,
473470
);
474471
});
475472
} catch (error) {

‎chrome-devtools-extension/devtools.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
</head>
6-
<body>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
77
<script src="devtools.js"></script>
8-
</body>
9-
</html>
8+
</body>
9+
</html>

‎chrome-devtools-extension/devtools.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
// Create the Claude DevTools panel
22
chrome.devtools.panels.create(
3-
'Claude',
4-
'icon.svg',
5-
'panel.html',
6-
function(panel) {
7-
console.log('Claude DevTools panel created');
3+
"Claude",
4+
"icon.svg",
5+
"panel.html",
6+
function (panel) {
7+
console.log("Claude DevTools panel created");
88

99
// Panel event listeners
10-
panel.onShown.addListener(function(panelWindow) {
11-
console.log('Claude DevTools panel shown');
10+
panel.onShown.addListener(function (panelWindow) {
11+
console.log("Claude DevTools panel shown");
1212
// Panel is now visible
1313
});
1414

15-
panel.onHidden.addListener(function() {
16-
console.log('Claude DevTools panel hidden');
15+
panel.onHidden.addListener(function () {
16+
console.log("Claude DevTools panel hidden");
1717
});
18-
}
19-
);
18+
},
19+
);

0 commit comments

Comments
 (0)