From f487ffb066d76ec9ddbadac8a3f4f57d17858b19 Mon Sep 17 00:00:00 2001 From: Luke Crouch Date: Thu, 3 Dec 2020 15:26:37 -0600 Subject: [PATCH] add panel for email fields to link to relay --- src/_locales/en/messages.json | 20 ++++++++++ src/content_script.js | 74 +++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 4e968ac4..c9b84584 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -244,5 +244,25 @@ "inPageUI-tooltip-button-share-passive": { "message": "If you click this button, Facebook will be able to track your visit to this site.", "description": "" + }, + "inPageUI-tooltip-button-email": { + "message": "If you use your real email address here, Facebook may be able to track you. Click to learn more.", + "description": "" + }, + "inPageUI-tooltip-email-prompt-p1": { + "message": "Allow Facebook to track you here?", + "description": "" + }, + "inPageUI-tooltip-email-prompt-p2": { + "message": "This site can share your email address with Facebook, which allows Facebook to track you. Use a service like Firefox Relay to hide your real email address.", + "description": "" + }, + "btn-relay-learn": { + "message": "Learn More", + "description": "" + }, + "btn-relay-try": { + "message": "Try Firefox Relay", + "description": "" } } diff --git a/src/content_script.js b/src/content_script.js index 2dd94cde..8b7fccad 100755 --- a/src/content_script.js +++ b/src/content_script.js @@ -5,6 +5,10 @@ // "[title*='Facebook']", // "[aria-label*='Facebook']", +const EMAIL_PATTERN_DETECTION_SELECTORS = [ + "input[type='email']", +]; + const LOGIN_PATTERN_DETECTION_SELECTORS = [ "[title='Log in with Facebook']", "[class*='FacebookConnectButton']", @@ -77,7 +81,9 @@ function isFixed (elem) { const fragmentClasses = ["fbc-badge-fence", "fbc-badge-tooltip", "fbc-badge-prompt"]; const htmlBadgeFragmentPromptParagraphStrings = [ browser.i18n.getMessage("inPageUI-tooltip-prompt-p1"), browser.i18n.getMessage("inPageUI-tooltip-prompt-p2") ]; +const htmlEmailBadgeFragmentPromptParagraphStrings = [ browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p1"), browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p2") ]; const htmlBadgeFragmentPromptButtonStrings = ["btn-cancel", "btn-allow"]; +const htmlEmailBadgeFragmentPromptButtonStrings = ["btn-relay-learn", "btn-relay-try"]; function getTooltipFragmentStrings (socialAction) { switch (socialAction) { @@ -87,6 +93,8 @@ function getTooltipFragmentStrings (socialAction) { return browser.i18n.getMessage("inPageUI-tooltip-button-share"); case "share-passive": return browser.i18n.getMessage("inPageUI-tooltip-button-share-passive"); + case "email": + return browser.i18n.getMessage("inPageUI-tooltip-button-email"); } } @@ -133,6 +141,36 @@ function createBadgeFragment (socialAction) { htmlBadgeFragmentPromptButtonDiv.appendChild(button); } + htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptButtonDiv); + } else if (socialAction === "email") { + const htmlBadgeFragmentPromptDiv = htmlBadgeFragment.querySelector(".fbc-badge-prompt"); + + const htmlBadgeFragmentPromptH1 = document.createElement("h1"); + + htmlBadgeFragmentPromptH1.appendChild(document.createTextNode( browser.i18n.getMessage("facebookContainer") )); + htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptH1); + + const htmlBadgeFragmentPromptContents = document.createElement("div"); + htmlBadgeFragmentPromptContents.className = "fbc-badge-prompt-contents"; + + for (let promptParagraphString of htmlEmailBadgeFragmentPromptParagraphStrings) { + const paragraph = document.createElement("p"); + paragraph.appendChild(document.createTextNode(promptParagraphString)); + htmlBadgeFragmentPromptContents.appendChild(paragraph); + } + + htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptContents); + + const htmlBadgeFragmentPromptButtonDiv = document.createElement("div"); + htmlBadgeFragmentPromptButtonDiv.className = "fbc-badge-prompt-buttons"; + + for (let buttonString of htmlEmailBadgeFragmentPromptButtonStrings) { + const button = document.createElement("button"); + button.className = "fbc-badge-prompt-" + buttonString; + button.appendChild(document.createTextNode( browser.i18n.getMessage(buttonString) )); + htmlBadgeFragmentPromptButtonDiv.appendChild(button); + } + htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptButtonDiv); } @@ -159,6 +197,8 @@ function addFacebookBadge (target, badgeClassUId, socialAction) { const htmlBadgeFragmentPromptButtonCancel = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-cancel"); const htmlBadgeFragmentPromptButtonAllow = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-allow"); + const htmlEmailBadgeFragmentPromptButtonLearn = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-relay-learn"); + const htmlEmailBadgeFragmentPromptButtonTry = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-relay-try"); const htmlBadgeFragmentFenceDiv = htmlBadgeDiv.querySelector(".fbc-badge-fence"); htmlBadgeDiv.className = "fbc-badge " + badgeClassUId; @@ -223,6 +263,39 @@ function addFacebookBadge (target, badgeClassUId, socialAction) { document.querySelector(".fbc-has-badge.js-fbc-prompt-active").classList.remove("js-fbc-prompt-active"); e.target.parentElement.parentNode.parentNode.classList.remove("active"); }); + } else if (socialAction === "email") { + target.addEventListener("click", (e) => { + if (allowClickSwitch) { + // Button disabled. Either will trigger new HTTP request or page will refresh. + setTimeout(()=>{ + location.reload(true); + }, 250); + return; + } else { + // Click badge, button disabled + e.preventDefault(); + e.stopPropagation(); + htmlBadgeFragmentFenceDiv.click(); + } + }); + + htmlBadgeFragmentFenceDiv.addEventListener("click", (e) => { + e.preventDefault(); + e.target.parentElement.classList.toggle("active"); + positionPrompt( htmlBadgeDiv ); + target.classList.toggle("js-fbc-prompt-active"); + document.body.classList.toggle("js-fbc-prompt-active"); + }); + + // Add to Container "Allow" + htmlEmailBadgeFragmentPromptButtonTry.addEventListener("click", (e) => { + window.open("https://relay.firefox.com"); + }); + + // Open learn more link + htmlEmailBadgeFragmentPromptButtonLearn.addEventListener("click", (e) => { + window.open("https://support.mozilla.org/en-US/kb/facebook-container-prevent-facebook-tracking#w_how-does-email-tracking-work"); + }); } else if (socialAction === "share-passive") { htmlBadgeDiv.classList.add("fbc-badge-share-passive", "fbc-badge-share"); @@ -506,6 +579,7 @@ function detectFacebookOnPage () { patternDetection(PASSIVE_SHARE_PATTERN_DETECTION_SELECTORS, "share-passive"); patternDetection(SHARE_PATTERN_DETECTION_SELECTORS, "share"); patternDetection(LOGIN_PATTERN_DETECTION_SELECTORS, "login"); + patternDetection(EMAIL_PATTERN_DETECTION_SELECTORS, "email"); escapeKeyListener(); }