0

When I read the RSS of a youtube channel from Thunderbird, I only see the description of the video and nothing else. I was wondering if there was a way to add the thumbnail to the feed preview.

I know that youtube RSS feeds have the thumbnail link included in the <media:thumbnail> tag, so I was wondering if there was a way to allow Thunderbird to show that content in the entry itself.

1 Answer 1

1

I ended up having to write an extension to do this, which wasn't nearly as hard as I thought.

Most of it has been patched together from other tutorials online so I'm not 100% sure how it works, but here's the gist of it.

I made a git repository here in case you just want to download the extension, but I'll still follow this up with a description of what is going on.

The extension has 4 files:

  • manifest.json
  • bg.js
  • add-thumb.js
  • add-thumb.css

manifest.json

{
    "manifest_version": 2,
    "name": "Add YouTube Thumbnails",
    "description": "Adds YouTube thumbnails to RSS feed entries",
    "version": "0.0.1",
    "author": "fullmontis",
    "applications": {
        "gecko": {
            "id": "[email protected]",
            "strict_min_version": "78.0"
        }
    },
    "background": {
        "scripts": [
            "bg.js"
        ]
    },
    "permissions": [
        "messagesRead",
        "messagesModify"
    ]
}

This file is mostly boilerplate, the important bits are the permissions key, which allows the extension to read and edit displayed messages, and the background key, which tells us what script to run when loading the extension.


bg.js

messenger.runtime.onMessage.addListener(async (message, sender) => {
    if ( !(message && message.hasOwnProperty("command")) ) { return ""; }
    const header = await messenger.messageDisplay.getDisplayedMessage(sender.tab.id);
    if( !header ) { return ""; }
    switch( message.command ){
    case "getId":
        return header.headerMessageId;
        break;
    default:
        return "";
    }
});   

messenger.messageDisplayScripts.register({
    js: [{file: "add-thumb.js"}],
    css: [{file: "add-thumb.css"}]
});

This script makes some background maintenance on the message, specifically:

  • adds a message listener so that the video id can be retrieved by internal messaging between scripts (this is necessary for permission, as the injection script doesn't have permission to retrieve the info itself);
  • adds a messageDisplayScript to inject content when a message is displayed, in this case add-thumb.js and add-thumb.css

Only problem I had here is that I was unable to locate the actual URL for the feed/video, so I had to rely on the message id, which luckily has the video id in itself. If anyone knows how to get the actual video URL I'd appreciate that (although the script works perfectly as it is).


add-thumb.js

async function add_thumb() {
    var header = await browser.runtime.sendMessage({command: "getId"});
    if( header == "" ){ return; }
    var id_match = header.match(/yt:video:([^@]*)@.*/);
    if( id_match.length != 2 ) { return; }
    var video_id = id_match[1];
    var thumb_url = `https://img.youtube.com/vi/${video_id}/maxresdefault.jpg`;

    var img = document.createElement("img");
    img.src = thumb_url;
    img.classList.add("yt_thumbnail");
    document.body.insertBefore(img,document.body.firstChild);
}

add_thumb();

This is where the magic happens and the actual thumbnail is retrieved and injected in the message. I just use some regexp to extract the video ID from the message ID, then inject a new img element with the source pointing to the thumbnail.


add-thumb.css

.yt_thumbnail { width:400px; }

This is just to make the thumbnail fit in the page.


All in all it wasn't that hard, but I still wanted to write a reply here as I feel it could be useful for other Thunderbird users, and maybe give a few hints to other people on how to write extensions themselves.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .