contentscript.js

// document.body.style.border = "15px solid red";

/*

TODO
 - Fix and test the options UI
 - Test and fix for Chrome, Brave & Firefox

*/
function escapeHtml(str) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
}

const fillTemplate = function(templateString, templateVars){
    let safeTemplateVars = Object.assign({}, ...Object.keys(templateVars).map(k => ({[k]: escapeHtml(templateVars[k])})));
    return new Function("return `"+templateString +"`;").call(safeTemplateVars);
}

const altTemplate =
  "\
<a href='${this.url}' target='_blank'> \
  <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>";

const CONTAINER_PADDING = "12px";

const CONTAINER_STYLES = `
    .better-ext-container * {
        all: unset;
    }

    .better-ext-container h1,  .better-ext-container p, .better-ext-container div {
        display:block;
    }

    .better-ext-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 20px; 
        line-height:1;
        background-color: #ffcc49; 
        position: fixed; 
        bottom: 10px; 
        right: 10px; 
        width: 300px; 
        box-shadow: 0px 10px 30px #222222; 
        padding: ${CONTAINER_PADDING}; 
        text-align: center; 
        z-index: 20000;
    }

    .better-ext-container .better-ext-alt-container {
        margin-left: -${CONTAINER_PADDING};
        margin-right: -${CONTAINER_PADDING};
        padding: 0 ${CONTAINER_PADDING};
        margin-top: 4px;
        max-height: 300px;
        overflow: scroll;
        background-color: #FEEBC8;
    }

    .better-ext-alt-container>a{
        display: block; 
        border: 2px solid #222222; 
        border-radius: 4px; 
        margin-top: ${CONTAINER_PADDING}; 
        color:#222222; 
        padding: 8px;
    }

    .better-ext-alt-container>a:last-child {
        margin-bottom: ${CONTAINER_PADDING};
    }
`;

function addPagePopupStyles() {
  let styleTag = document.createElement("style");
  styleTag.innerHTML = CONTAINER_STYLES;
  document.head.append(styleTag);
}

function createNonRecommendedAlts(alternatives) {
  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) {
    let recommendedAlt = document.createElement("div");

    let betterBrandText = document.createElement("h1");
    betterBrandText.textContent = "Better";
    betterBrandText.setAttribute("style", "font-size: 32px; color: #222222; font-weight: bold; margin: 12px;");

    let alternativeText = document.createElement("p");
    alternativeText.textContent = recommendedAlternative.desc;
    alternativeText.setAttribute(
      "style",
      "font-size: 20px; color: #222222; font-weight: bold; margin: 20px 0; line-height:1;"
    );

    let alternativeCTA = document.createElement("a");
    alternativeCTA.textContent = recommendedAlternative.name;
    alternativeCTA.innerHTML += " &rarr;";
    alternativeCTA.setAttribute("href", escapeHtml(recommendedAlternative.url));
    alternativeCTA.setAttribute("target", "_blank");
    alternativeCTA.setAttribute("style", "display: inline-block; padding: 12px 24px; background-color: #222222; color: #ffffff; border-radius: 4px;");

    recommendedAlt.appendChild(betterBrandText);
    recommendedAlt.appendChild(alternativeText);
    recommendedAlt.appendChild(alternativeCTA);
    return recommendedAlt;
}

function showBetter(match) {
    if(!match || !match.alternatives) return;
    addPagePopupStyles();
    let alternatives = match.alternatives;
    let betterdiv = document.createElement("div");
    betterdiv.classList.add("better-ext-container");
    betterdiv.appendChild(createRecommendedAlt(alternatives[0]));

    if(alternatives.length > 1) {
      betterdiv.appendChild(createNonRecommendedAlts(alternatives.slice(1)));
    }

    let dismissButton = document.createElement("button");
    dismissButton.innerHTML = "&cross; Do not show suggestion for this URL";
    dismissButton.setAttribute("style", "display: block; font-size: 14px; margin: 16px auto; cursor:pointer;");
    dismissButton.addEventListener("click", () => {
        document.body.removeChild(betterdiv);
        dismissPermanently(match);
    })
    betterdiv.appendChild(dismissButton);

    let closeButton = document.createElement("button");
    closeButton.innerText = "❌";
    closeButton.setAttribute("style", "position: absolute; top: -10px; right: -10px; cursor:pointer; background-color: white; border-radius: 15px; border: thin solid #aaa;");
    closeButton.addEventListener("click", () => {
        document.body.removeChild(betterdiv);
    })
    betterdiv.appendChild(closeButton);

    document.body.appendChild(betterdiv);
}

function dismissPermanently(match) {
    let key = `dismiss@${match.urlPattern}`
    chrome.storage.local.set({
        [key]: true,
    });
}

function ifNotDissmissed(match, callback) {
    let key = `dismiss@${match.urlPattern}`
    chrome.storage.local.get(key, (item) => {
        if (item && item[key]) {
            return;
        } else {
          callback(match);
        }
    })
}

chrome.runtime.sendMessage({type: 'getMatch', url: document.location.href}, (response) => {
    if (response) {
        ifNotDissmissed(response, showBetter);
    }
});