Widgets in popup

src/_locales/en_US/messages.json

@@ -445,6 +445,14 @@
             }
         }
     },
+    "popup_info_replaced_widgets": {
+        "message": "One or more widgets have been 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 <a href='https://privacybadger.org/#How-does-Privacy-Badger-handle-social-media-widgets' target='_blank'>Privacy Badger has temporarily replaced them</a>. The following widgets have been 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_instructions": {
         "message": "$COUNT$ potential $LINK_START$trackers$LINK_END$ blocked",
         "description": "Popup message shown when at least one tracker was blocked.",

src/js/contentscripts/socialwidgets.js

@@ -673,6 +673,12 @@ function replaceIndividualButton(widget) {
       el.parentNode.replaceChild(replacementEl, el);
     });
   });
+
+  // send the replaced widgets information to the popup
+  chrome.runtime.sendMessage({
+    type: "sendReplacedWidgetsToPopup",
+    widgetName: widget.name
+  });
 }
 
 /**

src/js/popup.js

@@ -221,12 +221,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 are replaced widgets on page
+  if (POPUP_DATA.enabled && Object.keys(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) {
@@ -509,6 +518,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
  */
@@ -712,6 +736,18 @@ function refreshPopup() {
 
     $printable.appendTo('#blockedResourcesInner');
 
+    // if there are replaced widgets, get their names and append to that popup section
+    if (Object.keys(POPUP_DATA.replacedWidgets).length) {
+      for (let widget in POPUP_DATA.replacedWidgets) {
+        POPUP_DATA.replacedWidgets[widget].forEach((widgetType) => {
+          // prevent duplicate names from appearing, only append if it doesn't already exist
+          if (!$('#instructions-widgets-description li:contains("' + widgetType + '")').length) {
+            $("#instructions-widgets-description").append("<li>" + widgetType + "</li>");
+          }
+        });
+      }
+    }
+
     // activate tooltips
     $('#blockedResourcesInner .tooltip:not(.tooltipstered)').tooltipster(
       htmlUtils.DOMAIN_TOOLTIP_CONF);

src/js/webrequest.js

@@ -34,7 +34,8 @@ let constants = require("constants"),
 
 /************ Local Variables *****************/
 let tempAllowlist = {},
-  tempAllowedWidgets = {};
+  tempAllowedWidgets = {},
+  replacedWidgets = {};
 
 /***************** Blocking Listener Functions **************/
 
@@ -882,6 +883,7 @@ function dispatcher(request, sender, sendResponse) {
       "getBlockedFrameUrls",
       "getReplacementButton",
       "inspectLocalStorage",
+      "sendReplacedWidgetsToPopup",
       "supercookieReport",
       "unblockWidget",
     ];
@@ -1062,6 +1064,25 @@ function dispatcher(request, sender, sendResponse) {
     break;
   }
 
+  case "sendReplacedWidgetsToPopup": {
+    let tab_host;
+    // iframes send unreliable host responses, sender url and falsey frameId is to get top-level host
+    if (sender.frameId == 0 && sender.url) {
+      tab_host = sender.url;
+    }
+
+    // avoid setting undefined properties on local replaced widgets array, but establish a property for known host
+    if (!replacedWidgets[tab_host] && tab_host) {
+      replacedWidgets[tab_host] = [];
+    }
+
+    // only save widget name if it's not already present in local widgets array
+    if (!replacedWidgets[tab_host].includes(request.widgetName)) {
+      replacedWidgets[tab_host].push(request.widgetName);
+    }
+    break;
+  }
+
   case "getPopupData": {
     let tab_id = request.tabId;
 
@@ -1085,6 +1106,13 @@ function dispatcher(request, sender, sendResponse) {
       }
     }
 
+    // before sending response, remove old replaced widgets information from previous tabs
+    for (let host in replacedWidgets) {
+      if (!host.includes(tab_host)) {
+        delete replacedWidgets[host];
+      }
+    }
+
     sendResponse({
       cookieblocked,
       criticalError: badger.criticalError,
@@ -1093,6 +1121,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"),

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;
@@ -295,21 +295,24 @@ button.cta-button:hover, a.cta-button:hover {
     margin: 0;
 }
 /* body#main to avoid applying this to options page */
-body#main #pbInstructions a, #firstparty-protections-container a, #webrtc-deprecation-div a, #donate a {
+body#main #pbInstructions a, #webrtc-deprecation-div a, #donate a, .expandable_popup_section a {
     text-decoration: underline;
     color: black;
     font-weight: bold;
 }
-body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #webrtc-deprecation-div a:hover, #donate a:hover {
+body#main #pbInstructions a:hover, #webrtc-deprecation-div a:hover, #donate a:hover, .expandable_popup_section a:hover {
     color: #ec9329;
 }
-#instructions-firstparty-description {
+#instructions-firstparty-description, #instructions-widgets-description {
     font-size: 14px;
     background-color: #e8e9ea;
     color: #555;
     padding: 8px;
     font-size: 12px;
 }
+#instructions-widgets-description li {
+    margin-left: 20px;
+}
 #no-third-parties {
     display: block;
     font-size: 12px;
@@ -473,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;
@@ -549,7 +556,7 @@ div.overlay.active {
     :root {
         color-scheme: dark;
     }
-    
+
     body, #instruction, .key {
         background-color: #333;
         color: #ddd;
@@ -565,7 +572,7 @@ div.overlay.active {
     button,
     /* body#main to avoid applying this to options page */
     body#main #pbInstructions a,
-    #firstparty-protections-container a,
+    .expandable_popup_section a,
     #webrtc-deprecation-div a,
     #donate a,
     #pbInstructions,
@@ -583,7 +590,7 @@ div.overlay.active {
         color: #fff;
     }
 
-    #firstparty-protections-container {
+    #firstparty-protections-container, #replaced-widgets-container {
         border-bottom: 1px solid #555;
     }
 
@@ -619,7 +626,7 @@ div.overlay.active {
         background-color: #3a3a3a;
      }
 
-    #instructions-firstparty-description {
+    #instructions-firstparty-description, #instructions-widgets-description {
         background-color: #3a3a3a;
         color: #ddd;
     }

src/skin/popup.html

@@ -131,7 +131,7 @@ <h2 id="title-name"><span class="i18n_name"></span></h2>
   </div>
 </div>
 
-<div id="firstparty-protections-container" style="display:none">
+<div id="firstparty-protections-container" class="expandable_popup_section" style="display:none">
   <button class="toggle-header" id="firstparty-protections-header">
     <div class="toggle-header-title">
       <span class="i18n_popup_info_firstparty_protections popup_info"></span>
@@ -144,6 +144,19 @@ <h2 id="title-name"><span class="i18n_name"></span></h2>
   <div id="instructions-firstparty-description" class="i18n_popup_info_firstparty_description" style="display:none"></div>
 </div>
 
+<div id="replaced-widgets-container" class="expandable_popup_section" style="display:none">
+  <button class="toggle-header" id="replaced-widgets-header">
+    <div class="toggle-header-title">
+      <span class="i18n_popup_info_replaced_widgets popup_info"></span>
+    </div>
+    <span class="toggle-header-icon">
+      <span id="expand-widgets-popup" class="ui-icon ui-icon-caret-d" style="display:none"></span>
+      <span id="collapse-widgets-popup" class="ui-icon ui-icon-caret-u" style="display:none"></span>
+    </span>
+  </button>
+  <div id="instructions-widgets-description" class="i18n_popup_info_widgets_description" style="display:none"></div>
+</div>
+
 <div id="blockedResourcesContainer">
   <div id="pbInstructions">
     <button class="toggle-header" id="tracker-list-header" style="display:none">