Emulate Dark Mode using Chrome DevTools

Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark from the menu

You can also access the option via the Rendering panel.

SessionBox – Log in with multiple accounts to any website

For some online services such as Twitter and Facebook I have more than one account. Be it accounts for my company, an alter ego, my children, etc.

To easily switch between these accounts – without logging out, back in, and doing the 2FA dance – I rely on a Chrome Extension named SessionBox which allows me to do just that.

Using websites with multiple accounts at the same time is made easy. Create an independent tab with a click of a button.

Use one browser with multiple active sessions per site. Log into multiple accounts on the same site simultaneously. No more need for secondary browsers, private sessions, let SessionBox handle these for you.

SessionBox on the Chrome Web Store →

🔥🦊 Firefox user?

The Firefox Multi-Account Containers Add-On does a similar job.

Disable Hardware Media Keys Support in Chrome

A new feature that landed in Chrome 73 is support for hardware Media Keys. Whenever you press one of the play/pause/next/prev buttons on your keyboard, Chrome can now respond to this and will pause/play the actively playing element.

Whilst this might be a good addition for many, it doesn’t work me, as I’m constantly playing music through iTunes. With iTunes jingling around, here’s my experience:

  • Open a site with a video and watch it play
  • Hit (keyboard) pause button to pause iTunes
  • Not iTunes but the video in the browser gets paused (😠)
  • CMD+TAB into iTunes
  • Hit (keyboard) pause button to pause iTunes
  • Video in the browser resumes playback (with iTunes still playing too) (😡)

Looks like the browser (or macOS?) isn’t properly releasing/giving the focus, redirecting all media keys’ keystrokes to Chrome (instead of the focussed iTunes).

~

Thankfully, one can disable the support for Hardware Media Keys through some flags.

  1. Visit chrome://flags/#hardware-media-key-handling
  2. Set the dropdown value to “Disabled”
  3. Restart Chrome

Ah, much better now!

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

GitHub Toggle Chrome Extension – Quickly toggle between a GitHub Repo and its GitHub Pages by the click of a button.

Last week Christian Heilmann (codepo8) released a handy bookmarklet that lets on switch between the GitHub Pages URL of a repo hosted on GitHub and the repo contents itself. This afternoon I took the liberty of transforming it into a Chrome Extension, mainly as an exercise to myself.

The extension adds a small button which becomes active whenever you are visiting a *.github.com or *.github.io domain. Upon clicking the button you toggle between the two URLs.

To create this plugin I started out with the core of Christian’s script and decorated the required Chrome Extension stuff around it. A few notes on the latter though:

GitHub Toggle Chrome Extension on the Chrome Web Store →
GitHub Toggle Chrome Extension Source (GitHub) →

🙇‍♂️ Manipulating Chrome through a JavaScript API reminds me of controlling Photoshop using JavaScript which has excellent scripting capabilities … using its Scripting API you can create a script for Photoshop to cut up a large image into tiles for use with Google Maps or a script that allows one to export/import translations from a Photoshop file.

Enabling experimental Developer Tools Experiments

Using chrome://flags/ it’s possible to enable “Developer Tools Experiments”.

On the most recent Fronteers Conference, Umar Hansa showed that there are even more DevTools Experiments that one can enable:

  1. Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already
  2. In the DevTools, go to Settings and select Experiments
  3. Hit SHIFT 6 times

After having done so you should see some – eh – “experimental experiments” available in the list (highlighted in grey)

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Using DevTools Features Without Opening DevTools using Puppeteer

Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though:

You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that you like (via the Chrome DevTools Protocol), without ever explicitly opening DevTools.

const page = await browser.newPage();
const devtoolsProtocolClient = await page.target().createCDPSession();
await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
await page.goto('https://example.org/');

Check out Chrome DevTools Protocol View for an entire list of commands you can send.

Using DevTools Features Without Opening DevTools →

CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!

Oh yeah, the CSS Paint API will be enabled by default in Chrome 65:

CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of using those, you can now use paint(myPainter) to reference a paint worklet.

Inside a paint worklet a CanvasRenderingContext2D has been made available for you to use. Use it like you would draw on a regular <canvas> element. Next to the CanvasRenderingContext2D you can also access the geometry of the element (e.g. get width and height), and can access other CSS properties (including CSS Variables).

There’s a nice demo included which showcases the rendering of a checkerboard pattern, which can be customised via two CSS Variables:

Here’s code for the painter demoed in the video above:

// checkerboard.js
class CheckerboardPainter {
  // inputProperties returns a list of CSS properties that this paint function gets access to
  static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }

  paint(ctx, geom, properties) {
    // Paint worklet uses CSS Typed OM to model the input values.
    // As of now, they are mostly wrappers around strings,
    // but will be augmented to hold more accessible data over time.
    const size = parseInt(properties.get('--checkerboard-size').toString());
    const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
    const colors = ['red', 'green', 'blue'];
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        ctx.fillStyle = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
        ctx.fill();
      }
    }
  }
}

registerPaint('checkerboard', CheckerboardPainter);

New possibilities in Chrome 65: CSS Paint API →

💁‍♂️ Want to know more about Houdini? Check out Sam Richard’s talk “Magic Tricks with CSS Houdini” (video)

End-to-end Tests that Don’t Suck with Puppeteer

Good introduction to using Puppeteer for your e2e tests:

One of the most popular tools for e2e testing is Selenium, which is a tool for automating web browsers. Selenium sounds cool in theory: write one set of tests that run on all browsers and devices, woohoo! Jk. In practice, Selenium tests are slow, brittle, and costly. So, on Ropig we are using Puppeteer – the official headless Chrome library.

[…]

We are using Jest as our test runner, but you can use any testing tools you want with Puppeteer.

An example test would be this:

test('can create new user account', async () => {
    await page.goto(routes.public.register);
    await page.waitForSelector('[data-testId="userAccountForm"]');
    await page.click('[data-testId="userRegisterInputWithEmail"]');
    await page.type(user.email);
    await page.click('[data-testId="userRegisterInputWithPassword"]');
    await page.type(user.password);
    await page.click('[data-testId="userAccountSubmitButton"]');
    await page.waitForSelector('[data-testId="userSettingsForm"]');
})

Yes, you better get your async/await mojo on for this 😉

End-to-end Tests that Don’t Suck with Puppeteer →

Browsershot: Convert a webpage to an image or PDF using headless Chrome

The folks over at Spatie have just release Browsershot v3:

Browsershot is a PHP package which can convert a webpage to an image or pdf. The conversion is done behind the scenes by Puppeteer which controls a headless version of Google Chrome.

Conversion is easy-peasy, hence this example:

use Spatie\Browsershot\Browsershot;

// an image will be saved
Browsershot::url('https://example.com')
   ->save($pathToImage);

To save to a PDF give the target path a .pdf extension, or use the savePdf() method. Here’s an example with some more manipulations:

Browsershot::html($someHtml)
   ->paperSize($width, $height)
   ->margins($top, $right, $bottom, $left)
   ->save('example.pdf');

Don’t forget to install the required puppeteer:

npm install puppeteer

Browsershot →