Fix total cards button bug + safely inject HTML

Manually create new DOM elements to inject rather than use unsafe innerHTML

Author: Adamouization

content_scripts/create_total_cards_button.js

@@ -9,12 +9,28 @@
     // Check if button already exists before creating it.
     let buttonInstance = document.getElementById("button-total-cards-count");
     if (buttonInstance === null) {
-        // Create HTML for button.
-        let numberOfCardsButtonHTML = '<a id="button-total-cards-count" class="board-header-btn board-header-btn-invite ' +
-            'board-header-btn-without-icon" title="Invite to board"><span class="board-header-btn-text">' +
-            'Total cards: <b>' + numberOfCards + '</b></span></a>'
+        // Build HTML button using native DOM manipulation methods.
+
+        // Create parent hyperlink tag with relevant classes.
+        let totalCardsCounterBtn = document.createElement("a");
+        totalCardsCounterBtn.setAttribute("id", "button-total-cards-count");
+        totalCardsCounterBtn.setAttribute("class", "board-header-btn board-header-btn-invite board-header-btn-without-icon");
+
+        // Create text span for total cards.
+        let totalCardsSpan = document.createElement("span");
+        totalCardsSpan.textContent = "Total Cards: ";
+        totalCardsSpan.setAttribute("class", "board-header-btn-text");
+
+        // Have total cards number be bold.
+        let boldText = document.createElement("b");
+        boldText.textContent = String(numberOfCards);
+
+        // Append children elements to parent element.
+        totalCardsSpan.append(boldText);
+        totalCardsCounterBtn.append(totalCardsSpan);
+
         // Add button to Trello board.
-        document.getElementsByClassName("board-header-btns mod-left")[1].innerHTML += numberOfCardsButtonHTML;
+        document.getElementsByClassName("board-header-btns mod-left")[1].append(totalCardsCounterBtn);
     } else {
         // Do nothing.
     }