☰

Thunderbird - 将 YouTube 缩略图添加到 RSS 源

tag-icon • tag-icon thunderbird youtube rss feed-reader
Thunderbird - 将 YouTube 缩略图添加到 RSS 源

当我从 Thunderbird 阅读 YouTube 频道的 RSS 时，我只看到视频的描述而看不到其他内容。我想知道是否有办法将缩略图添加到 feed 预览中。

我知道 youtube RSS 提要的标签中包含缩略图链接<media:thumbnail>，所以我想知道是否有办法让 Thunderbird 在条目本身中显示该内容。

答案1

我最终不得不编写一个扩展来完成这项工作，但这并不像我想象的那么难。

其中大部分内容是从网上的其他教程拼凑起来的，所以我不能 100% 确定它是如何工作的，但这里是它的要点。

我创建了一个 git 仓库这里万一您只想下载扩展程序，但我仍然会跟进并描述正在发生的事情。

该扩展有 4 个文件：

  • 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"
    ]
}

该文件大部分是样板，重要的部分是permissions密钥，它允许扩展读取和编辑显示的消息，以及密钥background，它告诉我们在加载扩展时运行什么脚本。

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"}]
});

该脚本对消息进行了一些后台维护，具体来说：

  • 添加消息监听器，以便可以通过脚本之间的内部消息传递检索视频 ID（这对于权限是必要的，因为注入脚本没有权限检索信息本身）；
  • messageDisplayScript在显示消息时添加一个以注入内容，在本例中add-thumb.js为add-thumb.css

我在这里遇到的唯一问题是我无法找到 feed/video 的实际 URL，所以我不得不依赖消息 ID，幸运的是，消息 ID 本身就包含视频 ID。如果有人知道如何获取实际的视频 URL，我将不胜感激（尽管脚本本身就运行良好）。

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();

这就是神奇的事情发生的地方，实际的缩略图被检索并注入到消息中。我只是使用一些正则表达式从消息 ID 中提取视频 ID，然后注入一个新的 img 元素，其中源指向缩略图。

add-thumb.css

.yt_thumbnail { width:400px; }

这只是为了使缩略图适合页面。

总而言之，这并不是那么难，但我仍然想在这里写一个回复，因为我觉得它可能对其他 Thunderbird 用户有用，并且可能为其他人提供一些关于如何自己编写扩展的提示。

相关内容