From 46a5310aeda0ec384d10840ec13e324d8d822275 Mon Sep 17 00:00:00 2001 From: Mitesh Shah Date: Wed, 5 Aug 2020 11:53:21 +0530 Subject: [PATCH] feat: schema changes and updated UI fixes #9 fixes #1 --- background.js | 11 ++++--- contentscript.js | 83 +++++++++++++++++++++++++++++++----------------- defaultlist.json | 26 ++++++++++++++- manifest.json | 5 ++- 4 files changed, 90 insertions(+), 35 deletions(-) diff --git a/background.js b/background.js index 2c0a55f..cdebb8d 100644 --- a/background.js +++ b/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; } diff --git a/contentscript.js b/contentscript.js index 04aba50..9bb5a24 100644 --- a/contentscript.js +++ b/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 = "\ + \ +

${this.name} →

\ +

${this.desc}

\ +" + +function createNonRecommendedAlts(alternatives) { + let nonRecommendedAlts = document.createElement("div"); + nonRecommendedAlts.setAttribute("style", "text-align: left;"); + nonRecommendedAlts.innerHTML = "

MORE ALTERNATIVES

"; + 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 →" - 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 + " →"; + 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 = "✗ 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 = "✗ Dismiss suggestion for this URL"; + dismissButton.setAttribute("style", "display: block; font-size: 14px; margin: 16px auto;"); betterdiv.appendChild(dismissButton); document.body.appendChild(betterdiv); } diff --git a/defaultlist.json b/defaultlist.json index 95d0a82..5a55816 100644 --- a/defaultlist.json +++ b/defaultlist.json @@ -1,3 +1,27 @@ [ - [ "https?:\/\/(www.)?google.com\/chrome" , "A better alternative is Mozilla."] + { + "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" + } + ] + } ] \ No newline at end of file diff --git a/manifest.json b/manifest.json index 206ef30..9e6226b 100644 --- a/manifest.json +++ b/manifest.json @@ -17,5 +17,8 @@ "options_ui": { "page": "options.html", "open_in_tab": false - } + }, + "web_accessible_resources": [ + "defaultlist.json" + ] } \ No newline at end of file