Don't call unique() in content scripts when right clicking

`unique` call (to get selector for target) can be expensive; now only called when user chooses `Block element via selector`

Fixes brave/brave-browser#2410

components/brave_extension/extension/brave_extension/background/events/cosmeticFilterEvents.ts

@@ -35,11 +35,17 @@ chrome.contextMenus.create({
 chrome.contextMenus.onClicked.addListener(function (info, tab) {
   switch (info.menuItemId) {
     case 'addBlockElement': {
-      rule.selector = window.prompt('CSS selector to block: ', `${rule.selector}`) || ''
-      chrome.tabs.insertCSS({
-        code: `${rule.selector} {display: none;}`
+      chrome.tabs.query({active: true, currentWindow: true}, function(tabs: any) {
+        chrome.tabs.sendMessage(tabs[0].id, {type: 'getTargetSelector'}, function (response: any) {
+          if (response) {
+            rule.selector = window.prompt('CSS selector to block: ', `${response}`) || ''
+            chrome.tabs.insertCSS({
+              code: `${rule.selector} {display: none;}`
+            })
+            cosmeticFilterActions.siteCosmeticFilterAdded(rule.host, rule.selector)
+          }
+        })
       })
-      cosmeticFilterActions.siteCosmeticFilterAdded(rule.host, rule.selector)
       break
     }
     case 'resetSiteFilterSettings': {
@@ -58,7 +64,11 @@ chrome.contextMenus.onClicked.addListener(function (info, tab) {
 
 // content script listener for right click DOM selection event
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  rule.host = msg.baseURI
-  rule.selector = msg.selector
-  sendResponse(rule)
+  const action = typeof msg === 'string' ? msg : msg.type
+  switch (action) {
+    case 'contextMenuOpened': {
+      rule.host = msg.baseURI
+    }
+    break
+  }
 })

components/brave_extension/extension/brave_extension/content.ts

@@ -1,15 +1,25 @@
 const unique = require('unique-selector').default
+let target: EventTarget | null
 
 function getCurrentURL () {
   return window.location.hostname
 }
 
 document.addEventListener('contextmenu', (event) => {
-  let selector = unique(event.target) // this has to be done here, events can't be passed through the messaging API
-  let baseURI = getCurrentURL()
-
+  // send host and store target
+  // `target` needed for when background page handles `addBlockElement`
+  target = event.target
   chrome.runtime.sendMessage({
-    selector: selector,
-    baseURI: baseURI
+    type: 'contextMenuOpened',
+    baseURI: getCurrentURL()
   })
 }, true)
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  const action = typeof msg === 'string' ? msg : msg.type
+  switch (action) {
+    case 'getTargetSelector': {
+      sendResponse(unique(target))
+    }
+  }
+})