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

refactor(browser-extension): update to manifest version 3

Browse Source
This commit is contained in:
wanhose 2022-08-02 12:36:48 +02:00
parent f70d95fd7d
commit 41d0442600
6 changed files with 90 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
{ {
"manifest_version": 2, "manifest_version": 3,
"name": "Cookie Dialog Monster", "name": "Cookie Dialog Monster",
"version": "5.5.7", "version": "6.0.0",
"default_locale": "en", "default_locale": "en",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"icons": { "icons": {
@ -9,13 +9,13 @@
"48": "assets/icons/48.png", "48": "assets/icons/48.png",
"128": "assets/icons/128.png" "128": "assets/icons/128.png"
}, },
"browser_action": { "action": {
"default_icon": "assets/icons/disabled.png", "default_icon": "assets/icons/disabled.png",
"default_title": "Cookie Dialog Monster" "default_title": "Cookie Dialog Monster"
}, },
"author": "wanhose", "author": "wanhose",
"background": { "background": {
"scripts": ["scripts/background.js"] "service_worker": "scripts/background.js"
}, },
"content_scripts": [ "content_scripts": [
{ {
@ -32,6 +32,6 @@
"run_at": "document_start" "run_at": "document_start"
} }
], ],
"permissions": ["contextMenus", "http://*/*", "https://*/*", "storage", "tabs"], "host_permissions": ["http://*/*", "https://*/*"],
"web_accessible_resources": ["assets/fonts/*", "scripts/popup.js", "styles/*"] "permissions": ["contextMenus", "storage", "tabs"]
} }

19
packages/browser-extension/src/popup.html
View File

@ -10,25 +10,6 @@
<body> <body>
<header> <header>
<h1 class="header-title">Cookie Dialog Monster</h1> <h1 class="header-title">Cookie Dialog Monster</h1>
<div class="header-actions">
<button aria-label="Reload page" id="reload">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="23 4 23 10 17 10"></polyline>
<polyline points="1 20 1 14 7 14"></polyline>
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</svg>
</button>
</div>
</header> </header>
<main> <main>
<label class="switch-label"> <label class="switch-label">

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

@ -50,7 +50,7 @@ const report = async (tab) => {
}; };
/** /**
* @description Listens to context menus * @description Listens to context menus clicked
*/ */
chrome.contextMenus.onClicked.addListener((info, tab) => { chrome.contextMenus.onClicked.addListener((info, tab) => {
@ -63,25 +63,6 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
} }
}); });
/**
* @description Creates the context menu
*/
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
*/ */
@ -92,13 +73,13 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
switch (message.type) { switch (message.type) {
case 'DISABLE_ICON': case 'DISABLE_ICON':
if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId }); if (tabId) chrome.action.setIcon({ path: '/assets/icons/disabled.png', tabId });
break; break;
case 'ENABLE_ICON': case 'ENABLE_ICON':
if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId }); if (tabId) chrome.action.setIcon({ path: '/assets/icons/enabled.png', tabId });
break; break;
case 'ENABLE_POPUP': case 'ENABLE_POPUP':
if (tabId) chrome.browserAction.setPopup({ popup: 'popup.html', tabId }); if (tabId) chrome.action.setPopup({ popup: '/popup.html', tabId });
break; break;
case 'GET_DATA': case 'GET_DATA':
chrome.storage.local.get('data', ({ data }) => { chrome.storage.local.get('data', ({ data }) => {
@ -122,3 +103,24 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
return true; return true;
}); });
/**
* @description Listens to extension installed
*/
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();
});

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

@ -119,33 +119,36 @@ const observer = new MutationObserver((mutations) => {
}); });
/** /**
* @async
* @description Fixes bfcache issues * @description Fixes bfcache issues
* @listens window#pageshow * @listens window#pageshow
*/ */
window.addEventListener('pageshow', (event) => { window.addEventListener('pageshow', async (event) => {
if (event.persisted) { if (event.persisted) {
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => { const state = dispatch({ hostname, type: 'GET_STATE' });
if (data?.elements.length && state?.enabled && !preview) {
if (data?.elements?.length && state?.enabled && !preview) {
const nodes = [...document.querySelectorAll(data.elements)];
fix(); fix();
clean(Array.from(document.querySelectorAll(data.elements)), true); if (nodes.length) clean(nodes, true);
} }
});
} }
}); });
/** /**
* @async
* @description Sets up everything * @description Sets up everything
*/ */
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => { (async () => {
const state = await dispatch({ hostname, type: 'GET_STATE' });
dispatch({ type: 'ENABLE_POPUP' }); dispatch({ type: 'ENABLE_POPUP' });
if (state?.enabled) { if (state?.enabled) {
dispatch({ hostname, type: 'GET_DATA' }, null, (result) => { data = await dispatch({ hostname, type: 'GET_DATA' });
data = result;
observer.observe(document.body ?? document.documentElement, options); observer.observe(document.body ?? document.documentElement, options);
dispatch({ type: 'ENABLE_ICON' }); dispatch({ type: 'ENABLE_ICON' });
});
} }
}); })();

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

@ -59,10 +59,10 @@ const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
*/ */
const handlePowerChange = async () => { const handlePowerChange = async () => {
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => { const state = await dispatch({ hostname, type: 'GET_STATE' });
dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' }); dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' });
chrome.tabs.reload({ bypassCache: true }); chrome.tabs.reload({ bypassCache: true });
});
}; };
/** /**
@ -89,28 +89,28 @@ const handleRate = (event) => {
}; };
/** /**
* @async
* @description Setup stars handlers and result message links * @description Setup stars handlers and result message links
*/ */
const handleContentLoaded = () => { const handleContentLoaded = async () => {
dispatch({ type: 'GET_TAB' }, null, (tab) => { const state = await dispatch({ hostname, type: 'GET_STATE' });
const tab = await dispatch({ type: 'GET_TAB' });
hostname = tab?.url hostname = tab?.url
? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '') ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
: undefined; : undefined;
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
translate(); translate();
const host = document.getElementById('host'); const host = document.getElementById('host');
const like = document.getElementById('like'); const like = document.getElementById('like');
const power = document.getElementById('power'); const power = document.getElementById('power');
const reload = document.getElementById('reload');
const store = document.getElementById('store'); const store = document.getElementById('store');
const unlike = document.getElementById('unlike'); const unlike = document.getElementById('unlike');
like.addEventListener('click', handleRate); like.addEventListener('click', handleRate);
power.addEventListener('change', handlePowerChange); power.addEventListener('change', handlePowerChange);
reload.addEventListener('click', () => chrome.tabs.reload({ bypassCache: true }));
unlike.addEventListener('click', handleRate); unlike.addEventListener('click', handleRate);
host.innerText = hostname ?? 'unknown'; host.innerText = hostname ?? 'unknown';
@ -118,8 +118,6 @@ const handleContentLoaded = () => {
else if (isChromium) store?.setAttribute('href', chromeUrl); else if (isChromium) store?.setAttribute('href', chromeUrl);
else if (isFirefox) store?.setAttribute('href', firefoxUrl); else if (isFirefox) store?.setAttribute('href', firefoxUrl);
if (!state.enabled) power.removeAttribute('checked'); if (!state.enabled) power.removeAttribute('checked');
});
});
}; };
/** /**

32
packages/browser-extension/src/styles/snackbar.css
View File

@ -1,39 +1,39 @@
#report-confirmation { #report-confirmation {
bottom: 30px; bottom: 30px !important;
font-family: 'Lato', Arial, Helvetica, sans-serif !important; font-family: 'Lato', Arial, Helvetica, sans-serif !important;
min-width: 250px; min-width: 250px !important;
position: fixed; position: fixed;
right: 10px; right: 10px !important;
text-align: left; text-align: left !important;
visibility: hidden; visibility: hidden !important;
z-index: 99999; z-index: 99999 !important;
} }
#report-confirmation:not([hidden]) { #report-confirmation:not([hidden]) {
animation: fadeIn 0.5s, fadeOut 0.5s 3.5s; animation: fadeIn 0.5s, fadeOut 0.5s 3.5s !important;
visibility: visible !important; visibility: visible !important;
} }
#report-confirmation:not([hidden]) #report-confirmation-bar { #report-confirmation:not([hidden]) #report-confirmation-bar {
animation: roundTime 3.5s linear forwards; animation: roundTime 3.5s linear forwards !important;
} }
#report-confirmation-content { #report-confirmation-content {
align-items: center; align-items: center !important;
background-color: #34495e !important; background-color: #34495e !important;
border-radius: 2px; border-radius: 2px !important;
color: #fff !important; color: #fff !important;
display: flex; display: flex !important;
font-size: 14px !important; font-size: 14px !important;
gap: 16px; gap: 16px !important;
overflow: hidden; overflow: hidden !important;
padding: 16px; padding: 16px !important;
} }
#report-confirmation-bar { #report-confirmation-bar {
background-color: #3dd9eb !important; background-color: #3dd9eb !important;
height: 4px; height: 4px !important;
transform-origin: left center; transform-origin: left center !important;
} }
@keyframes fadeIn { @keyframes fadeIn {