diff --git a/src/_locales/en_US/messages.json b/src/_locales/en_US/messages.json index 93c4d9e083..d53efa94fa 100644 --- a/src/_locales/en_US/messages.json +++ b/src/_locales/en_US/messages.json @@ -445,6 +445,14 @@ } } }, + "popup_info_replaced_widgets": { + "message": "Some widgets have been temporarily replaced", + "description": "Clickable status header text in the popup. Shown when a media widget like Spotify embed or Disqus comment section has been temporarily replaced by Privacy Badger with a click-to-activate placeholder." + }, + "popup_info_widgets_description": { + "message": "Some embedded content on this page might be used to track you, so Privacy Badger has temporarily replaced them. You can click to activate them here or on the page itself.", + "description": "Clickable status header text in the popup. Shown when a media widget like Spotify embed or Disqus comment section has been temporarily replaced by Privacy Badger with a click-to-activate placeholder." + }, "popup_instructions": { "message": "$COUNT$ potential $LINK_START$trackers$LINK_END$ blocked", "description": "Popup message shown when at least one tracker was blocked.", diff --git a/src/js/contentscripts/socialwidgets.js b/src/js/contentscripts/socialwidgets.js index 5af4b9ee02..7c3ded1e95 100644 --- a/src/js/contentscripts/socialwidgets.js +++ b/src/js/contentscripts/socialwidgets.js @@ -652,13 +652,21 @@ a:hover { */ function replaceIndividualButton(widget) { let selector = widget.buttonSelectors.join(','), - elsToReplace = document.querySelectorAll(selector); + elsToReplace = document.querySelectorAll(selector), + replacedWidgetsForPopup = []; elsToReplace.forEach(function (el) { createReplacementElement(widget, el, function (replacementEl) { el.parentNode.replaceChild(replacementEl, el); + // populate the replacedWidgetsForPopup array with each replaced el info, then ship off to popup + replacedWidgetsForPopup.push(replacementEl); }); }); + + chrome.runtime.sendMessage({ + type: "sendReplacedWidgetsToPopup", + replacementElements: replacedWidgetsForPopup + }); } /** diff --git a/src/js/popup.js b/src/js/popup.js index 99e3d15d88..95d7772fc3 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -220,12 +220,21 @@ function init() { // add event listeners for click-to-expand first party protections popup section $('#firstparty-protections-header').on('click', toggleFirstPartyInfoHandler); + // add event listeners for click-to-expand widgets section + $('#replaced-widgets-header').on('click', toggleWidgetsSectionHandler); + // show firstparty protections message if current tab is in our content scripts if (POPUP_DATA.enabled && POPUP_DATA.isOnFirstParty) { $("#firstparty-protections-container").show(); $('#expand-firstparty-popup').show(); } + // show replaced widgets section if there's more than zero replaced widgets on page + if (POPUP_DATA.enabled && POPUP_DATA.replacedWidgets.length) { + $('#replaced-widgets-container').show(); + $('#expand-widgets-popup').show(); + } + // improve on Firefox's built-in options opening logic if (typeof browser == "object" && typeof browser.runtime.getBrowserInfo == "function") { browser.runtime.getBrowserInfo().then(function (info) { @@ -508,6 +517,21 @@ function toggleFirstPartyInfoHandler() { } } +/** + * Click handler for showing/hiding the replaced widgets section + */ +function toggleWidgetsSectionHandler() { + if ($('#collapse-widgets-popup').is(":visible")) { + $("#collapse-widgets-popup").hide(); + $("#expand-widgets-popup").show(); + $("#instructions-widgets-description").slideUp(); + } else { + $("#collapse-widgets-popup").show(); + $("#expand-widgets-popup").hide(); + $("#instructions-widgets-description").slideDown(); + } +} + /** * Handler to undo user selection for a tracker */ diff --git a/src/js/webrequest.js b/src/js/webrequest.js index f9005367dd..a90c40d801 100644 --- a/src/js/webrequest.js +++ b/src/js/webrequest.js @@ -34,7 +34,8 @@ let constants = require("constants"), /************ Local Variables *****************/ let tempAllowlist = {}, - tempAllowedWidgets = {}; + tempAllowedWidgets = {}, + replacedWidgets = []; /***************** Blocking Listener Functions **************/ @@ -1060,6 +1061,12 @@ function dispatcher(request, sender, sendResponse) { break; } + case "sendReplacedWidgetsToPopup": { + // this new set of replaced widgets on a given page should completely replace what might already be on badger object + replacedWidgets = request.replacedWidgets; + break; + } + case "getPopupData": { let tab_id = request.tabId; @@ -1091,6 +1098,7 @@ function dispatcher(request, sender, sendResponse) { isOnFirstParty: utils.firstPartyProtectionsEnabled(tab_host), noTabData: false, origins, + replacedWidgets: replacedWidgets, settings: badger.getSettings().getItemClones(), showLearningPrompt: badger.getPrivateSettings().getItem("showLearningPrompt"), showWebRtcDeprecation: !!badger.getPrivateSettings().getItem("showWebRtcDeprecation"), diff --git a/src/skin/popup.css b/src/skin/popup.css index b811dd412e..85a46b4a8f 100644 --- a/src/skin/popup.css +++ b/src/skin/popup.css @@ -169,7 +169,7 @@ button { } /* body#main to avoid applying this to options page */ -body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message { +body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message, #replaced-widgets-container { flex: 1; display: flex; flex-direction: column; @@ -303,7 +303,7 @@ body#main #pbInstructions a, #firstparty-protections-container a, #webrtc-deprec body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #webrtc-deprecation-div a:hover, #donate a:hover { color: #ec9329; } -#instructions-firstparty-description { +#instructions-firstparty-description, #instructions-widgets-description { font-size: 14px; background-color: #e8e9ea; color: #555; @@ -476,6 +476,10 @@ div.overlay.active { margin: 10px 0; padding-bottom: 5px; } +#replaced-widgets-container { + border-bottom: 1px solid #d3d3d3; + padding-bottom: 5px; +} .basic-header { text-align: center; margin: 15px 0; @@ -582,7 +586,7 @@ div.overlay.active { color: #fff; } - #firstparty-protections-container { + #firstparty-protections-container, #replaced-widgets-container { border-bottom: 1px solid #555; } @@ -618,7 +622,7 @@ div.overlay.active { background-color: #3a3a3a; } - #instructions-firstparty-description { + #instructions-firstparty-description, #instructions-widgets-description { background-color: #3a3a3a; color: #ddd; } diff --git a/src/skin/popup.html b/src/skin/popup.html index e70393baaa..0cd636c6fe 100644 --- a/src/skin/popup.html +++ b/src/skin/popup.html @@ -144,6 +144,19 @@