wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

Merge pull request #39 from wanhose/5.5.0

Browse Source 
5.5.0
This commit is contained in:
wanhose 2022-05-06 13:25:06 +02:00 committed by GitHub
commit 9f216474ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 106 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/browser-extension/src/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Cookie Dialog Monster", "name": "Cookie Dialog Monster",
"version": "5.4.6", "version": "5.5.0",
"default_locale": "en", "default_locale": "en",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"icons": { "icons": {
@ -31,12 +31,6 @@
"run_at": "document_start" "run_at": "document_start"
} }
], ],
"permissions": [ "permissions": ["contextMenus", "http://*/*", "https://*/*", "storage", "tabs"],
"contextMenus",
"http://*/*",
"https://*/*",
"storage",
"tabs"
],
"web_accessible_resources": ["assets/fonts/*", "scripts/popup.js", "styles/*"] "web_accessible_resources": ["assets/fonts/*", "scripts/popup.js", "styles/*"]
} }

171
packages/browser-extension/src/scripts/background.js
View File

@ -1,5 +1,13 @@
/**
* @description Base data URL
* @type {string}
*/
const baseDataUrl = 'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/main/data';
/** /**
* @description Context menu identifier * @description Context menu identifier
* @type {string}
*/ */
const contextMenuId = 'CDM_MENU'; const contextMenuId = 'CDM_MENU';
@ -9,150 +17,63 @@ const contextMenuId = 'CDM_MENU';
* @type {{ enabled: boolean }} * @type {{ enabled: boolean }}
*/ */
const initial = { const initial = { enabled: true };
enabled: true,
};
/**
* @description Check cache validity
* @param {object} [cache]
*/
const check = (cache) => typeof cache.enabled === 'boolean';
/** /**
* @description Disables icon * @description Disables icon
* @param {string} [tabId] * @param {string} tabId
*/ */
const disableIcon = (tabId) => { const disableIcon = (tabId) =>
chrome.browserAction.setIcon({ chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId });
path: 'assets/icons/disabled.png',
tabId,
});
};
/**
* @description Disables popup
* @param {string} [tabId]
*/
const disablePopup = (tabId) => {
chrome.browserAction.setPopup({
popup: '',
tabId,
});
};
/** /**
* @description Enables icon * @description Enables icon
* @param {string} [tabId] * @param {string} tabId
*/ */
const enableIcon = (tabId) => { const enableIcon = (tabId) =>
chrome.browserAction.setIcon({ chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId });
path: 'assets/icons/enabled.png',
tabId,
});
};
/** /**
* @description Enables popup * @description Enables popup
* @param {string} [tabId] * @param {string} tabId
*/ */
const enablePopup = (tabId) => { const enablePopup = (tabId) => chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
chrome.browserAction.setPopup({
popup: 'popup.html',
tabId,
});
};
/** /**
* @description Retrieves cache state * @description Retrieves cache state
* @param {string} [hostname] * @param {string} hostname
* @param {void} [callback] * @param {void} callback
* @returns {Promise<{ enabled: boolean }>} * @returns {Promise<{ enabled: boolean }>}
*/ */
const getCache = (hostname, callback) => { const getCache = (hostname, callback) => {
chrome.storage.local.get(null, (store) => { chrome.storage.local.get(null, (store) => {
try { callback(store[hostname] ?? initial);
const cache = store[hostname];
if (!check(cache)) throw new Error();
callback(cache);
} catch {
chrome.storage.local.set({ [hostname]: initial });
callback(initial);
}
}); });
}; };
/** /**
* @async * @async
* @description Retrieves a selectors list * @description Retrieves data from GitHub
* @param {void} [callback] * @param {string} key
* @returns {Promise<{ classes: string[] }>} * @param {void} callback
* @returns {Promise<{ any: string[] }>}
*/ */
const getClasses = async (callback) => { const query = async (key, callback) => {
try { try {
const url = const url = `${baseDataUrl}/${key}.txt`;
'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/master/data/classes.txt';
const response = await fetch(url); const response = await fetch(url);
const data = await response.text(); const data = await response.text();
if (response.status !== 200) throw new Error(); if (response.status !== 200) throw new Error();
callback({ classes: data.split('\n') }); callback({ [key]: data.split('\n') });
} catch { } catch {
callback({ classes: [] }); callback({ [key]: [] });
}
};
/**
* @async
* @description Retrieves a selectors list
* @param {void} [callback]
* @returns {Promise<{ classes: string[] }>}
*/
const getFixes = async (callback) => {
try {
const url =
'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/master/data/fixes.txt';
const response = await fetch(url);
const data = await response.text();
if (response.status !== 200) throw new Error();
callback({ fixes: data.split('\n') });
} catch {
callback({ fixes: [] });
}
};
/**
* @async
* @description Retrieves a selectors list
* @param {void} [callback]
* @returns {Promise<{ selectors: string }>}
*/
const getSelectors = async (callback) => {
try {
const url =
'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/master/data/elements.txt';
const response = await fetch(url);
const data = await response.text();
if (response.status !== 200) throw new Error();
callback({ selectors: data.split('\n') });
} catch {
callback({ selectors: [] });
} }
}; };
@ -162,7 +83,7 @@ const getSelectors = async (callback) => {
* @returns {Promise<{ id: string, location: string }>} * @returns {Promise<{ id: string, location: string }>}
*/ */
const getTab = (callback) => { const queryTab = (callback) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
callback({ callback({
id: tabs[0].id, id: tabs[0].id,
@ -209,10 +130,7 @@ const updateCache = (hostname, state) => {
chrome.storage.local.set({ chrome.storage.local.set({
[hostname]: { [hostname]: {
enabled: enabled: typeof state.enabled === 'undefined' ? current.enabled : state.enabled,
typeof state.enabled === 'undefined'
? current.enabled
: state.enabled,
}, },
}); });
}); });
@ -223,39 +141,40 @@ const updateCache = (hostname, state) => {
*/ */
chrome.runtime.onMessage.addListener((request, sender, callback) => { chrome.runtime.onMessage.addListener((request, sender, callback) => {
const hasPermission = !sender.frameId || sender.frameId === 0; const hostname = request.hostname;
let tabId = sender.tab ? sender.tab.id : undefined; const state = request.state;
const tabId = sender.tab?.id;
switch (request.type) { switch (request.type) {
case 'DISABLE_ICON': case 'DISABLE_ICON':
if (hasPermission && tabId) disableIcon(tabId); if (tabId) disableIcon(tabId);
break;
case 'DISABLE_POPUP':
if (hasPermission && tabId) disablePopup(tabId);
break; break;
case 'ENABLE_ICON': case 'ENABLE_ICON':
if (hasPermission && tabId) enableIcon(tabId); if (tabId) enableIcon(tabId);
break; break;
case 'ENABLE_POPUP': case 'ENABLE_POPUP':
if (hasPermission && tabId) enablePopup(tabId); if (tabId) enablePopup(tabId);
break; break;
case 'GET_CACHE': case 'GET_CACHE':
getCache(request.hostname, callback); getCache(hostname, callback);
break; break;
case 'GET_CLASSES': case 'GET_CLASSES':
getClasses(callback); query('classes', callback);
break;
case 'GET_SKIPS':
query('skips', callback);
break; break;
case 'GET_FIXES': case 'GET_FIXES':
getFixes(callback); query('fixes', callback);
break; break;
case 'GET_SELECTORS': case 'GET_SELECTORS':
getSelectors(callback); query('elements', callback);
break; break;
case 'GET_TAB': case 'GET_TAB':
getTab(callback); queryTab(callback);
break; break;
case 'UPDATE_CACHE': case 'UPDATE_CACHE':
updateCache(request.hostname, request.state); updateCache(hostname, state);
break; break;
default: default:
break; break;

130
packages/browser-extension/src/scripts/content.js
View File

@ -3,7 +3,7 @@
* @type {string[]} * @type {string[]}
*/ */
let classes = []; const classes = [];
/** /**
* @description Shortcut to send messages to background script * @description Shortcut to send messages to background script
@ -12,12 +12,19 @@ let classes = [];
const dispatch = chrome.runtime.sendMessage; const dispatch = chrome.runtime.sendMessage;
/**
* @description Array of skips to skip
* @type {string[]}
*/
const skips = [];
/** /**
* @description Array of instructions * @description Array of instructions
* @type {string[]} * @type {string[]}
*/ */
let fixes = []; const fixes = [];
/** /**
* @description Hostname * @description Hostname
@ -29,8 +36,7 @@ const hostname = document.location.hostname;
* @description Is consent preview page? * @description Is consent preview page?
*/ */
const isPreview = const preview = hostname.startsWith('consent.') || hostname.startsWith('myprivacy.');
hostname.startsWith('consent.') || hostname.startsWith('myprivacy.');
/** /**
* @description Options provided to observer * @description Options provided to observer
@ -43,7 +49,7 @@ const options = { childList: true, subtree: true };
* @type {string[]} * @type {string[]}
*/ */
let selectors = []; const selectors = [];
/** /**
* @description Target provided to observer * @description Target provided to observer
@ -53,42 +59,39 @@ const target = document.body || document.documentElement;
/** /**
* @description Checks if node element is removable * @description Checks if node element is removable
* @param {Element} node * @param {any} node
* @returns {boolean}
*/ */
const check = (node) => const check = (node) =>
node instanceof HTMLElement && node instanceof HTMLElement &&
node.parentElement && node.parentElement &&
!['BODY', 'HTML'].includes(node.tagName) && !['BODY', 'HTML'].includes(node.tagName) &&
!(node.id && ['APP', 'ROOT'].includes(node.id.toUpperCase?.())); !(node.id && ['APP', 'ROOT'].includes(node.id.toUpperCase?.())) &&
node.matches(selectors);
/** /**
* @description Cleans DOM * @description Cleans DOM
* @param {HTMLElement[]} nodes
* @returns {void}
*/ */
const clean = () => { const clean = (nodes) => nodes.filter(check).forEach((node) => (node.outerHTML = ''));
if (selectors.length) {
const nodes = Array.from(document.querySelectorAll(selectors));
nodes.filter(check).forEach((node) => (node.outerHTML = ''));
}
};
/** /**
* @description Fixes scroll issues * @description Fixes scroll issues
*/ */
const fix = () => { const fix = () => {
const body = document.body; if (skips.length && !skips.includes(hostname)) {
const html = document.documentElement; for (const item of [document.body, document.documentElement]) {
item?.classList.remove(...classes);
item?.style.setProperty('position', 'initial', 'important');
item?.style.setProperty('overflow-y', 'initial', 'important');
}
}
body?.classList.remove(...classes); for (const fix of fixes) {
body?.style.setProperty('position', 'initial', 'important');
body?.style.setProperty('overflow-y', 'initial', 'important');
html?.classList.remove(...classes);
html?.style.setProperty('position', 'initial', 'important');
html?.style.setProperty('overflow-y', 'initial', 'important');
fixes.forEach((fix) => {
const [match, selector, action, property] = fix.split('##'); const [match, selector, action, property] = fix.split('##');
if (hostname.includes(match)) { if (hostname.includes(match)) {
@ -96,73 +99,56 @@ const fix = () => {
case 'click': { case 'click': {
const node = document.querySelector(selector); const node = document.querySelector(selector);
node?.click(); node?.click();
break;
} }
case 'remove': { case 'remove': {
const node = document.querySelector(selector); const node = document.querySelector(selector);
node?.style?.removeProperty(property); node?.style?.removeProperty(property);
break;
} }
case 'reset': { case 'reset': {
const node = document.querySelector(selector); const node = document.querySelector(selector);
node?.style?.setProperty(property, 'initial', 'important'); node?.style?.setProperty(property, 'initial', 'important');
break;
} }
case 'resetAll': { case 'resetAll': {
const nodes = document.querySelectorAll(selector); const nodes = document.querySelectorAll(selector);
// prettier-ignore nodes.forEach((node) => node?.style?.setProperty(property, 'initial', 'important'));
nodes.forEach((node) => node?.style?.setProperty(property, "initial", "important")); break;
} }
default: default:
break; break;
} }
} }
}); }
}; };
/**
* @description Mutation Observer instance
* @type {MutationObserver}
*/
const observer = new MutationObserver((mutations, instance) => { const observer = new MutationObserver((mutations, instance) => {
const nodes = mutations.map((mutation) => Array.from(mutation.addedNodes)).flat();
instance.disconnect(); instance.disconnect();
fix(); fix();
if (!preview) clean(nodes);
if (!isPreview) {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
const valid = check(node);
if (valid && node.matches(selectors)) node.outerHTML = '';
}
}
}
instance.observe(target, options); instance.observe(target, options);
}); });
/** /**
* @description Queries classes selectors * @description Gets data
* @returns {Promise<{ classes: string[] }>} * @returns {Promise<any[]>}
*/ */
const queryClasses = () => const promiseAll = () =>
new Promise((resolve) => { Promise.all([
dispatch({ type: 'GET_CLASSES' }, null, resolve); new Promise((resolve) => dispatch({ type: 'GET_CLASSES' }, null, resolve)),
}); new Promise((resolve) => dispatch({ type: 'GET_FIXES' }, null, resolve)),
new Promise((resolve) => dispatch({ type: 'GET_SELECTORS' }, null, resolve)),
/** new Promise((resolve) => dispatch({ type: 'GET_SKIPS' }, null, resolve)),
* @description Queries fixes instructions ]);
* @returns {Promise<{ fixes: string[] }>}
*/
const queryFixes = () =>
new Promise((resolve) => {
dispatch({ type: 'GET_FIXES' }, null, resolve);
});
/**
* @description Queries elements selectors
* @returns {Promise<{ selectors: string }>}
*/
const querySelectors = () =>
new Promise((resolve) => {
dispatch({ type: 'GET_SELECTORS' }, null, resolve);
});
/** /**
* @description Cleans DOM again after all * @description Cleans DOM again after all
@ -171,10 +157,12 @@ const querySelectors = () =>
document.addEventListener('readystatechange', () => { document.addEventListener('readystatechange', () => {
dispatch({ hostname, type: 'GET_CACHE' }, null, async ({ enabled }) => { dispatch({ hostname, type: 'GET_CACHE' }, null, async ({ enabled }) => {
if (document.readyState === 'complete' && enabled && !isPreview) { if (document.readyState === 'complete' && enabled && !preview) {
const nodes = Array.from(document.querySelectorAll(selectors));
fix(); fix();
clean(); clean(nodes);
setTimeout(clean, 2000); setTimeout(() => clean(nodes), 2000);
} }
}); });
}); });
@ -194,12 +182,12 @@ dispatch({ hostname, type: 'GET_CACHE' }, null, async ({ enabled }) => {
dispatch({ type: 'ENABLE_POPUP' }); dispatch({ type: 'ENABLE_POPUP' });
if (enabled) { if (enabled) {
const promises = [queryClasses(), queryFixes(), querySelectors()]; const results = await promiseAll();
const results = await Promise.all(promises);
classes = results[0]?.classes ?? []; classes.push(...(results[0]?.classes ?? []));
fixes = results[1]?.fixes ?? []; fixes.push(...(results[1]?.fixes ?? []));
selectors = results[2]?.selectors ?? []; selectors.push(...(results[2]?.elements ?? []));
skips.push(...(results[3]?.skips ?? []));
observer.observe(target, options); observer.observe(target, options);
dispatch({ type: 'ENABLE_ICON' }); dispatch({ type: 'ENABLE_ICON' });
} }