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

feat(browser-extension): improve scripts

Browse Source
This commit is contained in:
wanhose 2022-07-20 10:27:05 +02:00
parent 314eb7b39b
commit 62b543e4d4
3 changed files with 128 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,230 +3,120 @@
* @type {string} * @type {string}
*/ */
const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v1'; const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v2';
/** /**
* @description Base data URL * @description Initial state
* @type {string}
*/
const baseDataUrl = 'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/main/data';
/**
* @description Cache data
* @type {{ attributes: string[], classes: string[], fixes: string[], selectors: string[], skips: string[] }}
*/
let cache = undefined;
/**
* @description Context menu identifier
* @type {string}
*/
const contextMenuId = 'CDM_MENU';
/**
* @description Cache initial state
* @type {{ enabled: boolean }} * @type {{ enabled: boolean }}
*/ */
const initial = { enabled: true }; const initial = { enabled: true };
/** /**
* @description Disables icon * @description Context menu identifier
* @param {string} tabId * @type {string}
*/ */
const disableIcon = (tabId) => const reportMenuItemId = 'REPORT';
chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId });
/** /**
* @description Enables icon * @description Refreshes data
* @param {string} tabId * @param {void?} callback
*/ */
const enableIcon = (tabId) => const refreshData = (callback) => {
chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId }); fetch(`${apiUrl}/data/`).then((result) => {
result.json().then(({ data }) => {
/** chrome.storage.local.set({ data });
* @description Enables popup callback(data);
* @param {string} tabId
*/
const enablePopup = (tabId) => chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
/**
* @description Retrieves store
* @param {string} hostname
* @param {void} callback
* @returns {{ enabled: boolean }}
*/
const getStore = (hostname, callback) => {
chrome.storage.local.get(null, (store) => {
callback(store[hostname] ?? initial);
});
};
/**
* @async
* @description Get all data from GitHub
* @param {void} callback
* @returns {Promise<{ attributes: string[], classes: string[], fixes: string[], selectors: string[], skips: string[] }>}
*/
const getData = async (callback) => {
if (cache) {
callback(cache);
return;
}
const data = await Promise.all([
query('classes'),
query('elements'),
query('fixes'),
query('skips'),
]);
const result = {
attributes: [
...new Set(
data[1].elements.flatMap((element) => {
const attributes = element.match(/(?<=\[)[^(){}[\]]+(?=\])/g);
return attributes?.length
? [
...attributes.flatMap((attribute) => {
return attribute ? [attribute.replace(/\".*\"|(=|\^|\*|\$)/g, '')] : [];
}),
]
: [];
})
),
],
classes: data[0].classes,
fixes: data[2].fixes,
selectors: data[1].elements,
skips: data[3].skips,
};
if (Object.keys(result).every((key) => result[key].length > 0)) cache = result;
callback(result);
};
/**
* @description Retrieves current tab information
* @param {void} [callback]
* @returns {Promise<{ id: string, location: string }>}
*/
const getTab = (callback) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
callback({
id: tab?.id,
hostname: tab ? new URL(tab.url).hostname.split('.').slice(-2).join('.') : undefined,
}); });
}); });
}; };
/** /**
* @async * @async
* @description Retrieves data from GitHub
* @param {string} key
* @returns {Promise<{ [key]: string[] }>}
*/
const query = async (key) => {
try {
const url = `${baseDataUrl}/${key}.txt`;
const response = await fetch(url);
const data = await response.text();
if (response.status !== 200) throw new Error();
return { [key]: [...new Set(data.split('\n'))] };
} catch {
return { [key]: [] };
}
};
/**
* @description Reports active tab URL * @description Reports active tab URL
* @param {chrome.tabs.Tab} tab
*/ */
const report = () => { const report = async (tab) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
const userAgent = window.navigator.userAgent;
const version = chrome.runtime.getManifest().version; const version = chrome.runtime.getManifest().version;
const body = JSON.stringify({ url: tab?.url, version });
const headers = { 'Content-type': 'application/json' };
const url = `${apiUrl}/report/`;
if (tab) { await fetch(url, { body, headers, method: 'POST' });
fetch(`${apiUrl}/report/`, { chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_CONFIRMATION' });
body: JSON.stringify({
html: `<b>Browser:</b> ${userAgent}<br/><b>Site:</b> ${tab.url}<br/><b>Version:</b> ${version}`,
to: 'hello@wanhose.dev',
subject: 'Cookie Dialog Monster Report',
}),
headers: {
'Content-type': 'application/json',
},
method: 'POST',
});
}
});
}; };
/** /**
* @description Update store * @description Listens to context menus
* @param {string} [hostname]
* @param {object} [state]
*/ */
const updateStore = (hostname, state) => { chrome.contextMenus.onClicked.addListener((info, tab) => {
chrome.storage.local.get(null, (cache) => { switch (info.menuItemId) {
const current = cache[hostname]; case reportMenuItemId:
if (tab) report(tab);
break;
default:
break;
}
});
chrome.storage.local.set({ /**
[hostname]: { * @description Listens to extension installed/updated
enabled: typeof state.enabled === 'undefined' ? current.enabled : state.enabled, */
},
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
contexts: ['all'],
documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches,
id: reportMenuItemId,
title: chrome.i18n.getMessage('contextMenuText'),
}); });
}); });
};
/**
* @description Listens to first start
*/
chrome.runtime.onStartup.addListener(() => {
refreshData();
});
/** /**
* @description Listens to messages * @description Listens to messages
*/ */
chrome.runtime.onMessage.addListener((request, sender, callback) => { chrome.runtime.onMessage.addListener((message, sender, callback) => {
const hostname = request.hostname; const hostname = message.hostname;
const state = request.state;
const tabId = sender.tab?.id; const tabId = sender.tab?.id;
switch (request.type) { switch (message.type) {
case 'DISABLE_ICON': case 'DISABLE_ICON':
if (tabId) disableIcon(tabId); if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId });
break; break;
case 'ENABLE_ICON': case 'ENABLE_ICON':
if (tabId) enableIcon(tabId); if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId });
break; break;
case 'ENABLE_POPUP': case 'ENABLE_POPUP':
if (tabId) enablePopup(tabId); if (tabId) chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
break; break;
case 'GET_DATA': case 'GET_DATA':
getData(callback); chrome.storage.local.get('data', ({ data }) => {
if (data) callback(data);
else refreshData(callback);
});
break; break;
case 'GET_STORE': case 'GET_STATE':
getStore(hostname, callback); // prettier-ignore
if (hostname) chrome.storage.local.get(hostname, (state) => callback(state[hostname] ?? initial));
break; break;
case 'GET_TAB': case 'GET_TAB':
getTab(callback); chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0]));
break; break;
case 'UPDATE_STORE': case 'UPDATE_STATE':
updateStore(hostname, state); if (hostname) chrome.storage.local.set({ [hostname]: message.state });
break; break;
default: default:
break; break;
@ -234,23 +124,3 @@ chrome.runtime.onMessage.addListener((request, sender, callback) => {
return true; return true;
}); });
/**
* @description Creates context menu
*/
chrome.contextMenus.create({
contexts: ['all'],
documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches,
id: contextMenuId,
title: chrome.i18n.getMessage('contextMenuText'),
});
/**
* @description Listens to context menus
*/
chrome.contextMenus.onClicked.addListener((info) => {
if (info.menuItemId !== contextMenuId) return;
report();
});

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

@ -1,36 +1,28 @@
/** /**
* @description Array of selectors * @description Data properties
* @type {string[]} * @type {{ classes: string[], fixes: string[], elements: string[], skips: string[] }?}
*/ */
const classes = []; let data = null;
/** /**
* @description Shortcut to send messages to background script * @description Shortcut to send messages to background script
* @type {void}
*/ */
const dispatch = chrome.runtime.sendMessage; const dispatch = chrome.runtime.sendMessage;
/** /**
* @description Array of skips to skip * @description Forbidden tags to ignore in the DOM
* @type {string[]}
*/ */
const skips = []; const forbiddenTags = ['BASE', 'BODY', 'HEAD', 'HTML', 'LINK', 'META', 'SCRIPT', 'STYLE', 'TITLE'];
/** /**
* @description Array of instructions * @description Current hostname
* @type {string[]} * @type {string}
*/ */
const fixes = []; const hostname = document.location.hostname.split('.').slice(-3).join('.').replace('www.', '');
/**
* @description Hostname
*/
const hostname = document.location.hostname.split('.').slice(-2).join('.');
/** /**
* @description Options provided to observer * @description Options provided to observer
@ -46,56 +38,43 @@ const options = { childList: true, subtree: true };
const preview = hostname.startsWith('consent.') || hostname.startsWith('myprivacy.'); const preview = hostname.startsWith('consent.') || hostname.startsWith('myprivacy.');
/** /**
* @description Selectors list * @description Matches if node element is removable
* @type {string[]} * @param {Element} node
*/
const selectors = [];
/**
* @description Target provided to observer
*/
const target = document.body || document.documentElement;
/**
* @description Checks if node element is removable
* @param {any} node
* @param {boolean} skipMatch
* @returns {boolean} * @returns {boolean}
*/ */
const check = (node, skipMatch) => const match = (node) =>
node instanceof HTMLElement && node instanceof HTMLElement &&
node.parentElement && node.parentElement &&
!['BODY', 'HTML'].includes(node.tagName) && !forbiddenTags.includes(node.tagName?.toUpperCase?.()) &&
!(node.id && ['APP', 'ROOT'].includes(node.id.toUpperCase?.())) && node.matches(data?.elements ?? []);
(skipMatch || node.matches(selectors));
/** /**
* @description Cleans DOM * @description Cleans DOM
* @param {HTMLElement[]} nodes * @param {HTMLElement[]} nodes
* @param {boolean} skipMatch * @param {boolean?} skipMatch
* @returns {void} * @returns {void}
*/ */
const clean = (nodes, skipMatch) => const clean = (nodes, skipMatch) =>
nodes.filter((node) => check(node, skipMatch)).forEach((node) => (node.outerHTML = '')); nodes.filter((node) => skipMatch || match(node)).forEach((node) => node.remove());
/** /**
* @description Fixes scroll issues * @description Fixes scroll issues
*/ */
const fix = () => { const fix = () => {
if (skips.length && !skips.includes(hostname)) { document.getElementsByClassName('_31e')[0]?.classList.remove('_31e');
if (data?.skips.length && !data.skips.includes(hostname)) {
for (const item of [document.body, document.documentElement]) { for (const item of [document.body, document.documentElement]) {
item?.classList.remove(...classes); item?.classList.remove(...(data?.classes ?? []));
item?.style.setProperty('position', 'initial', 'important'); item?.style.setProperty('position', 'initial', 'important');
item?.style.setProperty('overflow-y', 'initial', 'important'); item?.style.setProperty('overflow-y', 'initial', 'important');
} }
} }
for (const fix of fixes) { for (const fix of data?.fixes ?? []) {
const [match, selector, action, property] = fix.split('##'); const [match, selector, action, property] = fix.split('##');
if (hostname.includes(match)) { if (hostname.includes(match)) {
@ -132,54 +111,40 @@ const fix = () => {
* @type {MutationObserver} * @type {MutationObserver}
*/ */
const observer = new MutationObserver((mutations, instance) => { const observer = new MutationObserver((mutations) => {
const nodes = mutations.map((mutation) => Array.from(mutation.addedNodes)).flat(); const nodes = mutations.map((mutation) => Array.from(mutation.addedNodes)).flat();
instance.disconnect();
fix(); fix();
if (!preview && selectors.length) clean(nodes); if (data?.elements.length && !preview) clean(nodes);
instance.observe(target, options);
}); });
/** /**
* @description Cleans DOM again after all * @description Fixes bfcache issues
* @listens document#readystatechange * @listens window#pageshow
*/ */
document.addEventListener('readystatechange', () => { window.addEventListener('pageshow', (event) => {
dispatch({ hostname, type: 'GET_STORE' }, null, async ({ enabled }) => { if (event.persisted) {
if (document.readyState === 'complete' && enabled && !preview) { dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
const nodes = selectors.length ? Array.from(document.querySelectorAll(selectors)) : []; if (data?.elements.length && state?.enabled && !preview) {
fix(); fix();
clean(nodes, true); clean(Array.from(document.querySelectorAll(data.elements)), true);
setTimeout(() => clean(nodes, true), 2000);
} }
}); });
}
}); });
/** /**
* @description Fix bfcache issues * @description Sets up everything
* @listens window#unload
*/ */
window.addEventListener('unload', () => {}); dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
/**
* @description Setups everything and starts to observe if enabled
*/
dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
dispatch({ type: 'ENABLE_POPUP' }); dispatch({ type: 'ENABLE_POPUP' });
if (enabled) { if (state?.enabled) {
dispatch({ type: 'GET_DATA' }, null, (data) => { dispatch({ hostname, type: 'GET_DATA' }, null, (result) => {
classes.push(...data.classes); data = result;
fixes.push(...data.fixes); observer.observe(document.body ?? document.documentElement, options);
options.attributeFilter = data.attributes;
selectors.push(...data.selectors);
skips.push(...data.skips);
observer.observe(target, options);
dispatch({ type: 'ENABLE_ICON' }); dispatch({ type: 'ENABLE_ICON' });
}); });
} }

56
packages/browser-extension/src/scripts/popup.js
View File

@ -1,5 +1,4 @@
/** /**
* @constant chromeUrl
* @description Chrome Web Store link * @description Chrome Web Store link
* @type {string} * @type {string}
*/ */
@ -7,15 +6,12 @@
const chromeUrl = 'https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg'; const chromeUrl = 'https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg';
/** /**
* @constant dispatch
* @description Shortcut to send messages to background script * @description Shortcut to send messages to background script
* @type {void}
*/ */
const dispatch = chrome.runtime.sendMessage; const dispatch = chrome.runtime.sendMessage;
/** /**
* @constant edgeUrl
* @description Edge Add-ons link * @description Edge Add-ons link
* @type {string} * @type {string}
*/ */
@ -24,7 +20,6 @@ const edgeUrl =
'https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii'; 'https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii';
/** /**
* @constant firefoxUrl
* @description Firefox Add-ons link * @description Firefox Add-ons link
* @type {string} * @type {string}
*/ */
@ -32,7 +27,13 @@ const edgeUrl =
const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-monster/'; const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-monster/';
/** /**
* @constant isChromium * @description Current hostname
* @type {string}
*/
let hostname = '?';
/**
* @description Is current browser an instance of Chromium? * @description Is current browser an instance of Chromium?
* @type {boolean} * @type {boolean}
*/ */
@ -40,7 +41,6 @@ const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-mo
const isChromium = navigator.userAgent.indexOf('Chrome') !== -1; const isChromium = navigator.userAgent.indexOf('Chrome') !== -1;
/** /**
* @constant isEdge
* @description Is current browser an instance of Edge? * @description Is current browser an instance of Edge?
* @type {boolean} * @type {boolean}
*/ */
@ -48,7 +48,6 @@ const isChromium = navigator.userAgent.indexOf('Chrome') !== -1;
const isEdge = navigator.userAgent.indexOf('Edg') !== -1; const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
/** /**
* @constant isFirefox
* @description Is current browser an instance of Firefox? * @description Is current browser an instance of Firefox?
* @type {boolean} * @type {boolean}
*/ */
@ -59,22 +58,10 @@ const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
* @description Disables or enables extension on current page * @description Disables or enables extension on current page
*/ */
const handlePowerChange = () => { const handlePowerChange = async () => {
dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => { dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => { dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' });
dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' }); chrome.tabs.reload({ bypassCache: true });
chrome.tabs.reload(id, { bypassCache: true });
});
});
};
/**
* @description Reload current page
*/
const handleReload = () => {
dispatch({ type: 'GET_TAB' }, null, ({ id }) => {
chrome.tabs.reload(id, { bypassCache: true });
}); });
}; };
@ -106,8 +93,12 @@ const handleRate = (event) => {
*/ */
const handleContentLoaded = () => { const handleContentLoaded = () => {
dispatch({ type: 'GET_TAB' }, null, ({ hostname }) => { dispatch({ type: 'GET_TAB' }, null, (tab) => {
dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => { hostname = tab?.url
? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
: undefined;
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
translate(); translate();
const host = document.getElementById('host'); const host = document.getElementById('host');
@ -119,13 +110,14 @@ const handleContentLoaded = () => {
like.addEventListener('click', handleRate); like.addEventListener('click', handleRate);
power.addEventListener('change', handlePowerChange); power.addEventListener('change', handlePowerChange);
reload.addEventListener('click', handleReload); reload.addEventListener('click', () => chrome.tabs.reload({ bypassCache: true }));
if (isEdge) store.setAttribute('href', edgeUrl);
else if (isChromium) store.setAttribute('href', chromeUrl);
else if (isFirefox) store.setAttribute('href', firefoxUrl);
unlike.addEventListener('click', handleRate); unlike.addEventListener('click', handleRate);
if (location) host.innerText = hostname.replace('www.', '');
if (!enabled) power.removeAttribute('checked'); host.innerText = hostname ?? 'unknown';
if (isEdge) store?.setAttribute('href', edgeUrl);
else if (isChromium) store?.setAttribute('href', chromeUrl);
else if (isFirefox) store?.setAttribute('href', firefoxUrl);
if (!state.enabled) power.removeAttribute('checked');
}); });
}); });
}; };