Hello World Extension Tutorial
This is a tutorial for making a Hello World MailExtension.
In the first part of the Hello World Extension Tutorial, we will create a very simple extension, which adds a "Hello World" button to Thunderbird's main toolbar and a click on it will show a Hello, World! popup.

Creating a manifest.json

First we create an empty hello-world project folder for your extension and navigate to it.
As described in our MailExtension guide, extensions require a manifest.json file that tells Thunderbird a few basic information about the add-on. Let's place the following manifest.json file directly in the hello-world project folder.
manifest.json
1
{
2
"manifest_version": 2,
3
"name": "Hello World",
4
"description": "Your basic Hello World extension!",
5
"version": "1.0",
6
"author": "[Your Name Here]",
7
"applications": {
8
"gecko": {
10
"strict_min_version": "78.0"
11
}
12
},
13
"browser_action": {
14
"default_popup": "mainPopup/popup.html",
15
"default_title": "Hello World",
16
"default_icon": "images/internet-32px.png"
17
},
18
"icons": {
19
"64": "images/internet.png",
20
"32": "images/internet-32px.png",
21
"16": "images/internet-16px.png"
22
}
23
}
Copied!
You can grab the icons we use for this example from the Thunderstorm repo. Make sure to create an images directory in the hello-world project folder for them.

Using a browser_action

The above manifest includes the definition for a browser_action. That is the toolbar button we want to add to Thunderbird's main toolbar. The reference to a browser in its name is inherited from the Firefox Browser.
The allowed keys for the browser_action button are described in our API documentation. We define a popup HTML page, which should be loaded if the button is clicked, a title and an icon.

popup.html

The location of the HTML file loaded by the popup of our browser_action is defined in the browser_action.default_popup key. Let's create a mainPopup directory in the hello-world project folder for everything related to that popup and start with the following popup.html .
popup.html
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Hello World</title>
6
<link rel="stylesheet" type="text/css" media="screen" href="popup.css">
7
<script src="popup.js"></script>
8
</head>
9
<body>
10
<div class="popup-page">
11
Hello, World!
12
</div>
13
</body>
14
</html>
Copied!
The default content security policy disallows JavaScript placed directly in <script> tags and inline event handlers like onclick. Place all your Javascript code into a separate file (like popup.js in this example) and use addEventListener() instead of inline event handlers.

popup.css

Now we want to create the CSS file referenced in our HTML file. We'll call it popup.css. This is just for decoration of the page, we'll put it in the same folder as the popup.html file.
popup.css
1
.popup-page {
2
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3
font-weight: bold;
4
height: 60px;
5
padding: 10px;
6
}
Copied!

popup.js

We're going to create the following file called popup.js and place it in the same folder as the popup.html file.
popup.js
1
// Below is what we'll log to the console.
2
3
console.log('Hello, World! - from popup.js');
Copied!
What our little script does is sending a message to the console each time we click on our "Hello World" toolbar button. We'll take a look at that in a moment when we try out our add-on. The first line is just a comment, so we can remember what our code is doing.

Testing the Extension

First, let's double-check that we have all the files in the right places:
1
hello-world/
2
├── manifest.json
3
├── mainPopup/
4
├── popup.html
5
├── popup.css
6
└── popup.js
7
└── images/
8
├── internet.png
9
├── internet-32px.png
10
└── internet-16px.png
Copied!

Installing

To install the add-on we created, we are going to load it temporarily. Let's start by opening the Add-ons Manager:
This will open up the Add-ons Manager, make sure "Extensions" is selected on the left-hand side and click the gear to select "Debug Add-ons".
Click on the "Load Temporary Add-on..." button:
Select the manifest.json file from within our hello-world project folder:
This should install the Add-on for this session only:

Opening the Error Console

Our extension will print messages to the error console using console.log(), so we need to open the error console first, in order to see those log entries. Hit the "Inspect" button under the add-on's listing (pictured above), this will bring up the Developer Tools tab.
Make sure the "Console" tab is selected in the Developer Tools. Click the "Persist Logs" checkbox in the top right-hand corner of the Developer Tools so that we can see the output from the add-on after we've interacted with it (otherwise it only shows output as it is happening).

Trying it Out

Now we can give our new add-on a whirl. Head to the home tab and find the new "Hello World" button in the main toolbar in the top right-hand corner. Click on it to see a popup with your message Hello, World!
Now, if you look at the Developer Tools, you should see something like the following in the console:

Creating the add-on file

Once your add-on is ready for release or if you want to share it with others, you need to create a single add-on file. Simply zip the content of your add-on directory and use the xpi file extension. That file can be installed from the gear menu in the Thunderbird Add-Ons Manager.
Last modified 1d ago