pluginsthunderbird

New Thunderbird Plugin: Custom Menu in Message Display Toolbar


I'm new to Thunderbird plugin development, I would like to add a new menu to the message display toolbar with some options

In my manifest.json, I have already configured a menu using the following configuration, as outlined in the Thunderbird WebExtension API documentation:

 "message_display_action": {
    "default_title": "__MSG_ctaMailSummarize__",
    "theme_icons": [
        {
            "dark": "images/bot-icon-light-64.webp",
            "light": "images/bot-icon-dark-64.webp",
            "size": 64
        },
        {
            "dark": "images/bot-icon-light-32.webp",
            "light": "images/bot-icon-dark-32.webp",
            "size": 32
        },
        {
            "dark": "images/bot-icon-light-16.webp",
            "light": "images/bot-icon-dark-16.webp",
            "size": 16
        }
    ],
    "type": "menu"
},

This configuration successfully adds a new menu:

enter image description here

However, I have been unable to add new options; the new menu appears empty.

I haven't found any useful documentation, but I assume I need to use the messageDisplay API, anyway it's unclear to me how to connect my previous configuration in the manifest.json with the API.

Any suggestions?


Solution

  • To add items to Thunderbird's menus, you need to use the menus API.

    manifest.json

    {
        "manifest_version": 2,
        "name": "SuperMenu",
        "description": "No description",
        "version": "0.1",
        "message_display_action": {
            "default_title": "SuperMenu",
            "type": "menu"
        },
        "permissions": ["menus"],
        "background": {
            "scripts": ["background.js"]
        }
    }
    

    background.js

    main();
    
    async function main() {
        const contexts = [browser.menus.ContextType.MESSAGE_DISPLAY_ACTION_MENU];
        await browser.menus.create({ contexts, title: 'Foo' });
        await browser.menus.create({ contexts, title: 'Bar' });
    }
    

    To handle a click event, add an onclick property to the object passed to menus.create() or use browser.menus.onClicked. For more information on the available parameters, please refer to the corresponding documentation.