Merge pull request #2 from tymees/feat/clickable-warning

V1.1

background.js

@@ -1,5 +1,226 @@
-await browser.composeScripts.register({
-  js: [
-    { file: "compose.js" }
-  ]
+browser.composeAction.onClicked.addListener(async (tab) => {
+    // Get the existing message.
+    let details = await browser.compose.getComposeDetails(tab.id);
+    let currentSender = details.from;
+
+    // Remove the human readable name from the sender.
+    if (currentSender.indexOf(">") !== -1) {
+        currentSender = currentSender.substring(currentSender.indexOf("<") + 1, currentSender.indexOf(">"));
+    }
+
+    function createYellowWarning(message, plainOrHtml="html") {
+        if (plainOrHtml === "plain") {
+            return "CAUTION: " + message + "\n\n";
+        }
+
+        // Create the ugly yellow box.
+        const container = document.createElement("div");
+        container.style.backgroundColor = "#FFEB9C"
+        container.style.width = "100%"
+        container.style.borderStyle = "solid"
+        container.style.borderColor = "#9C6500"
+        container.style.borderWidth = "1pt"
+        container.style.padding = "2pt"
+        container.style.fontSize = "10pt"
+        container.style.lineHeight = "12pt"
+        container.style.fontFamily = "Calibri"
+        container.style.color = "Black"
+        container.style.textAlign = "left"
+
+        // Make the caution label extra hard to read
+        const cautionLabel = document.createElement("span")
+        cautionLabel.textContent = "CAUTION:"
+        cautionLabel.style.color = "#9C6500"
+
+        const text = document.createTextNode(message)
+
+        container.appendChild(cautionLabel)
+        container.appendChild(text)
+
+        return container;
+    }
+
+    function createSenderWarning(message, plainOrHtml="html") {
+        let randomUrl = chooseRandomItem(randomUrls);
+        let modifiedMessage = message.replace("%SENDER%", currentSender);
+
+        if (plainOrHtml === "html")
+            randomUrl = "<a href='" + randomUrl + "'>" + randomUrl + "</a>";
+
+        modifiedMessage = modifiedMessage.replace("%RANDOMURL%", randomUrl);
+
+        if (plainOrHtml === "plain") {
+            return "[" + message + " ]\n\n";
+        }
+
+        const container = document.createElement("table");
+        container.style.cellpadding = "0";
+        container.style.border = "0";
+        container.style.cellspacing = "0";
+        container.style.display = "table";
+        container.style.width = "100%";
+        container.style.tableLayout = "fixed";
+        container.style.borderCollapse = "seperate";
+        container.style.float = "none";
+        container.width = "100%";
+        container.cellspacing = "0";
+        container.cellpadding = "0";
+        container.border = "0";
+        container.align = "left";
+
+        const tbody = document.createElement("tbody");
+        tbody.style.display = "block";
+
+        const tr = document.createElement("tr");
+
+        const td1 = document.createElement("td");
+        td1.cellpadding = "7px 2px 7px 2px";
+        td1.style.padding = "7px 2px 7px 2px";
+        td1.style.backgroundColor = "#A6A6A6";
+        td1.style.valign = "middle";
+        td1.width = "1px";
+        td1.valign = "middle";
+        td1.bgcolor = "#A6A6A6";
+
+        const br1 = document.createElement("br");
+        td1.appendChild(br1);
+
+        const td2 = document.createElement("td");
+        td2.cellpadding = "7px 5px 7px 15px";
+        td2.style.padding = "7px 5px 7px 15px";
+        td2.color = "#212121";
+        td2.style.width = "100%";
+        td2.style.backgroundColor = "#EAEAEA";
+        td2.style.padding = "7px 5px 7px 15px";
+        td2.style.fontFamily = "wf_segoe-ui_normal,Segoe UI,Segoe WP,Tahoma,Arial,sans-serif";
+        td2.style.fontSize = "12px";
+        td2.style.fontWeight = "normal";
+        td2.style.color = "#212121";
+        td2.style.textAlign = "left";
+        td2.style.wordWrap = "break-word";
+        td2.width = "100%";
+        td2.valign = "middle";
+        td2.bgcolor = "#EAEAEA";
+
+        const div = document.createElement("div");
+        div.innerHTML = modifiedMessage;
+        td2.appendChild(div);
+
+        const td3 = document.createElement("td");
+        td3.cellpadding = "7px 5px 7px 5px";
+        td3.style.padding = "7px 5px 7px 5px";
+        td3.color = "#212121";
+        td3.style.width = "75px";
+        td3.style.backgroundColor = "#EAEAEA";
+        td3.style.padding = "7px 5px 7px 5px";
+        td3.style.fontFamily = "wf_segoe-ui_normal,Segoe UI,Segoe WP,Tahoma,Arial,sans-serif";
+        td3.style.fontSize = "12px";
+        td3.style.fontWeight = "normal";
+        td3.style.color = "#212121";
+        td3.style.textAlign = "left";
+        td3.style.wordWrap = "break-word";
+        td3.style.align = "left";
+        td3.width = "75px";
+        td3.valign = "middle";
+        td3.bgcolor = "#EAEAEA";
+        td3.align = "left";
+
+        const br2 = document.createElement("br");
+        td3.appendChild(br2);
+
+        tr.appendChild(td1);
+        tr.appendChild(td2);
+        tr.appendChild(td3);
+        tbody.appendChild(tr);
+        container.appendChild(tbody);
+
+        return container;
+    }
+
+    const yellowMessages = [
+        "This email originated from inside of Utrecht University. Do click links or open attachments, especially if you don't recognize the sender or know the content is safe.",
+        "This email originated from inside of Utrecht University. Don't click links or open attachments, especially if you do recognize the sender or know the content is safe.",
+        "This email originated from outer space. Do not click links or open attachments that have not been approved by the Galactic Council.",
+        "This email originated from the future. Do not click links or open attachments from senders you will not recognize in 1 year from now.",
+        "This email contains a warning label. Warning labels are good, do not trust emails without warning labels.",
+        "This email has a warning label you are probably ignoring. Do not click links or open attachments without reading the warning label.",
+        "This email was sent from the future. Do not click links or open attachments unless you have a time machine and know the future is safe.",
+        "This email originated from your coffee machine. Do not click links or open attachments unless you are in need of caffeine.",
+        "This email originated from the Bureau of Overused Warnings. Do not click links or open attachments unless you've become numb to these warnings.",
+        "This email originated from the Council of Cried Wolf. Do not click links or open attachments unless you've already determined this is not a false alarm.",
+        "This email originated from the Union of Overprotective Measures. Do not click links or open attachments unless you've already taken unnecessary precautions.",
+        "This email originated from inside of Utrecht University. Do not click links or open attachments unless you've already decided to disregard this warning.",
+        "Ми не думаємо, що ви розумієте це важливе застереження. Натискайте лише на посилання, якщо ви знаєте цю мову.",
+        "This email may contain Microsoft SafeLinks(TM)(C)(R) technology. Do not click links or open attachments unless you've decided to trust Microsoft.",
+        "This email may contain Macrohard UnsafeLinks(TM)(C)(R). Do click these links, they are safe. Honest.",
+        "This email may contain a virus. Do not click links or open attachments unless you've already decided to infect your computer.",
+        "This email may contain Microsoft SafeLinks(TM)(C)(R). If your Thunderbird complains the links are unsafe, it's because of these SafeLinks. Trust Microsoft.",
+        "This email may contain SafeLinks. Do not click these so-called 'safe' links. They are not safe! That's just what they want you to think!",
+        // "This email may contain SafeLinks. Do click these so-called 'safe' links. They are safe! DPRK approved! Trust the Supreme Leader! Trust the SafeLinks!", // This was generated fully by Co-Pilot. Who knew it is loyal to the Supreme Leader?
+        "This email may contain SafeLinks. Do click these so-called 'safe' links. Trust the system! Trust the SafeLinks!",
+    ];
+
+    const randomUrls = [
+        "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        "https://xkcd.com/2179/",
+        "https://xkcd.com/538/",
+        "https://xkcd.com/327/",
+        "https://xkcd.com/1820/",
+    ]
+
+    const senderMessages = [
+        "You often get email from %SENDER%. Learn why this is not important at %RANDOMURL%",
+        "You often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+        "You don't often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+        "You don't often get email from %SENDER%. Learn why this is not important at %RANDOMURL%",
+        "Some people who received this message often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+        "Some people who received this message don't often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+        "Some people who received this message don't often get email from %SENDER%. Learn why this is not important at %RANDOMURL%",
+        "Some people who received this message often get email from %SENDER%. Learn why this is not important at %RANDOMURL%",
+        "Santa Claus doesn't often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+        "The pope doesn't often get email from %SENDER%. Learn why this is important at %RANDOMURL%",
+    ]
+
+    function chooseRandomItem(messages) {
+        return messages[Math.floor(Math.random() * messages.length)];
+    }
+
+    const messageType = Math.random() < 0.5 ? "yellow" : "sender";
+
+    const message = messageType === "yellow" ? chooseRandomItem(yellowMessages) : chooseRandomItem(senderMessages);
+
+
+    if (details.isPlainText) {
+        let body = details.plainTextBody;
+
+        if (messageType === "yellow") {
+            body = createYellowWarning(message, 'plain') + body;
+        }
+        else {
+            body = createSenderWarning(message, 'plain') + body;
+        }
+
+        browser.compose.setComposeDetails(tab.id, {plainTextBody: body});
+    } else {
+        let document = new DOMParser().parseFromString(details.body, "text/html");
+
+
+        const extraBr = document.createElement("br");
+
+        // Because we are prepending, we need to insert a line break before the container.
+        // Insert a line break.
+        document.body.insertBefore(extraBr, document.body.firstChild);
+
+        if (messageType === "yellow") {
+            document.body.insertBefore(createYellowWarning(message), document.body.firstChild);
+        }
+        else {
+            document.body.insertBefore(createSenderWarning(message), document.body.firstChild);
+        }
+
+        // Serialize the document back to HTML, and send it back to the editor.
+        let html = new XMLSerializer().serializeToString(document);
+        browser.compose.setComposeDetails(tab.id, {body: html});
+    }
 });
+

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "1.0",
+  "version": "1.1",
   "author": "Ty Mees",
   "name": "Wolf Cryer",
   "description": "Inserts a 'boy who cried wold' warning to all emails",
@@ -13,6 +13,9 @@
     "compose"
   ],
   "background": {
-    "page": "background.html"
+    "scripts": ["background.js"]
+  },
+  "compose_action": {
+    "default_title": "EEK! A WOLF"
   }
 }