Merge pull request #48 from Snuupy/cosmeticFilter

Cosmetic Filter Implementation

app/actions/cosmeticFilterActions.ts

@@ -0,0 +1,27 @@
+/* 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/. */
+
+import * as types from '../constants/cosmeticFilterTypes'
+import * as actions from '../types/actions/cosmeticFilterActions'
+
+export const siteCosmeticFilterAdded: actions.SiteCosmeticFilterAdded = (origin: string, cssfilter: string) => {
+ return {
+ type: types.SITE_COSMETIC_FILTER_ADDED,
+ origin,
+ cssfilter
+ }
+}
+
+export const siteCosmeticFilterRemoved: actions.SiteCosmeticFilterRemoved = (origin: string) => {
+ return {
+ type: types.SITE_COSMETIC_FILTER_REMOVED,
+ origin
+ }
+}
+
+export const allCosmeticFiltersRemoved: actions.AllCosmeticFiltersRemoved = () => {
+ return {
+ type: types.ALL_COSMETIC_FILTERS_REMOVED
+ }
+}

app/actions/webNavigationActions.ts

@@ -13,3 +13,12 @@ export const onBeforeNavigate: actions.OnBeforeNavigate = (tabId, url, isMainFra
  isMainFrame
  }
 }
+
+export const onCommitted: actions.OnCommitted = (tabId, url, isMainFrame) => {
+ return {
+ type: types.ON_COMMITTED,
+ tabId,
+ url,
+ isMainFrame
+ }
+}

app/background/actions/cosmeticFilterActions.ts

@@ -0,0 +1,8 @@
+/* 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/. */
+
+import { bindActionCreators } from 'redux'
+import store from '../store'
+import * as cosmeticFilterActions from '../../actions/cosmeticFilterActions'
+export default bindActionCreators(cosmeticFilterActions, store.dispatch)

app/background/api/cosmeticFilterAPI.ts

@@ -0,0 +1,36 @@
+export const addSiteCosmeticFilter = async (origin: string, cssfilter: string) => {
+ chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
+ let storeList = Object.assign({}, storeData.cosmeticFilterList)
+ if (storeList[origin] === undefined || storeList[origin].length === 0) { // nothing in filter list for origin
+ storeList[origin] = [cssfilter]
+ } else { // add entry
+ storeList[origin].push(cssfilter)
+ }
+ chrome.storage.local.set({ 'cosmeticFilterList': storeList })
+ })
+}
+
+export const removeSiteFilter = (origin: string) => {
+ chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
+ let storeList = Object.assign({}, storeData.cosmeticFilterList)
+ delete storeList[origin]
+ chrome.storage.local.set({ 'cosmeticFilterList': storeList })
+ })
+}
+
+export const applySiteFilters = (hostname: string) => {
+ chrome.storage.local.get('cosmeticFilterList', (storeData = {}) => {
+ if (storeData.cosmeticFilterList[hostname] !== undefined) {
+ storeData.cosmeticFilterList[hostname].map((rule: string) => {
+ console.log('applying rule', rule)
+ chrome.tabs.insertCSS({
+ code: `${rule} {display: none;}`
+ })
+ })
+ }
+ })
+}
+
+export const removeAllFilters = () => {
+ chrome.storage.local.set({ 'cosmeticFilterList': {} })
+}

app/background/events.ts

@@ -7,3 +7,4 @@ require('./events/tabsEvents')
 require('./events/shieldsEvents')
 require('./events/runtimeEvents')
 require('./events/webNavigationEvents')
+require('./events/cosmeticFilterEvents')

app/background/events/cosmeticFilterEvents.ts

@@ -0,0 +1,70 @@
+import cosmeticFilterActions from '../actions/cosmeticFilterActions'
+
+let rule = {
+ host: '',
+ selector: ''
+}
+
+// add context menu
+chrome.runtime.onInstalled.addListener(function () {
+ // parent menu
+ chrome.contextMenus.create({
+ title: 'Brave',
+ id: 'brave',
+ contexts: ['all']
+ })
+ // block ad child menu
+ chrome.contextMenus.create({
+ title: 'Block element via selector',
+ id: 'addBlockElement',
+ parentId: 'brave',
+ contexts: ['all']
+ })
+ chrome.contextMenus.create({
+ title: 'Clear CSS rules for this site',
+ id: 'resetSiteFilterSettings',
+ parentId: 'brave',
+ contexts: ['all']
+ })
+ chrome.contextMenus.create({
+ title: 'Clear CSS rules for all sites',
+ id: 'resetAllFilterSettings',
+ parentId: 'brave',
+ contexts: ['all']
+ })
+})
+
+// contextMenu listener - when triggered, grab latest selector
+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;}`
+ })
+ cosmeticFilterActions.siteCosmeticFilterAdded(rule.host, rule.selector)
+ break
+ }
+ case 'resetSiteFilterSettings':
+ {
+ cosmeticFilterActions.siteCosmeticFilterRemoved(rule.host)
+ break
+ }
+ case 'resetAllFilterSettings':
+ {
+ cosmeticFilterActions.allCosmeticFiltersRemoved()
+ break
+ }
+ default: {
+ console.warn('[cosmeticFilterEvents] invalid context menu option: ${info.menuItemId}')
+ }
+ }
+})
+
+// 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)
+})

app/background/events/webNavigationEvents.ts

@@ -8,3 +8,8 @@ chrome.webNavigation.onBeforeNavigate.addListener(function ({ tabId, url, frameI
  const isMainFrame: boolean = frameId === 0
  actions.onBeforeNavigate(tabId, url, isMainFrame)
 })
+
+chrome.webNavigation.onCommitted.addListener(function ({ tabId, url, frameId }: chrome.webNavigation.WebNavigationTransitionCallbackDetails) {
+ const isMainFrame: boolean = frameId === 0
+ actions.onCommitted(tabId, url, isMainFrame)
+})

app/background/reducers.ts

@@ -5,7 +5,9 @@
 import { combineReducers } from 'redux'
 
 import shieldsPanelReducer from './reducers/shieldsPanelReducer'
+import cosmeticFilterReducer from './reducers/cosmeticFilterReducer'
 
 export default combineReducers({
- shieldsPanel: shieldsPanelReducer
+ shieldsPanel: shieldsPanelReducer,
+ cosmeticFilter: cosmeticFilterReducer
 })

app/background/reducers/cosmeticFilterReducer.ts

@@ -0,0 +1,153 @@
+// /* 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/. */
+
+import * as shieldsPanelTypes from '../../constants/shieldsPanelTypes'
+import * as windowTypes from '../../constants/windowTypes'
+import * as tabTypes from '../../constants/tabTypes'
+import * as webNavigationTypes from '../../constants/webNavigationTypes'
+import {
+ setAllowBraveShields,
+ requestShieldPanelData
+} from '../api/shieldsAPI'
+import { reloadTab } from '../api/tabsAPI'
+import * as shieldsPanelState from '../../state/shieldsPanelState'
+import { State, Tab } from '../../types/state/shieldsPannelState'
+import { Actions } from '../../types/actions/index'
+import * as cosmeticFilterTypes from '../../constants/cosmeticFilterTypes'
+import {
+ removeSiteFilter,
+ addSiteCosmeticFilter,
+ applySiteFilters,
+ removeAllFilters
+} from '../api/cosmeticFilterAPI'
+
+const focusedWindowChanged = (state: State, windowId: number): State => {
+ if (windowId !== -1) {
+ state = shieldsPanelState.updateFocusedWindow(state, windowId)
+ if (shieldsPanelState.getActiveTabId(state)) {
+ requestShieldPanelData(shieldsPanelState.getActiveTabId(state))
+ } else {
+ console.warn('no tab id so cannot request shield data from window focus change!')
+ }
+ }
+ return state
+}
+
+const updateActiveTab = (state: State, windowId: number, tabId: number): State => {
+ requestShieldPanelData(tabId)
+ return shieldsPanelState.updateActiveTab(state, windowId, tabId)
+}
+
+export default function cosmeticFilterReducer (state: State = {
+ tabs: {},
+ windows: {},
+ currentWindowId: -1 },
+ action: Actions) {
+ switch (action.type) {
+ case webNavigationTypes.ON_BEFORE_NAVIGATION:
+ {
+ if (action.isMainFrame) {
+ state = shieldsPanelState.resetBlockingStats(state, action.tabId)
+ state = shieldsPanelState.resetNoScriptInfo(state, action.tabId, new window.URL(action.url).origin)
+ }
+ break
+ }
+ case webNavigationTypes.ON_COMMITTED:
+ {
+ const tabData: Tab = shieldsPanelState.getActiveTabData(state)
+ applySiteFilters(tabData.hostname)
+ break
+ }
+ case windowTypes.WINDOW_REMOVED:
+ {
+ state = shieldsPanelState.removeWindowInfo(state, action.windowId)
+ break
+ }
+ case windowTypes.WINDOW_CREATED:
+ {
+ if (action.window.focused || Object.keys(state.windows).length === 0) {
+ state = focusedWindowChanged(state, action.window.id)
+ }
+ break
+ }
+ case windowTypes.WINDOW_FOCUS_CHANGED:
+ {
+ state = focusedWindowChanged(state, action.windowId)
+ break
+ }
+ case tabTypes.ACTIVE_TAB_CHANGED:
+ {
+ const windowId: number = action.windowId
+ const tabId: number = action.tabId
+ state = updateActiveTab(state, windowId, tabId)
+ break
+ }
+ case tabTypes.TAB_DATA_CHANGED:
+ {
+ const tab: chrome.tabs.Tab = action.tab
+ if (tab.active && tab.id) {
+ state = updateActiveTab(state, tab.windowId, tab.id)
+ }
+ break
+ }
+ case tabTypes.TAB_CREATED:
+ {
+ const tab: chrome.tabs.Tab = action.tab
+ if (!tab) {
+ break
+ }
+
+ if (tab.active && tab.id) {
+ state = updateActiveTab(state, tab.windowId, tab.id)
+ }
+ break
+ }
+ case shieldsPanelTypes.SHIELDS_PANEL_DATA_UPDATED:
+ {
+ state = shieldsPanelState.updateTabShieldsData(state, action.details.id, action.details)
+ break
+ }
+ case shieldsPanelTypes.SHIELDS_TOGGLED:
+ {
+ const tabId: number = shieldsPanelState.getActiveTabId(state)
+ const tabData: Tab = shieldsPanelState.getActiveTabData(state)
+ if (!tabData) {
+ break
+ }
+ setAllowBraveShields(tabData.origin, action.setting)
+ .then(() => {
+ reloadTab(tabId, true).catch((e) => {
+ console.error('Tab reload was not successful', e)
+ })
+ requestShieldPanelData(shieldsPanelState.getActiveTabId(state))
+ })
+ .catch((e: any) => {
+ console.error('Could not set shields', e)
+ })
+ state = shieldsPanelState
+ .updateTabShieldsData(state, tabId, { braveShields: action.setting })
+ break
+ }
+ case cosmeticFilterTypes.SITE_COSMETIC_FILTER_REMOVED:
+ {
+ let url = action.origin
+ removeSiteFilter(url)
+ break
+ }
+ case cosmeticFilterTypes.ALL_COSMETIC_FILTERS_REMOVED:
+ {
+ removeAllFilters()
+ break
+ }
+ case cosmeticFilterTypes.SITE_COSMETIC_FILTER_ADDED:
+ {
+ addSiteCosmeticFilter(action.origin, action.cssfilter)
+ .catch((e) => {
+ console.error('Could not add filter:', e)
+ })
+ break
+ }
+ }
+ return state
+}

app/constants/cosmeticFilterTypes.ts

@@ -0,0 +1,8 @@
+/* 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 SITE_COSMETIC_FILTER_REMOVED = 'SITE_COSMETIC_FILTER_REMOVED'
+export const SITE_COSMETIC_FILTER_ADDED = 'SITE_COSMETIC_FILTER_ADDED'
+export const LOGGED_STORAGE = 'LOGGED_STORAGE'
+export const ALL_COSMETIC_FILTERS_REMOVED = 'ALL_COSMETIC_FILTERS_REMOVED'

app/constants/webNavigationTypes.ts

@@ -3,3 +3,4 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export const ON_BEFORE_NAVIGATION = 'ON_BEFORE_NAVIGATION'
+export const ON_COMMITTED = 'ON_COMMITTED'

app/content.ts

@@ -0,0 +1,15 @@
+const unique = require('unique-selector').default
+
+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()
+ console.log(selector, baseURI)
+ chrome.runtime.sendMessage({
+ selector: selector,
+ baseURI: baseURI
+ })
+}, true)

app/manifest.dev.json

@@ -18,7 +18,20 @@
  "background": {
  "page": "background.html"
  },
- "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation" ],
+ "content_scripts": [
+ {
+ "matches": [
+ "http://*/*",
+ "https://*/*"
+ ],
+ "js": [
+ "js/content.bundle.js"
+ ],
+ "run_at": "document_start",
+ "all_frames": true
+ }
+ ],
+ "permissions": [ "contentSettings", "management", "tabs", "storage", "webNavigation", "contextMenus", "*://*/*" ],
  "content_security_policy": "default-src 'self'; script-src 'self' http://localhost:3000 https://localhost:3000 'unsafe-eval'; connect-src http://localhost:3000 https://localhost:3000; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:;",
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAupOLMy5Fd4dCSOtjcApsAQOnuBdTs+OvBVt/3P93noIrf068x0xXkvxbn+fpigcqfNamiJ5CjGyfx9zAIs7zcHwbxjOw0Uih4SllfgtK+svNTeE0r5atMWE0xR489BvsqNuPSxYJUmW28JqhaSZ4SabYrRx114KcU6ko7hkjyPkjQa3P+chStJjIKYgu5tWBiMJp5QVLelKoM+xkY6S7efvJ8AfajxCViLGyDQPDviGr2D0VvIBob0D1ZmAoTvYOWafcNCaqaejPDybFtuLFX3pZBqfyOCyyzGhucyCmfBXJALKbhjRAqN5glNsUmGhhPK87TuGATQfVuZtenMvXMQIDAQAB"
 }