Using Content Scripts
Extending the example extension to use a content script.
In the fourth part of the Hello World Extension Tutorial, we will introduce the concept of content scripts.
We will add a banner to the top of the message display area, displaying some information about the currently viewed message. The banner will also include a button to mark the currently viewed message as unread.

Content Scripts are JavaScript files that are loaded and executed in content pages. This technology was mainly developed for browsers, where it is used to interact with the currently viewed web page.
In addition to standard content scripts, Thunderbird supports the following special types of content scripts:
- compose scripts loaded into the editor of the message composer
- message display scripts loaded into rendered messages when displayed to the user
We will be using a message display script in this example. In order to register one, we use the
messageDisplayScripts
API and add the following code to our background script:// Register the message display script.
messenger.messageDisplayScripts.register({
js: [{ file: "messageDisplay/message-content-script.js" }],
css: [{ file: "messageDisplay/message-content-styles.css" }],
});
The
messageDisplayScripts
API requires the messagesModify
permission, which needs to be added to the permissions
key in our manifest.json
file.Whenever a message is displayed to the user, the registered CSS file will be added and the registered JavaScript file will be injected and executed.
Let's create a
messageDisplay
directory inside our hello-world
project folder with the following two files:message-content-styles.css
.thunderbirdMessageDisplayActionExample {
background-color: #d70022;
color: white;
font-weight: 400;
padding: 0.25rem 0.5rem;
margin-bottom: 0.25rem;
display: flex;
}
.thunderbirdMessageDisplayActionExample_Text {
flex-grow: 1;
}
message-content-script.js
1
async function showBanner() {
2
let bannerDetails = await browser.runtime.sendMessage({
3
command: "getBannerDetails",
4
});
5
6
// Get the details back from the formerly serialized content.
7
const { text } = bannerDetails;
8
9
// Create the banner element itself.
10
const banner = document.createElement("div");
11
banner.className = "thunderbirdMessageDisplayActionExample";
12
13
// Create the banner text element.
14
const bannerText = document.createElement("div");
15
bannerText.className = "thunderbirdMessageDisplayActionExample_Text";
16
bannerText.innerText = text;
17
18
// Create a button to display it in the banner.
19
const markUnreadButton = document.createElement("button");
20
markUnreadButton.innerText = "Mark unread";
21
markUnreadButton.addEventListener("click", async () => {
22
// Add the button event handler to send the command to the
23
// background script.
24
browser.runtime.sendMessage({
25
command: "markUnread",
26
});
27
});
28
29
// Add text and button to the banner.
30
banner.appendChild(bannerText);
31
banner.appendChild(markUnreadButton);
32