fix cosmetic filter application on background loading

Author: Snuupy

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,7 +35,7 @@ export const applySiteFilters = (hostname: string) => {
         if (process.env.NODE_ENV === 'shields_development') {
           console.log('applying rule', rule)
         }
-        chrome.tabs.insertCSS({ // https://github.com/brave/brave-browser/wiki/Cosmetic-Filtering
+        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/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,10 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': [filter]
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
-      expect(insertCSSStub.getCall(0).args[0]).toEqual({
-        code: `${ filter } {display: none !important;}`,
+      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'
       })
@@ -219,13 +220,15 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': [filter, filter2]
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
-      expect(insertCSSStub.getCall(0).args[0]).toEqual({
+      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({
+      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'
@@ -237,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', () => {
@@ -246,7 +249,7 @@ describe('cosmeticFilterTestSuite', () => {
           'brave.com': undefined
         }
       })
-      cosmeticFilterAPI.applySiteFilters('brave.com')
+      cosmeticFilterAPI.applySiteFilters(1, 'brave.com')
       expect(insertCSSStub.called).toBe(false)
     })
   })