fix cosmetic filtering (#3121)

fix cosmetic filtering

Author: petemill

components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts

@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 export const addSiteCosmeticFilter = async (origin: string, cssfilter: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     let storeList = Object.assign({}, storeData.cosmeticFilterList)
@@ -18,7 +22,7 @@ export const removeSiteFilter = (origin: string) => {
   })
 }
 
-export const applySiteFilters = (hostname: string) => {
+export const applySiteFilters = (tabId: number, hostname: string) => {
   chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
     if (!storeData.cosmeticFilterList) {
       if (process.env.NODE_ENV === 'shields_development') {
@@ -31,8 +35,9 @@ export const applySiteFilters = (hostname: string) => {
         if (process.env.NODE_ENV === 'shields_development') {
           console.log('applying rule', rule)
         }
-        chrome.tabs.insertCSS({
-          code: `${rule} {display: none;}`,
+        chrome.tabs.insertCSS(tabId, { // https://github.com/brave/brave-browser/wiki/Cosmetic-Filtering
+          code: `${rule} {display: none !important;}`,
+          cssOrigin: 'user',
           runAt: 'document_start'
         })
       })

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

@@ -86,7 +86,8 @@ export function onSelectorReturned (response: any) {
 
   if (rule.selector && rule.selector.length > 0) {
     chrome.tabs.insertCSS({
-      code: `${rule.selector} {display: none;}`
+      code: `${rule.selector} {display: none !important;}`,
+      cssOrigin: 'user'
     })
     cosmeticFilterActions.siteCosmeticFilterAdded(rule.host, rule.selector)
   }

components/brave_extension/extension/brave_extension/background/reducers/cosmeticFilterReducer.ts

@@ -27,7 +27,7 @@ import {
 // State helpers
 import * as shieldsPanelState from '../../state/shieldsPanelState'
 import * as noScriptState from '../../state/noScriptState'
-import { getOrigin } from '../../helpers/urlUtils'
+import { getOrigin, getHostname } from '../../helpers/urlUtils'
 import { areObjectsEqual } from '../../helpers/objectUtils'
 
 const focusedWindowChanged = (state: State, windowId: number): State => {
@@ -70,7 +70,7 @@ export default function cosmeticFilterReducer (
         state = shieldsPanelState.resetBlockingResources(state, action.tabId)
         state = noScriptState.resetNoScriptInfo(state, action.tabId, getOrigin(action.url))
       }
-      applySiteFilters(tabData.hostname)
+      applySiteFilters(action.tabId, getHostname(action.url))
       break
     }
     case windowTypes.WINDOW_REMOVED: {

components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts

@@ -206,9 +206,11 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': [filter]
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
-      expect(insertCSSStub.getCall(0).args[0]).toEqual({
-        code: `${ filter } {display: none;}`,
+      cosmeticFilterAPI.applySiteFilters(1, 'brave.com')
+      expect(insertCSSStub.getCall(0).args[0]).toEqual(1)
+      expect(insertCSSStub.getCall(0).args[1]).toEqual({
+        code: `${filter} {display: none !important;}`,
+        cssOrigin: 'user',
         runAt: 'document_start'
       })
     })
@@ -218,13 +220,17 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': [filter, filter2]
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
-      expect(insertCSSStub.getCall(0).args[0]).toEqual({
-        code: `${ filter } {display: none;}`,
+      cosmeticFilterAPI.applySiteFilters(1, 'brave.com')
+      expect(insertCSSStub.getCall(0).args[0]).toEqual(1)
+      expect(insertCSSStub.getCall(0).args[1]).toEqual({
+        code: `${filter } {display: none !important;}`,
+        cssOrigin: 'user',
         runAt: 'document_start'
       })
-      expect(insertCSSStub.getCall(1).args[0]).toEqual({
-        code: `${ filter2 } {display: none;}`,
+      expect(insertCSSStub.getCall(1).args[0]).toEqual(1)
+      expect(insertCSSStub.getCall(1).args[1]).toEqual({
+        code: `${ filter2 } {display: none !important;}`,
+        cssOrigin: 'user',
         runAt: 'document_start'
       })
 
@@ -234,7 +240,7 @@ describe('cosmeticFilterTestSuite', () => {
       getStorageStub.yields({
         cosmeticFilterList: {}
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
+      cosmeticFilterAPI.applySiteFilters(1, 'brave.com')
       expect(insertCSSStub.called).toBe(false)
     })
     it('doesn\'t apply filters if storage is explicitly undefined', () => {
@@ -243,7 +249,7 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': undefined
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
+      cosmeticFilterAPI.applySiteFilters(1, 'brave.com')
       expect(insertCSSStub.called).toBe(false)
     })
   })

components/test/brave_extension/background/events/cosmeticFilterEvents_test.ts

@@ -148,7 +148,8 @@ describe('cosmeticFilterEvents events', () => {
           selectorToReturn = '#test_selector'
           cosmeticFilterEvents.onSelectorReturned(selectorToReturn)
           let returnObj = {
-            'code': '#test_selector {display: none;}'
+            'code': '#test_selector {display: none !important;}',
+            'cssOrigin': 'user'
           }
           expect(insertCssSpy).toBeCalledWith(returnObj)
         })