feat: schema changes and updated UI fixes #9 fixes #1

background.js

@@ -17,7 +17,10 @@ function onStartup(){
     chrome.storage.sync.get(['betterSourceURL'], function(result) {
         console.log('Value currently is ' + (result.betterSourceURL || DEFAULT_LIST_URL));
 
-        fetch((result.betterSourceURL || DEFAULT_LIST_URL))
+        var listUrl = result.betterSourceURL || DEFAULT_LIST_URL
+        // Uncomment this when testing list changes locally
+        // listUrl = "/defaultlist.json"
+        fetch(listUrl)
         .then(response => response.json())
         .then(data => {
             console.log("Got data: ", data);
@@ -30,9 +33,9 @@ function onStartup(){
 }
 
 function getMatch(url){
-  var match = BETTER_ALTERNATIVES.find(pattern => url.match(new RegExp(pattern[0])));
-  if(match)
-      return match[1];
+  var match = BETTER_ALTERNATIVES.find(pattern => url.match(new RegExp(pattern.urlPattern)));
+  if(match && match.alternatives)
+      return match.alternatives;
   else return null;
 }
 

contentscript.js

@@ -1,8 +1,8 @@
 // document.body.style.border = "15px solid red";
 
-/* 
+/*
 
-IN PROGRESS: 
+IN PROGRESS:
 
 - List of alternatives should be loaded from a user-specified external source. Can be modified via options.html/options.js
 
@@ -15,41 +15,66 @@ TODO
  - Test and fix for Chrome, Brave & Firefox
 
 */
+const fillTemplate = function(templateString, templateVars){
+    return new Function("return `"+templateString +"`;").call(templateVars);
+}
 
-function showBetter(alternative) {
-    if(!alternative) return;
-    let betterdiv = document.createElement("div");
-    betterdiv.style.backgroundColor = "#ffcc49";
-    betterdiv.style.color = "red";
-    betterdiv.style.position = "fixed";
-    betterdiv.style.bottom = "10px";
-    betterdiv.style.right = "10px";
-    betterdiv.style.width = "300px";
-    betterdiv.style.boxShadow = "0px 10px 30px #222222";
-    betterdiv.style.padding = "12px";
-    betterdiv.style.height = "200px";
-    betterdiv.style.textAlign = "center";
-    betterdiv.style.fontSize = "20px";
+const altTemplate = "\
+<a href='${this.url}' \
+   style='display: block; border: 2px solid #222222; border-radius: 4px; margin-top: 12px; color:#222222; padding: 8px;'> \
+  <p style='margin: 0; font-size: 14px; font-weight: bold;'>${this.name} &rarr;</p> \
+  <p style='margin: 0; font-size: 12px;'>${this.desc}</p> \
+</a>"
+
+function createNonRecommendedAlts(alternatives) {
+    let nonRecommendedAlts = document.createElement("div");
+    nonRecommendedAlts.setAttribute("style", "text-align: left;");
+    nonRecommendedAlts.innerHTML = "<p style='font-size: 12px; text-align: center; margin-bottom: 4px;'>MORE ALTERNATIVES</p>";
+    alternatives.map(alternative => {
+      nonRecommendedAlts.innerHTML += fillTemplate(altTemplate, alternative);
+    })
+    return nonRecommendedAlts;
+}
+
+function createRecommendedAlt(alternative) {
+    let recommendedAlt = document.crateElement("div");
 
     let betterBrandText = document.createElement("h1");
-    betterBrandText.innerHTML = "Better"
-    betterBrandText.setAttribute("style", "font-size: 32px; color: #222222; font-weight: bold; margin: 12px;")
+    betterBrandText.innerHTML = "Better";
+    betterBrandText.setAttribute("style", "font-size: 32px; color: #222222; font-weight: bold; margin: 12px;");
 
     let alternativeText = document.createElement("p");
-    alternativeText.innerHTML = alternative
-    alternativeText.setAttribute("style", "font-size: 20px; color: #222222; font-weight: bold; margin-top: 24px;")
+    alternativeText.innerHTML = recommendedAlternative.desc;
+    alternativeText.setAttribute("style", "font-size: 20px; color: #222222; font-weight: bold; margin-top: 24px;");
 
-    let alternativeCTA = document.createElement("a")
-    alternativeCTA.innerHTML = "Check it out &rarr;"
-    alternativeCTA.setAttribute("style", "display: inline-block; padding: 12px 24px; background-color: #222222; color: #ffffff; border-radius: 4px;")
+    let alternativeCTA = document.createElement("a");
+    alternativeCTA.innerHTML = recommendedAlternative.name + " &rarr;";
+    alternativeCTA.setAttribute("href", recommendedAlternative.url);
+    alternativeCTA.setAttribute("style", "display: inline-block; padding: 12px 24px; background-color: #222222; color: #ffffff; border-radius: 4px;");
 
-    let dismissButton = document.createElement("button")
-    dismissButton.innerHTML = "&cross; Dismiss suggestion for this URL"
-    dismissButton.setAttribute("style", "display: block; font-size: 14px; margin: 16px auto;")
+    recommendedAlt.appendChild(betterBrandText);
+    recommendedAlt.appendChild(alternativeText);
+    recommendedAlt.appendChild(alternativeCTA);
+    return recommendedAlt;
+}
 
-    betterdiv.appendChild(betterBrandText);
-    betterdiv.appendChild(alternativeText);
-    betterdiv.appendChild(alternativeCTA);
+function showBetter(alternatives) {
+    if(!alternatives) return;
+
+    let betterdiv = document.createElement("div");
+    betterdiv.setAttribute("style",
+                           "background-color: #ffcc49; position: fixed; bottom: 10px; right: 10px; width: 300px; \
+                            box-shadow: 0px 10px 30px #222222; padding: 12px; text-align: center; font-size: 20px;")
+
+    betterdiv.appendChild(createRecommendedAlt(alternatives[0]));
+
+    if(alternatives.length > 1) {
+      betterdiv.appendChild(createNonRecommendedAlts(alternatives.slice(1)));
+    }
+
+    let dismissButton = document.createElement("button");
+    dismissButton.innerHTML = "&cross; Dismiss suggestion for this URL";
+    dismissButton.setAttribute("style", "display: block; font-size: 14px; margin: 16px auto;");
     betterdiv.appendChild(dismissButton);
     document.body.appendChild(betterdiv);
 }

defaultlist.json

@@ -1,3 +1,27 @@
 [
-    [ "https?:\/\/(www.)?google.com\/chrome" , "A better alternative is <a href='https://mozilla.com' target='_blank'>Mozilla</a>."]
+	{
+		"urlPattern": "https?:\/\/(www.)?google.com\/chrome",
+		"alternatives": [
+			{
+				"url": "https://mozilla.com",
+				"name": "Mozilla Firefox",
+				"desc": "Firefox is open source, backed by the Mozilla Foundation"
+			},
+			{
+				"url": "https://brave.org",
+				"name": "Brave Browser",
+				"desc": "Brave is open source, new-generation browser."
+			}
+		]
+	},
+	{
+		"urlPattern": "https?:\/\/(www.)?slack.com",
+		"alternatives": [
+			{
+				"url": "https://matrix.org",
+				"name": "Matrix / Element",
+				"desc": "An open network for secure, decentralized communication"
+			}
+		]
+	}
 ]

manifest.json

@@ -17,5 +17,8 @@
     "options_ui": {
       "page": "options.html",
       "open_in_tab": false
-    }
+    },
+    "web_accessible_resources": [
+      "defaultlist.json"
+    ]
   }