How to integrate a Thunderbird extension with Lightning

Question

I am currently doing preliminary research for a project which, if it is feasible, will consist of a Thunderbird extension with Lightning integration. My question is this: How do I use a Thunderbird extension to programmatically change the CSS in Lightning?

Specifically, I want to change the background on the Lightning UI from the normal color to a picture from within my extension -- the idea being that the user downloads the extension, and voila, he has an interesting background. Do you have any idea how I could achieve this?

Answer 1

Update 2022 - MailExtensions

There is a better way to do this with newer versions of Thunderbird.

First of all, you need to create the basic Thunderbird extension layout. This is the same layout as in modern Firefox add-ons, sometimes called WebExtensions. In short, extensions have a manifest.json that describe what it does, and additional files referenced from there.

In the manifest.json, you need to add a theme_experiment that will allow mapping images and other properties to CSS that applies to the main window. We need to do this since Thunderbird as of version 101 does not have a built-in way to define backgrounds for calendar.

Therefore, we want to create a new theme property that allows setting a background image. Here is a full example:

{
  "manifest_version": 2,
  "name": "Bacon Calendar",
  "author": "Philipp Kewisch",
  "description": "Add some bacon to your calendar",
  "version": "1.0.0",

  "icons": {
    "16": "addon.svg"
  },

  "theme_experiment": {
    "stylesheet": "style.css",
    "images": {
      "calendar_view_frame": "--calendar-view-frame"
    }
  },

  "theme": {
    "images": {
      "calendar_view_frame": "wing-rib-1024-768.jpg"
    }
  }
}

In this manifest we've referenced three files: addon.svg is the icon for the extension, style.css is the extra CSS that gets applied to the main window, and wing-rib-1024-768.jpg will be our background image. The following CSS works at the moment:

#view-box > * {
    background-image: var(--calendar-view-frame);
    background-size: cover;
    padding: 0;
}
calendar-month-day-box, calendar-event-column {
    opacity: 0.8;
}

Put all of these files into one directory and zip them together, then you can install it as an extension. Now, you will have some meat in your calendar.

If you would like to add different CSS, or the CSS above is no longer valid, you can use the Developer Tools' inspector to find the right rules. This works similar to the web developer tools, but for the whole Thunderbird window. You can find it in the Tools menu.

---

Legacy Extensions

For reference, my original answer from 8 years ago used the legacy extensions format. It worked similarly, but the files were a bit different. These extensions had a chrome.manifest, you need to add a style overlay that overlays chrome://messenger/content/messenger.xul. This will allow you to overlay a CSS file, where you just need to add the right rules. Back then, this was the required CSS:

#view-deck > * {
    background-image: url(http://baconmockup.com/800/600);
    background-size: cover;
    padding: 0;
}
calendar-month-day-box, calendar-event-column {
    opacity: 0.8;
}

If you want the images to be in each day box instead, just adapt the rules a bit. I'll leave the week view as an exercise.

calendar-month-day-box {
    background-image: url(http://baconmockup.com/200/130);
    background-size: cover;
}