Description: This is an article about firefox-focus, in which the author will show us how to customize the appearance of the browser. Dynamic themes allow extensions to programmatically modify the browser UI’s color scheme and apply background images.
I’m Potch and I’m a developer advocate at Mozilla. I want to talk to you about a new form of extension for Firefox called dynamic themes. Browsers of long supported theming, it lets you customize the appearance of the UI of the browser, change colors, apply a texture.
It is a fun way to customize and personalize things. Firefox now supports what are called dynamic themes. And these allow a theme to actually react to changes in the browser. It programmatically let an extension change aspects of the theme that’s currently being applied.
They’re neat. You can make fun things, you can make useful things and you can customize to the weather or your location. It’s programmatic control of the browser’s theme. So I want to show you a simple dynamic theme. It lets people know what’s possible and hopefully get people excited to make more.
What we’re looking at is a static theme. And this is called Quantum. It’s where Firefox theme made one of our designers. And you can see that if you click on it, it applies this nice color and, in fact, the text flipped from a darker color to a lighter color to match.
So all of these things are basic customizations. And all of those things can be programmatically set in dynamic theme. I want to show you a simple dynamic theme that I built to show you what’s possible and hopefully get people excited about making more of these.
My theme responds to whether or not the currently selected tab is in reader mode. If you’re not familiar with reader mode, it’s available on a couple different browsers. And it takes the content of an article and formats it attractively for stand alone reading.
So here’s the normal hacks post. You can see all the text and images. And if we click this little icon here or the page, it’s going to enter into reader mode and now you can see the same content of that article laid out. Plain white background is very simple.
You can customize how it looks. I’m not to talk about reader mode but to talk about a theme, the text reader mode. So here is what reader mode looks like. The view of the browser is unchanged and then install my reader mode theme.
I’m currently in the about debugging view which lets me load temporarily an extension. I have the reader theme extension that I built. And now if we switch back to that tab, you’ll see that the browser displays the open pages of a book.
And the current tab is a light font color and the rest fade into the background. Not necessarily something you might want, but it’s a neat effect. I’d like to show you how that works. Let’s get the code pulled up.
First, every extension starts with a manifest. This tells the browser what the extension is going to do and what permissions it needs. For us, we need to understand whether a tab is in reader mode and we need to be able to change the theme.
So we’ve requested the theme permission and the tabs permission. Tabs will let us listen to changes to the current tab or active tab. And theme lets us modify the theming aspects of the browser.
Additionally, we’re going to need a script that lets us monitor these things then listen for events. So I registered a background script here. I’m going to show you what that script looks like. It’s not a terribly large amount of code. It’s about 40 lines of formatted code.
We’re going to start with defining what theme we want to apply. Obviously, I’ve defined this is one big JS object but you can easily compute this stuff dynamically. So you can see we’re applying some images, we are adjusting them and we’re applying some colors.
First, you’ll see this header URL here. All themes currently require a header URL. But a header URL is normally the standard theme graphic and that usually docks to the top right corner of the browser’s UI. However, I wanted my image to be centered. So you can see I have this little thing here. It says bg.svg and if we take a look at that, it’s a blank image, nice and compact.
And the browser is going to use that and draw transparency into the browser’s UI. Unfortunately, these are required for backward compatibility reasons. But we can also apply other images. So you can see this theme also has additional backgrounds and only one of them which is the book.
Here’s the image of the book. You can see it’s sort of a cropped image of an opened book with the pages displayed out. You can see it’s mostly light, a little bit of dark, but mostly light background which means we’re going to probably need some way to set some text against it.
We have a background color. The browser gets wide and we run out of image. we’ll show this background color which in this case is a darker brown. A tab text color. I’m going to have the text of the current tab be white. And all of the other text, the other tabs are going to be black.
So you can see it’s going for a high contrast look here. And a toolbar. So if you go back to the theme when it’s applied, you can see that the current tab and the toolbar is a semi-transparent black that’s overlaid on it to add some extra contrast.
That’s what you’re seeing with the text color and toolbar color. It’s a semi transparent black. Additionally, we have these properties. A kind of CSS ish. The additional backgrounds allow the customization of repeat patterns and image alignment.
The required image docks to the top right. We’re aligning our first image here which is the only one. Straight to the top. And this means it’s going to be centered and the top of the image is going to match the top of the browser’s UI.
I want when the window gets wide, I don’t want the book to repeat. I want that background color to show through. So I’ve set it to no repeat. We have a theme. How do we apply it? First, we need to see if we are in reader mode or if we’ve changed reader mode.
We’ve set up a couple of add listeners. Tabs are on activated. There’s an event that fires when any time the active tab changes. And it returns an event object, one of which the properties is which tab it is. Additionally, if a tab changes state but not necessarily changes activation state, you get the on updated event.
This lets us listen for if the current tab is entering or leaving reader mode. So you can see in either case, we are grabbing the ID of the tab and passing it to this function update. So what does update do? It’s easy. I’m getting the information about all the tab from the tab’s ID.
If it’s not the currently active tab, I’m not interested because I’m only going to change the theme when the active tab is in or non reader mode. And then we check. Tab’s in reader mode. We’re going to update the current window with our constantly applied theme, or statically computer theme up top.
And if we’re not, we’re going to reset. So it’s simple. We’re looking for changes in the current tab. If the current tab enters a reader mode, we want to react to that and we’re going to apply that to the currently selected window.
Let’s go back and take a look at that one more time. You can see this dynamic theme is currently on. If I leave reader mode, the theme goes away. And now we’re back to the default Firefox theme. If I enter reader mode and switch to another tab, you can also see that the theme goes away.
It only applies to the current tab when we’re in reader mode. Hopefully, that gives you an idea of what’s possible with dynamic themes. Obviously, we could have lots of different themes. We could have some of these properties be computed dynamically. Maybe we extract the background color of the current webpage or maybe we figure out some colors. There are all kinds of things you can do. I want to give you a taste of what’s possible. Hopefully, we see lots of people making cool dynamic themes in the future. Thanks.