From ebb88d905b53ed618b3b478b8653bec063b7e709 Mon Sep 17 00:00:00 2001 From: Snuupy Date: Tue, 23 Jul 2019 16:29:22 -0700 Subject: [PATCH 1/2] stylesheet injection for cosmetic filtering --- .../brave_extension/background/api/cosmeticFilterAPI.ts | 5 +++-- .../background/events/cosmeticFilterEvents.ts | 3 ++- .../background/api/cosmeticFilterAPI_test.ts | 9 ++++++--- .../background/events/cosmeticFilterEvents_test.ts | 3 ++- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts b/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts index 30dfd653893d..acc8095c7a21 100644 --- a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts +++ b/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts @@ -31,8 +31,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({ // https://github.com/brave/brave-browser/wiki/Cosmetic-Filtering + code: `${rule} {display: none !important;}`, + cssOrigin: 'user', runAt: 'document_start' }) }) diff --git a/components/brave_extension/extension/brave_extension/background/events/cosmeticFilterEvents.ts b/components/brave_extension/extension/brave_extension/background/events/cosmeticFilterEvents.ts index 3a2501c6c653..817c6b25ea2c 100644 --- a/components/brave_extension/extension/brave_extension/background/events/cosmeticFilterEvents.ts +++ b/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) } diff --git a/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts b/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts index 0395119d1056..9709e74b4673 100644 --- a/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts +++ b/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts @@ -208,7 +208,8 @@ describe('cosmeticFilterTestSuite', () => { }) cosmeticFilterAPI.applySiteFilters('brave.com') expect(insertCSSStub.getCall(0).args[0]).toEqual({ - code: `${ filter } {display: none;}`, + code: `${ filter } {display: none !important;}`, + cssOrigin: 'user', runAt: 'document_start' }) }) @@ -220,11 +221,13 @@ describe('cosmeticFilterTestSuite', () => { }) cosmeticFilterAPI.applySiteFilters('brave.com') expect(insertCSSStub.getCall(0).args[0]).toEqual({ - code: `${ filter } {display: none;}`, + code: `${filter } {display: none !important;}`, + cssOrigin: 'user', runAt: 'document_start' }) expect(insertCSSStub.getCall(1).args[0]).toEqual({ - code: `${ filter2 } {display: none;}`, + code: `${ filter2 } {display: none !important;}`, + cssOrigin: 'user', runAt: 'document_start' }) diff --git a/components/test/brave_extension/background/events/cosmeticFilterEvents_test.ts b/components/test/brave_extension/background/events/cosmeticFilterEvents_test.ts index c8817dde7715..3ab864a007ce 100644 --- a/components/test/brave_extension/background/events/cosmeticFilterEvents_test.ts +++ b/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) }) From 12b0a02026f6bbc9003a71123edf8373b393bd55 Mon Sep 17 00:00:00 2001 From: Snuupy Date: Wed, 31 Jul 2019 17:15:29 -0700 Subject: [PATCH 2/2] fix cosmetic filter application on background loading --- .../background/api/cosmeticFilterAPI.ts | 8 ++++++-- .../reducers/cosmeticFilterReducer.ts | 4 ++-- .../background/api/cosmeticFilterAPI_test.ts | 19 +++++++++++-------- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts b/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts index acc8095c7a21..936e1453efe6 100644 --- a/components/brave_extension/extension/brave_extension/background/api/cosmeticFilterAPI.ts +++ b/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' diff --git a/components/brave_extension/extension/brave_extension/background/reducers/cosmeticFilterReducer.ts b/components/brave_extension/extension/brave_extension/background/reducers/cosmeticFilterReducer.ts index 9a85b7ba3550..f42ae60cd981 100644 --- a/components/brave_extension/extension/brave_extension/background/reducers/cosmeticFilterReducer.ts +++ b/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: { diff --git a/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts b/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts index 9709e74b4673..3f865af33042 100644 --- a/components/test/brave_extension/background/api/cosmeticFilterAPI_test.ts +++ b/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) }) })