diff --git a/contentscript.js b/contentscript.js
index e222b16..e35c8b6 100644
--- a/contentscript.js
+++ b/contentscript.js
@@ -18,12 +18,14 @@ const fillTemplate = function(templateString, templateVars){
return new Function("return `"+templateString +"`;").call(safeTemplateVars);
}
-const altTemplate = "\
- \
+const altTemplate =
+ "\
+ \
${this.name} → ${this.desc}
MORE ALTERNATIVES
"; - alternatives.map(alternative => { - nonRecommendedAlts.innerHTML += fillTemplate(altTemplate, alternative); - }) - return nonRecommendedAlts; + let nonRecommendedAlts = document.createElement("div"); + nonRecommendedAlts.setAttribute("style", "text-align: left;"); + let alternativesHeading = document.createElement("p"); + alternativesHeading.setAttribute("style", "font-size: 12px; text-align: center; margin: 4px 0;"); + alternativesHeading.innerText = "MORE ALTERNATIVES"; + nonRecommendedAlts.appendChild(alternativesHeading); + let scrollableAltContainer = document.createElement("div"); + scrollableAltContainer.classList.add("better-ext-alt-container"); + alternatives.map((alternative) => { + scrollableAltContainer.innerHTML += fillTemplate(altTemplate, alternative); + }); + nonRecommendedAlts.appendChild(scrollableAltContainer); + return nonRecommendedAlts; } function createRecommendedAlt(recommendedAlternative) {