Update privacy-dashboard dependency to 6.0.0 (#2726)

With this update, the way privacy-dashboard communicates with the extension has
changed. Instead of sending messages using the chrome.runtime.sendMessage API,
the chrome.runtime.connect API is used instead. In the future, that will allow
us to listen for the disconnect event as a way to know when the popup UI has
been closed by the browser (e.g. the user clicked away).

package.json

@@ -65,7 +65,7 @@
         "@duckduckgo/content-scope-scripts": "github:duckduckgo/content-scope-scripts#5.21.0",
         "@duckduckgo/ddg2dnr": "file:packages/ddg2dnr",
         "@duckduckgo/jsbloom": "^1.0.2",
-        "@duckduckgo/privacy-dashboard": "github:duckduckgo/privacy-dashboard#4.1.0",
+        "@duckduckgo/privacy-dashboard": "github:duckduckgo/privacy-dashboard#6.0.0",
         "@duckduckgo/privacy-grade": "file:packages/privacy-grade",
         "@duckduckgo/privacy-reference-tests": "github:duckduckgo/privacy-reference-tests#main",
         "@duckduckgo/tracker-surrogates": "github:duckduckgo/tracker-surrogates#1.3.2",

shared/js/background/before-request.js

@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill'
 import EventEmitter2 from 'eventemitter2'
 import ATB from './atb'
+import { postPopupMessage } from './popupMessaging'
 
 const utils = require('./utils')
 const trackers = require('./trackers')
@@ -331,7 +332,7 @@ function blockHandleResponse (thisTab, requestData) {
             }
         }
         // the tab has finished loading
-        browserWrapper.notifyPopup({ updateTabData: true })
+        postPopupMessage({ messageType: 'updateTabData' })
         // Block the request if the site is not allowlisted
         if (['block', 'redirect'].includes(tracker.action)) {
             // @ts-ignore

shared/js/background/companies.js

@@ -1,6 +1,7 @@
 const TopBlocked = require('./classes/top-blocked')
 const Company = require('./classes/company')
 const browserWrapper = require('./wrapper')
+const { postPopupMessage } = require('./popupMessaging')
 
 const Companies = (() => {
     let companyContainer = {}
@@ -87,8 +88,7 @@ const Companies = (() => {
             totalPagesWithTrackers = 0
             lastStatsResetDate = Date.now()
             Companies.syncToStorage()
-            const resetDate = Companies.getLastResetDate()
-            browserWrapper.notifyPopup({ didResetTrackersData: resetDate })
+            postPopupMessage({ messageType: 'didResetTrackersData' })
         },
 
         getLastResetDate: () => lastStatsResetDate,

shared/js/background/events.js

@@ -20,6 +20,7 @@ import { clearExpiredBrokenSiteReportTimes } from './broken-site-report'
 import {
     sendPageloadsWithAdAttributionPixelAndResetCount
 } from './classes/ad-click-attribution-policy'
+import { popupConnectionOpened, postPopupMessage } from './popupMessaging'
 const utils = require('./utils')
 const experiment = require('./experiments')
 const settings = require('./settings')
@@ -285,7 +286,7 @@ browser.webRequest.onHeadersReceived.addListener(
  */
 // message popup to close when the active tab changes.
 browser.tabs.onActivated.addListener(() => {
-    browserWrapper.notifyPopup({ closePopup: true })
+    postPopupMessage({ messageType: 'closePopup' })
 })
 
 // Include the performanceWarning flag in breakage reports.
@@ -352,6 +353,13 @@ browser.runtime.onMessage.addListener((req, sender) => {
     return false
 })
 
+// Handle popup UI (aka privacy dashboard) messaging.
+browser.runtime.onConnect.addListener(port => {
+    if (port.name === 'privacy-dashboard') {
+        popupConnectionOpened(port, messageHandlers)
+    }
+})
+
 /*
  * Referrer Trimming
  */

shared/js/background/message-handlers.js

@@ -2,12 +2,13 @@ import browser from 'webextension-polyfill'
 import { dashboardDataFromTab } from './classes/privacy-dashboard-data'
 import { breakageReportForTab } from './broken-site-report'
 import parseUserAgentString from '../shared-utils/parse-user-agent-string'
-import { getExtensionURL, notifyPopup } from './wrapper'
+import { getExtensionURL } from './wrapper'
 import { isFeatureEnabled, reloadCurrentTab } from './utils'
 import { ensureClickToLoadRuleActionDisabled } from './dnr-click-to-load'
 import tdsStorage from './storage/tds'
 import { getArgumentsObject } from './helpers/arguments-object'
 import { isFireButtonEnabled } from './components/fire-button'
+import { postPopupMessage } from './popupMessaging'
 const utils = require('./utils')
 const settings = require('./settings')
 const tabManager = require('./tab-manager')
@@ -58,8 +59,8 @@ export async function setLists (options) {
     }
 
     try {
-        notifyPopup({ closePopup: true })
-        reloadCurrentTab()
+        postPopupMessage({ messageType: 'closePopup' })
+        await reloadCurrentTab()
     } catch (e) {
         console.error('Error trying to reload+refresh following `setLists` message', e)
     }

shared/js/background/popupMessaging.js

@@ -0,0 +1,58 @@
+/**
+ * @typedef {import('webextension-polyfill').Runtime.Port} Port
+ * @typedef {import('@duckduckgo/privacy-dashboard/schema/__generated__/schema.types').IncomingExtensionMessage} OutgoingPopupMessage
+ */
+
+// Messaging connection with the popup UI (when active).
+/** @type {Port?} */
+let activePort = null
+
+/**
+ * Set up the messaging connection with the popup UI.
+ *
+ * Note: If the ServiceWorker dies while there is an open connection, the popup
+ *       will take care of re-opening the connection.
+ *
+ * @param {Port} port
+ * @param {Record<
+ *     string,
+ *     (options: any, sender: any, message: any) => any
+ * >} messageHandlers
+ */
+export function popupConnectionOpened (port, messageHandlers) {
+    activePort = port
+    port.onDisconnect.addListener(() => {
+        if (activePort === port) {
+            activePort = null
+        }
+    })
+
+    port.onMessage.addListener(async message => {
+        const messageType = message?.messageType
+
+        if (!messageType || !(messageType in messageHandlers)) {
+            console.error(
+                'Unrecognized message (privacy-dashboard -> background):', message
+            )
+            return
+        }
+
+        const response = await messageHandlers[messageType](message?.options, port, message)
+        if (typeof message?.id === 'number') {
+            port.postMessage({
+                id: message.id,
+                messageType: 'response',
+                options: response
+            })
+        }
+    })
+}
+
+/**
+ * Post a message to the popup UI, if it's open.
+ *
+ * @param {OutgoingPopupMessage} message
+ */
+export function postPopupMessage (message) {
+    activePort?.postMessage(message)
+}

shared/js/background/utils.js

@@ -413,7 +413,7 @@ export function getURLWithoutQueryString (urlString) {
 export async function reloadCurrentTab () {
     const tab = await getCurrentTab()
     if (tab && tab.id) {
-        browser.tabs.reload(tab.id)
+        await browser.tabs.reload(tab.id)
     }
 }
 

shared/js/background/wrapper.js

@@ -53,14 +53,6 @@ export function getExtensionId () {
     return browser.runtime.id
 }
 
-export async function notifyPopup (message) {
-    try {
-        await browser.runtime.sendMessage(message)
-    } catch {
-        // Ignore this as can throw an error message when the popup is not open.
-    }
-}
-
 /**
  * @param {browser.WebRequest.OnBeforeRedirectDetailsType | browser.Tabs.Tab | browser.Tabs.OnUpdatedChangeInfoType} tabData
  * @returns {{tabId: number, url: string | undefined, requestId?: string, status: string | null | undefined}}