"Hello World" Extension Tutorial - Part 4

Adding a content script to manipulate the body of the displayed message.

hello-world/background.js

@@ -44,3 +44,59 @@ await messenger.menus.onClicked.addListener(async (info, tab) => {
         }
     }
 });
+
+// Register the message display script.
+messenger.messageDisplayScripts.register({
+    js: [{ file: "messageDisplay/message-content-script.js" }],
+    css: [{ file: "messageDisplay/message-content-styles.css" }],
+});
+
+/**
+ * Add a handler for the communication with other parts of the extension,
+ * like our message display script.
+ *
+ * Note: It is best practice to always define a synchronous listener
+ *       function for the runtime.onMessage event.
+ *       If defined asynchronously, it will always return a Promise
+ *       and therefore answer all messages, even if a different listener
+ *       defined elsewhere is supposed to handle these.
+ * 
+ *       The listener should only return a Promise for messages it is
+ *       actually supposed to handle.
+ */
+messenger.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    // Check what type of message we have received and invoke the appropriate
+    // handler function.
+    if (message && message.hasOwnProperty("command")) {
+        return commandHandler(message, sender);
+    }
+    // Return false if the message was not handled by this listener.
+    return false;
+});
+
+// The actual (asynchronous) handler for command messages.
+async function commandHandler(message, sender) {
+    // Get the message currently displayed in the sending tab, abort if
+    // that failed.
+    const messageHeader = await messenger.messageDisplay.getDisplayedMessage(
+        sender.tab.id
+    );
+
+    if (!messageHeader) {
+        return;
+    }
+
+    // Check for known commands.
+    switch (message.command) {
+        case "getBannerDetails":
+            // Create the information we want to return to our message display
+            // script.
+            return { text: `Mail subject is "${messageHeader.subject}"` };
+        case "markUnread":
+            // Mark the message as unread.
+            messenger.messages.update(messageHeader.id, {
+                read: false,
+            });
+            break;
+    }
+}

hello-world/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Hello World Example",
     "description": "A basic Hello World example extension!",
-    "version": "3.0",
+    "version": "4.0",
     "author": "Thunderbird Team",
     "browser_specific_settings": {
         "gecko": {
@@ -25,7 +25,8 @@
         "accountsRead",
         "storage",
         "menus",
-        "notifications"
+        "notifications",
+        "messagesModify"
     ],
     "background": {
         "page": "background.html"

hello-world/messageDisplay/message-content-script.js

@@ -0,0 +1,37 @@
+async function showBanner() {
+    let bannerDetails = await browser.runtime.sendMessage({
+        command: "getBannerDetails",
+    });
+
+    // Get the details back from the formerly serialized content.
+    const { text } = bannerDetails;
+
+    // Create the banner element itself.
+    const banner = document.createElement("div");
+    banner.className = "thunderbirdMessageDisplayActionExample";
+
+    // Create the banner text element.
+    const bannerText = document.createElement("div");
+    bannerText.className = "thunderbirdMessageDisplayActionExample_Text";
+    bannerText.innerText = text;
+
+    // Create a button to display it in the banner.
+    const markUnreadButton = document.createElement("button");
+    markUnreadButton.innerText = "Mark unread";
+    markUnreadButton.addEventListener("click", async () => {
+        // Add the button event handler to send the command to the
+        // background script.
+        browser.runtime.sendMessage({
+            command: "markUnread",
+        });
+    });
+
+    // Add text and button to the banner.
+    banner.appendChild(bannerText);
+    banner.appendChild(markUnreadButton);
+
+    // Insert it as the very first element in the message.
+    document.body.insertBefore(banner, document.body.firstChild);
+};
+
+showBanner();

hello-world/messageDisplay/message-content-styles.css

@@ -0,0 +1,12 @@
+.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;
+}