Skip to content

Commit 7824fa9

Browse files
masnwilliamsmasnwilliams
authored
Merge branch 'main' into mason/vercel-marketplace-docs
2 parents 807a83a + 7154d5f commit 7824fa9

File tree

12 files changed

+411
-80
lines changed

12 files changed

+411
-80
lines changed

‎browsers/extensions.mdx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: "Extensions"
3+
description: "Use browser extensions in Kernel browsers"
4+
---
5+
6+
Kernel's browsers support running with custom Chrome extensions.
7+
Chrome extensions must be unpacked and can be uploaded to Kernel via the CLI or API.
8+
9+
## Uploading extensions
10+
11+
Here is a simple example of an unpacked extension:
12+
13+
<CodeGroup>
14+
```js ./my-extension/content-script.js
15+
document.body.innerHTML = document.body.innerHTML.replace(/AI/g, "A1");
16+
```
17+
18+
```json ./my-extension/manifest.json
19+
{
20+
"manifest_version": 3,
21+
"version": "1.0",
22+
"name": "AI to A1",
23+
"description": "Replace AI with A1",
24+
"content_scripts": [
25+
{
26+
"matches": [
27+
"https://*/*"
28+
],
29+
"js": [
30+
"content-script.js"
31+
]
32+
}
33+
]
34+
}
35+
```
36+
</CodeGroup>
37+
38+
Once these files are in place, you can upload them to Kernel via the CLI (or [API](/api-reference/extensions/upload-a-browser-extension)):
39+
40+
```bash
41+
kernel extensions upload ./my-extension --name my-extension
42+
```
43+
44+
Extensions uploaded to Kernel are assigned a random ID, but you can also give them a name for easier reference.
45+
This name must be unique within your organization.
46+
47+
## Using extensions in a browser
48+
49+
Passing the extension name or ID to the `create` method will load it into the browser:
50+
51+
<CodeGroup>
52+
```typescript Typescript/Javascript
53+
import { Kernel } from '@onkernel/sdk';
54+
55+
const kernel = new Kernel();
56+
const kernelBrowser = await kernel.browsers.create({
57+
extensions: [{ name: "my-extension" }],
58+
});
59+
```
60+
61+
```python Python
62+
import kernel
63+
64+
client = kernel.Kernel()
65+
kernel_browser = client.browsers.create(extensions=[{name: 'my-extension'}])
66+
```
67+
68+
```bash CLI
69+
kernel browsers create --extension my-extension
70+
```
71+
</CodeGroup>
72+
73+
74+
## Using extensions directly from the Chrome Web Store
75+
76+
Kernel's CLI offers a command for fetching and unpacking extensions directly from the Chrome Web Store.
77+
Simply pass the URL of the extension you want to download and the CLI will download the extension and unpack it into the specified directory.
78+
79+
```bash CLI
80+
kernel extensions download-web-store https://chromewebstore.google.com/detail/shutterfly-address-book-e/lddlpciejomhjehckimopnomegilaocb --to ./downloaded-extension
81+
```
82+
83+
From here you can upload the extension to Kernel as normal.
84+
85+
```bash CLI
86+
kernel extensions upload ./downloaded-extension --name my-extension
87+
```
88+
89+
## Loading an extension into a running browser
90+
91+
If you have a browser running and would like to load an extension into it after the browser session has started, Kernel also allows you to do that via the CLI (or [API](/api-reference/browsers/ad-hoc-upload-one-or-more-unpacked-extensions-to-a-running-browser-instance)):
92+
93+
```bash CLI
94+
kernel browsers extensions upload <session_id> ./my-extension
95+
```
96+
97+
<Info>
98+
Note that this will restart the browser process and break any connections to the browser CDP URL.
99+
</Info>

‎browsers/viewport.mdx‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
---
2+
title: "Viewports"
3+
description: "Configure browser viewport size and refresh rate for your automations"
4+
---
5+
6+
Kernel browsers allow you to configure the viewport size and refresh rate when creating a browser session. The viewport configuration determines the initial browser window dimensions and display refresh rate. The refresh rate can be explicitly specified or automatically determined based on the width and height if they match a supported configuration.
7+
8+
## Setting viewport configuration
9+
10+
You can configure the viewport when creating a browser by specifying the `viewport` parameter with `width` and `height`. The `refresh_rate` is optional and will be automatically determined from the dimensions if they match a supported configuration:
11+
12+
<CodeGroup>
13+
14+
```typescript Typescript/Javascript
15+
// Explicitly specify refresh rate
16+
const kernelBrowser = await kernel.browsers.create({
17+
viewport: {
18+
width: 1920,
19+
height: 1080,
20+
refresh_rate: 25
21+
}
22+
});
23+
24+
// Auto-determine refresh rate from dimensions (25Hz for 1920x1080)
25+
const kernelBrowserAuto = await kernel.browsers.create({
26+
viewport: {
27+
width: 1920,
28+
height: 1080
29+
}
30+
});
31+
```
32+
33+
```python Python
34+
# Explicitly specify refresh rate
35+
kernel_browser = client.browsers.create(
36+
viewport={
37+
"width": 1920,
38+
"height": 1080,
39+
"refresh_rate": 25
40+
}
41+
)
42+
43+
# Auto-determine refresh rate from dimensions (25Hz for 1920x1080)
44+
kernel_browser_auto = client.browsers.create(
45+
viewport={
46+
"width": 1920,
47+
"height": 1080
48+
}
49+
)
50+
```
51+
52+
</CodeGroup>
53+
54+
## Supported viewport configurations
55+
56+
Kernel supports specific viewport configurations. The server will reject unsupported combinations. When you provide width and height without specifying refresh_rate, it will be automatically determined if the dimensions match one of the supported resolutions exactly. The following resolutions are supported:
57+
58+
| Resolution | Width | Height | Refresh Rate |
59+
|------------|-------|--------|--------------|
60+
| QHD | 2560 | 1440 | 10 Hz |
61+
| Full HD | 1920 | 1080 | 25 Hz |
62+
| WUXGA | 1920 | 1200 | 25 Hz |
63+
| WXGA+ | 1440 | 900 | 25 Hz |
64+
| XGA | 1024 | 768 | 60 Hz |
65+
66+
<Warning>
67+
Higher resolutions may affect the responsiveness of [live view](/browsers/live-view) browser sessions.
68+
</Warning>
69+
70+
## Example configurations
71+
72+
<CodeGroup>
73+
74+
```typescript Typescript/Javascript
75+
// Full HD (1920x1080) at 25Hz - explicit refresh rate
76+
const fullHD = await kernel.browsers.create({
77+
viewport: {
78+
width: 1920,
79+
height: 1080,
80+
refresh_rate: 25
81+
}
82+
});
83+
84+
// Full HD (1920x1080) - auto-determined 25Hz
85+
const fullHDAuto = await kernel.browsers.create({
86+
viewport: {
87+
width: 1920,
88+
height: 1080
89+
}
90+
});
91+
92+
// QHD (2560x1440) - auto-determined 10Hz
93+
// Note: May affect live view responsiveness
94+
const qhd = await kernel.browsers.create({
95+
viewport: {
96+
width: 2560,
97+
height: 1440
98+
}
99+
});
100+
101+
// XGA (1024x768) - auto-determined 60Hz (Default configuration)
102+
const xga = await kernel.browsers.create({
103+
viewport: {
104+
width: 1024,
105+
height: 768
106+
}
107+
});
108+
109+
// WUXGA (1920x1200) at 25Hz - explicit refresh rate
110+
const wuxga = await kernel.browsers.create({
111+
viewport: {
112+
width: 1920,
113+
height: 1200,
114+
refresh_rate: 25
115+
}
116+
});
117+
```
118+
119+
```python Python
120+
# Full HD (1920x1080) at 25Hz - explicit refresh rate
121+
full_hd = await client.browsers.create(
122+
viewport={
123+
"width": 1920,
124+
"height": 1080,
125+
"refresh_rate": 25
126+
}
127+
)
128+
129+
# Full HD (1920x1080) - auto-determined 25Hz
130+
full_hd_auto = await client.browsers.create(
131+
viewport={
132+
"width": 1920,
133+
"height": 1080
134+
}
135+
)
136+
137+
# QHD (2560x1440) - auto-determined 10Hz
138+
# Note: May affect live view responsiveness
139+
qhd = await client.browsers.create(
140+
viewport={
141+
"width": 2560,
142+
"height": 1440
143+
}
144+
)
145+
146+
# XGA (1024x768) - auto-determined 60Hz (Default configuration)
147+
xga = await client.browsers.create(
148+
viewport={
149+
"width": 1024,
150+
"height": 768
151+
}
152+
)
153+
154+
# WUXGA (1920x1200) at 25Hz - explicit refresh rate
155+
wuxga = await client.browsers.create(
156+
viewport={
157+
"width": 1920,
158+
"height": 1200,
159+
"refresh_rate": 25
160+
}
161+
)
162+
```
163+
164+
</CodeGroup>
165+
166+
## Default viewport
167+
168+
If the `viewport` parameter is omitted when creating a browser, the default configuration is typically 1024x768 at 60Hz.
169+
170+
<CodeGroup>
171+
172+
```typescript Typescript/Javascript
173+
// Uses default viewport (1024x768@60Hz)
174+
const defaultViewport = await kernel.browsers.create();
175+
```
176+
177+
```python Python
178+
# Uses default viewport (1024x768@60Hz)
179+
default_viewport = await client.browsers.create()
180+
```
181+
182+
</CodeGroup>
183+
184+
## Viewport constraints
185+
186+
Only the specific viewport configurations listed in the [supported configurations table](#supported-viewport-configurations) above are supported:
187+
- **2560x1440** (QHD) at 10 Hz
188+
- **1920x1080** (Full HD) at 25 Hz
189+
- **1920x1200** (WUXGA) at 25 Hz
190+
- **1440x900** (WXGA+) at 25 Hz
191+
- **1024x768** (XGA) at 60 Hz
192+
193+
When specifying a viewport:
194+
- **Width** and **Height** are required and must match one of the supported configurations exactly
195+
- **Refresh Rate** is optional - if omitted, it will be automatically determined from the width and height combination
196+
197+
<Warning>
198+
The server will reject any viewport configuration that doesn't exactly match one of the supported combinations listed above.
199+
</Warning>
200+
201+
## Considerations
202+
203+
- The viewport configuration is set when the browser is created and applies to the initial browser window
204+
- Higher resolutions (like 2560x1440) may impact the performance and responsiveness of live view sessions
205+
- The viewport size affects how websites render, especially those with responsive designs
206+
- Screenshots taken from the browser will match the configured viewport dimensions
207+
- In [headless mode](/browsers/headless), the viewport configuration still applies for rendering and screenshots

‎careers/intro.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,4 @@ Our **serverless platform** handles the hard stuff: autoscaling reliable browser
1616
- [Founding Backend Engineer](/careers/backend-engineer)
1717
- [Software Engineer - New Grad](/careers/engineer-new-grad)
1818
- [Founding DevRel Engineer](/careers/devrel-engineer)
19-
- [Founding Customer Engineer](/careers/customer-engineer)
20-
- [Founding Technical Content Marketer](/careers/technical-content-marketer)
19+
- [Founding Customer Engineer](/careers/customer-engineer)

‎careers/technical-content-marketer.mdx‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

0 commit comments

Comments
 (0)