Custom Theme Color

Background

I've been using the new Microsoft Edge since it released - the one that's based off of Chromium, but without a lot of the gunk that Google integrates into their products. Since I already use a lot of the Microsoft ecosystem, it quickly fit right in. One feature I really took to appreciating, however, was the "Install as App" functionality. On any given site, you can click the menu button for edge, go down to "Apps," and then "Install this site as an app." That'll register an app in windows that, when launched, is effectivly an edge wrapper around that site, making it look as if the site is running as a native app on your computer.

It shows up separately on the taskbar, it doesn't have a URL field, it doesn't have all the web browser clutter. It's really nice for sites that you might spend a lot of dedicated time on a single page. Personally, I used it a lot with Blaseball, having that in a small stand-alone browser pinned on top of my desktop while I do other things.

That in particular looked really, really clean. The title bar matched the background, it's all a nice, consistent color, and I very much enjoy using it like this.

The Problem

It turns out, however, that the titlebar color is not driven automatically (as if picking the background color of the page) - it's actually driven by the "theme" meta HTML tag. This means that for sites without that theme tag, it defaults to your windows titlebar color.

This seemed like something easily fixable through some javascript. So I made an extension for Chromium.

My Solution

I made a little extension that, when activated on any given hostname, pops up a dialog. From there, you can select the color for the host and click "+" to save the setting. From that point on, anytime a page is opened on that hostname, the color will be applied.

Now, wikipedia as an app will always have a white titlebar!

This setting is stored for each hostname independently, so each site this extension is used on will be able to maintain its setting.

The Implementation

Edge/Chrome extensions are all done through javascript/html/css. In the extension's manifest (which defines all the properties of the extension) I set up two different things - a script that runs on any webpage (the "content script") and a folder that contains a webpage (the popup).

The popup has some simple HTML, with just the color input and button to save settings. Once that's clicked, the javascript saves that value into the extension's local storage and updates the popup to reflect the new status.

The content script does two things:

1. When a webpage loads, it checks to see if it is one we have a setting for. If it is, then we add/update the theme tag of the website.
2. When there is a change to the extension's local storage, we add/update/remove the theme tag of the website.

There is a little flicker that happens due to the timing of the content-script on a page load - hence, this is much better for websites you don't intend on changing pages frequently on. However, it's a little out of my control - the edge app seems to read the meta-tag before my javascript executes, even though I ask it to let me go first. Ah well.

You can find the source of the extension on github: thomasstoeckert/custom-theme-color (github.com)

As an extra note, I attempted to release the extension on the chrome/edge store. However, the review process failed, as the reviewer didn't seem to understand it only had functionality on pages installed as applications. Ah well.