Puppetromium: Remote Browser Control with JavaScript
Remote browser control often demands heavy server-side infrastructure, a barrier to simple, direct interaction. I tackled this with Puppetromium, using Puppeteer and CSS @media queries to create a serverless remote browser, relying on MJPEG streaming and zero client-side JavaScript. In the web’s retro arcade, where neon lights flicker, Puppetromium is a vintage control panel, its dials and switches pulsing with the rhythm of forgotten tech.
I used CSS @media queries to detect viewport sizes by triggering specific background image requests, which the server interprets to adjust the browser. MJPEG streams the browser’s view, and forms with iframes handle interactions without JavaScript, a minimalist approach to remote control.
/* Probing viewport size with @media queries */
@media screen and (min-width: 400px) and (min-height: 300px) {
body {
background-image: url("/set-viewport-dimensions/width/400/height/300/set.png");
}
}
@media screen and (min-width: 800px) and (min-height: 600px) {
body {
background-image: url("/set-viewport-dimensions/width/800/height/600/set.png");
}
}
/* Server-side handler to set viewport */
app.get('/set-viewport-dimensions/width/:width/height/:height/set.png', async (req, res) => {
const ua = req.headers['user-agent'];
const isMobile = testMobile(ua);
let {width, height} = req.params;
width = parseFloat(width);
height = parseFloat(height);
await page.emulate({
viewport: { width, height, isMobile },
userAgent: ua
});
res.send('Viewport set');
});
This code uses @media queries to detect the viewport and Puppeteer to adjust it, a clever hack that keeps the client silent. Puppetromium’s simplicity is its charm, a nod to the web’s early days.
Building Puppetromium was like restoring a vintage arcade machine, each switch a reminder of simpler times. At DOSAYGO, we value this nostalgic ingenuity, crafting tools that empower with minimal complexity. Puppetromium is a playful relic, inviting developers to rediscover the joy of direct, unencumbered control.