claude-chrome-parallel 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/demo.svg +88 -98
- package/package.json +1 -1
package/assets/demo.svg
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 380">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
4
4
|
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
|
@@ -12,172 +12,162 @@
|
|
|
12
12
|
<stop offset="0%" style="stop-color:#e74c3c"/>
|
|
13
13
|
<stop offset="100%" style="stop-color:#c0392b"/>
|
|
14
14
|
</linearGradient>
|
|
15
|
-
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
16
|
-
<stop offset="0%" style="stop-color:#6c5ce7"/>
|
|
17
|
-
<stop offset="100%" style="stop-color:#a29bfe"/>
|
|
18
|
-
</linearGradient>
|
|
19
15
|
</defs>
|
|
20
16
|
|
|
21
17
|
<!-- Background -->
|
|
22
|
-
<rect width="800" height="
|
|
18
|
+
<rect width="800" height="380" fill="url(#bgGrad)"/>
|
|
23
19
|
|
|
24
20
|
<!-- Title -->
|
|
25
|
-
<text x="400" y="
|
|
21
|
+
<text x="400" y="30" text-anchor="middle" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold">
|
|
26
22
|
Chrome Extension vs Claude Chrome Parallel
|
|
27
23
|
</text>
|
|
28
24
|
|
|
29
25
|
<!-- LEFT SIDE: Chrome Extension (Failing) -->
|
|
30
|
-
<g transform="translate(
|
|
26
|
+
<g transform="translate(25, 50)">
|
|
31
27
|
<!-- Header -->
|
|
32
|
-
<rect x="0" y="0" width="
|
|
33
|
-
<circle cx="
|
|
34
|
-
<circle cx="
|
|
35
|
-
<circle cx="
|
|
36
|
-
<text x="
|
|
28
|
+
<rect x="0" y="0" width="360" height="28" rx="8" ry="8" fill="#2d3436"/>
|
|
29
|
+
<circle cx="14" cy="14" r="5" fill="#e74c3c"/>
|
|
30
|
+
<circle cx="30" cy="14" r="5" fill="#f39c12"/>
|
|
31
|
+
<circle cx="46" cy="14" r="5" fill="#27ae60"/>
|
|
32
|
+
<text x="180" y="18" text-anchor="middle" fill="#b2bec3" font-family="monospace" font-size="11">Chrome Extension</text>
|
|
37
33
|
|
|
38
34
|
<!-- Terminal body -->
|
|
39
|
-
<rect x="0" y="
|
|
40
|
-
<rect x="0" y="
|
|
35
|
+
<rect x="0" y="28" width="360" height="270" fill="#0d1117"/>
|
|
36
|
+
<rect x="0" y="288" width="360" height="10" rx="0" ry="0" fill="#2d3436"/>
|
|
41
37
|
|
|
42
|
-
<!-- Session 1 -
|
|
43
|
-
<text x="10" y="
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
<animate attributeName="opacity" values="0;0;1;1" dur="4s" repeatCount="indefinite"/>
|
|
38
|
+
<!-- Session 1 - Starts, completes -->
|
|
39
|
+
<text x="10" y="50" fill="#6c5ce7" font-family="monospace" font-size="11">$ claude "Screenshot github.com"</text>
|
|
40
|
+
|
|
41
|
+
<!-- Session 1 progress bar -->
|
|
42
|
+
<rect x="10" y="58" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
43
|
+
<animate attributeName="width" values="0;0;150;150;150;150;150;150;150;150;150" dur="10s" repeatCount="indefinite"/>
|
|
44
|
+
</rect>
|
|
45
|
+
<text x="10" y="85" fill="#00b894" font-family="monospace" font-size="11">
|
|
46
|
+
<tspan>✓ Session 1 completed</tspan>
|
|
47
|
+
<animate attributeName="opacity" values="0;0;0;1;1;1;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
53
48
|
</text>
|
|
54
49
|
|
|
55
|
-
<!-- Session 2 -
|
|
56
|
-
<text x="10" y="
|
|
50
|
+
<!-- Session 2 - Tries to start, gets error -->
|
|
51
|
+
<text x="10" y="115" fill="#6c5ce7" font-family="monospace" font-size="11">
|
|
57
52
|
<tspan>$ claude "Screenshot google.com"</tspan>
|
|
58
|
-
<animate attributeName="opacity" values="0;0;0;1;1" dur="
|
|
53
|
+
<animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
59
54
|
</text>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
55
|
+
|
|
56
|
+
<!-- Session 2 attempting -->
|
|
57
|
+
<text x="10" y="135" fill="#fdcb6e" font-family="monospace" font-size="11">
|
|
58
|
+
<tspan>Connecting to browser...</tspan>
|
|
59
|
+
<animate attributeName="opacity" values="0;0;0;0;0;1;0;0;0;0;0" dur="10s" repeatCount="indefinite"/>
|
|
63
60
|
</text>
|
|
64
61
|
|
|
65
|
-
<!-- Error
|
|
62
|
+
<!-- Error box -->
|
|
66
63
|
<g>
|
|
67
|
-
<animate attributeName="opacity" values="0;0;0;0;0;1;1" dur="
|
|
68
|
-
<rect x="
|
|
69
|
-
<text x="
|
|
64
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
65
|
+
<rect x="10" y="145" width="340" height="55" rx="4" fill="#2d1b1b"/>
|
|
66
|
+
<text x="20" y="167" fill="#e74c3c" font-family="monospace" font-size="12" font-weight="bold">
|
|
70
67
|
✗ Error: Session Detached
|
|
71
68
|
</text>
|
|
72
|
-
<text x="
|
|
69
|
+
<text x="20" y="187" fill="#e17055" font-family="monospace" font-size="10">
|
|
73
70
|
Target closed. Another session took control.
|
|
74
71
|
</text>
|
|
75
72
|
</g>
|
|
76
73
|
|
|
77
|
-
<!-- Blinking cursor -->
|
|
78
|
-
<rect x="10" y="
|
|
74
|
+
<!-- Blinking cursor at bottom -->
|
|
75
|
+
<rect x="10" y="215" width="8" height="14" fill="#fff">
|
|
79
76
|
<animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
|
|
80
77
|
</rect>
|
|
81
78
|
|
|
82
|
-
<!-- Status
|
|
83
|
-
<text x="
|
|
79
|
+
<!-- Status -->
|
|
80
|
+
<text x="180" y="270" text-anchor="middle" fill="#e74c3c" font-family="system-ui" font-size="13" font-weight="bold">
|
|
84
81
|
❌ Only 1 session at a time
|
|
85
82
|
</text>
|
|
86
83
|
</g>
|
|
87
84
|
|
|
88
85
|
<!-- VS Divider -->
|
|
89
|
-
<text x="400" y="
|
|
86
|
+
<text x="400" y="200" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="22" font-weight="bold">VS</text>
|
|
90
87
|
|
|
91
88
|
<!-- RIGHT SIDE: Claude Chrome Parallel (Success) -->
|
|
92
|
-
<g transform="translate(
|
|
89
|
+
<g transform="translate(415, 50)">
|
|
93
90
|
<!-- Header -->
|
|
94
|
-
<rect x="0" y="0" width="
|
|
95
|
-
<circle cx="
|
|
96
|
-
<circle cx="
|
|
97
|
-
<circle cx="
|
|
98
|
-
<text x="
|
|
91
|
+
<rect x="0" y="0" width="360" height="28" rx="8" ry="8" fill="#2d3436"/>
|
|
92
|
+
<circle cx="14" cy="14" r="5" fill="#e74c3c"/>
|
|
93
|
+
<circle cx="30" cy="14" r="5" fill="#f39c12"/>
|
|
94
|
+
<circle cx="46" cy="14" r="5" fill="#27ae60"/>
|
|
95
|
+
<text x="180" y="18" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="11" font-weight="bold">Claude Chrome Parallel</text>
|
|
99
96
|
|
|
100
97
|
<!-- Terminal body -->
|
|
101
|
-
<rect x="0" y="
|
|
102
|
-
<rect x="0" y="
|
|
98
|
+
<rect x="0" y="28" width="360" height="270" fill="#0d1117"/>
|
|
99
|
+
<rect x="0" y="288" width="360" height="10" rx="0" ry="0" fill="#2d3436"/>
|
|
100
|
+
|
|
101
|
+
<!-- ALL 5 SESSIONS START SIMULTANEOUSLY -->
|
|
103
102
|
|
|
104
|
-
<!-- Multiple sessions all succeeding -->
|
|
105
103
|
<!-- Session 1 -->
|
|
106
|
-
<text x="10" y="
|
|
107
|
-
<rect x="150" y="
|
|
108
|
-
<animate attributeName="width" values="0;80;
|
|
104
|
+
<text x="10" y="50" fill="#a29bfe" font-family="monospace" font-size="11">Session 1: github.com</text>
|
|
105
|
+
<rect x="150" y="40" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
106
|
+
<animate attributeName="width" values="0;0;20;50;80;110;130;130;130;130;130" dur="10s" repeatCount="indefinite"/>
|
|
109
107
|
</rect>
|
|
110
|
-
<text x="
|
|
111
|
-
<tspan
|
|
112
|
-
<animate attributeName="opacity" values="0;0;1;1" dur="
|
|
108
|
+
<text x="290" y="50" fill="#00b894" font-family="monospace" font-size="11">
|
|
109
|
+
<tspan>✓</tspan>
|
|
110
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
113
111
|
</text>
|
|
114
112
|
|
|
115
113
|
<!-- Session 2 -->
|
|
116
|
-
<text x="10" y="
|
|
117
|
-
<rect x="150" y="
|
|
118
|
-
<animate attributeName="width" values="0;0;
|
|
114
|
+
<text x="10" y="75" fill="#a29bfe" font-family="monospace" font-size="11">Session 2: google.com</text>
|
|
115
|
+
<rect x="150" y="65" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
116
|
+
<animate attributeName="width" values="0;0;25;55;85;100;120;120;120;120;120" dur="10s" repeatCount="indefinite"/>
|
|
119
117
|
</rect>
|
|
120
|
-
<text x="
|
|
121
|
-
<tspan
|
|
122
|
-
<animate attributeName="opacity" values="0;0;0;1;1" dur="
|
|
118
|
+
<text x="280" y="75" fill="#00b894" font-family="monospace" font-size="11">
|
|
119
|
+
<tspan>✓</tspan>
|
|
120
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
123
121
|
</text>
|
|
124
122
|
|
|
125
123
|
<!-- Session 3 -->
|
|
126
|
-
<text x="10" y="
|
|
127
|
-
<rect x="150" y="
|
|
128
|
-
<animate attributeName="width" values="0;0;
|
|
124
|
+
<text x="10" y="100" fill="#a29bfe" font-family="monospace" font-size="11">Session 3: amazon.com</text>
|
|
125
|
+
<rect x="150" y="90" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
126
|
+
<animate attributeName="width" values="0;0;30;60;90;120;140;140;140;140;140" dur="10s" repeatCount="indefinite"/>
|
|
129
127
|
</rect>
|
|
130
|
-
<text x="
|
|
131
|
-
<tspan
|
|
132
|
-
<animate attributeName="opacity" values="0;0;0;0;1;1" dur="
|
|
128
|
+
<text x="300" y="100" fill="#00b894" font-family="monospace" font-size="11">
|
|
129
|
+
<tspan>✓</tspan>
|
|
130
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
133
131
|
</text>
|
|
134
132
|
|
|
135
133
|
<!-- Session 4 -->
|
|
136
|
-
<text x="10" y="
|
|
137
|
-
<rect x="150" y="
|
|
138
|
-
<animate attributeName="width" values="0;0;
|
|
134
|
+
<text x="10" y="125" fill="#a29bfe" font-family="monospace" font-size="11">Session 4: naver.com</text>
|
|
135
|
+
<rect x="150" y="115" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
136
|
+
<animate attributeName="width" values="0;0;15;45;75;95;110;110;110;110;110" dur="10s" repeatCount="indefinite"/>
|
|
139
137
|
</rect>
|
|
140
|
-
<text x="
|
|
141
|
-
<tspan
|
|
142
|
-
<animate attributeName="opacity" values="0;0;0;0;0;1;1" dur="
|
|
138
|
+
<text x="270" y="125" fill="#00b894" font-family="monospace" font-size="11">
|
|
139
|
+
<tspan>✓</tspan>
|
|
140
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
143
141
|
</text>
|
|
144
142
|
|
|
145
143
|
<!-- Session 5 -->
|
|
146
|
-
<text x="10" y="
|
|
147
|
-
<rect x="150" y="
|
|
148
|
-
<animate attributeName="width" values="0;0;
|
|
144
|
+
<text x="10" y="150" fill="#a29bfe" font-family="monospace" font-size="11">Session 5: twitter.com</text>
|
|
145
|
+
<rect x="150" y="140" width="0" height="12" rx="2" fill="url(#successGrad)">
|
|
146
|
+
<animate attributeName="width" values="0;0;22;52;82;112;125;125;125;125;125" dur="10s" repeatCount="indefinite"/>
|
|
149
147
|
</rect>
|
|
150
|
-
<text x="
|
|
151
|
-
<tspan
|
|
152
|
-
<animate attributeName="opacity" values="0;0;0;0;0;0;1" dur="
|
|
148
|
+
<text x="285" y="150" fill="#00b894" font-family="monospace" font-size="11">
|
|
149
|
+
<tspan>✓</tspan>
|
|
150
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
153
151
|
</text>
|
|
154
152
|
|
|
155
|
-
<!--
|
|
153
|
+
<!-- Result summary box -->
|
|
156
154
|
<g>
|
|
157
|
-
<animate attributeName="opacity" values="0;0;0;0;0;0;1" dur="
|
|
158
|
-
<rect x="10" y="
|
|
159
|
-
<text x="
|
|
155
|
+
<animate attributeName="opacity" values="0;0;0;0;0;0;0;1;1;1;1" dur="10s" repeatCount="indefinite"/>
|
|
156
|
+
<rect x="10" y="170" width="340" height="70" rx="6" fill="#1a3a1a"/>
|
|
157
|
+
<text x="180" y="195" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="12" font-weight="bold">
|
|
160
158
|
All 5 sessions completed in parallel!
|
|
161
159
|
</text>
|
|
162
|
-
<text x="
|
|
163
|
-
Total
|
|
160
|
+
<text x="180" y="215" text-anchor="middle" fill="#55efc4" font-family="monospace" font-size="11">
|
|
161
|
+
Total: 1.4s (Sequential would take 7.0s)
|
|
164
162
|
</text>
|
|
165
|
-
<text x="
|
|
163
|
+
<text x="180" y="232" text-anchor="middle" fill="#81ecec" font-family="system-ui" font-size="11">
|
|
166
164
|
⚡ 5x faster
|
|
167
165
|
</text>
|
|
168
166
|
</g>
|
|
169
167
|
|
|
170
|
-
<!-- Status
|
|
171
|
-
<text x="
|
|
168
|
+
<!-- Status -->
|
|
169
|
+
<text x="180" y="270" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="13" font-weight="bold">
|
|
172
170
|
✅ 20+ concurrent sessions
|
|
173
171
|
</text>
|
|
174
172
|
</g>
|
|
175
|
-
|
|
176
|
-
<!-- Bottom CTA -->
|
|
177
|
-
<g>
|
|
178
|
-
<rect x="250" y="365" width="300" height="28" rx="14" fill="url(#purpleGrad)"/>
|
|
179
|
-
<text x="400" y="384" text-anchor="middle" fill="#fff" font-family="system-ui" font-size="12" font-weight="bold">
|
|
180
|
-
npm install -g claude-chrome-parallel
|
|
181
|
-
</text>
|
|
182
|
-
</g>
|
|
183
173
|
</svg>
|