refactor(browser-extension): update to manifest version 3
This commit is contained in:
wanhose
parent
f70d95fd7d
commit
41d0442600
@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"manifest_version": 3,
|
||||
"name": "Cookie Dialog Monster",
|
||||
"version": "5.5.7",
|
||||
"version": "6.0.0",
|
||||
"default_locale": "en",
|
||||
"description": "__MSG_appDesc__",
|
||||
"icons": {
|
||||
@ -9,13 +9,13 @@
|
||||
"48": "assets/icons/48.png",
|
||||
"128": "assets/icons/128.png"
|
||||
},
|
||||
"browser_action": {
|
||||
"action": {
|
||||
"default_icon": "assets/icons/disabled.png",
|
||||
"default_title": "Cookie Dialog Monster"
|
||||
},
|
||||
"author": "wanhose",
|
||||
"background": {
|
||||
"scripts": ["scripts/background.js"]
|
||||
"service_worker": "scripts/background.js"
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
@ -32,6 +32,6 @@
|
||||
"run_at": "document_start"
|
||||
}
|
||||
],
|
||||
"permissions": ["contextMenus", "http://*/*", "https://*/*", "storage", "tabs"],
|
||||
"web_accessible_resources": ["assets/fonts/*", "scripts/popup.js", "styles/*"]
|
||||
"host_permissions": ["http://*/*", "https://*/*"],
|
||||
"permissions": ["contextMenus", "storage", "tabs"]
|
||||
}
|
||||
|
||||
@ -10,25 +10,6 @@
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<main>
|
||||
<label class="switch-label">
|
||||
|
||||
@ -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) => {
|
||||
@ -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
|
||||
*/
|
||||
@ -92,13 +73,13 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
|
||||
|
||||
switch (message.type) {
|
||||
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;
|
||||
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;
|
||||
case 'ENABLE_POPUP':
|
||||
if (tabId) chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
|
||||
if (tabId) chrome.action.setPopup({ popup: '/popup.html', tabId });
|
||||
break;
|
||||
case 'GET_DATA':
|
||||
chrome.storage.local.get('data', ({ data }) => {
|
||||
@ -122,3 +103,24 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
@ -119,33 +119,36 @@ const observer = new MutationObserver((mutations) => {
|
||||
});
|
||||
|
||||
/**
|
||||
* @async
|
||||
* @description Fixes bfcache issues
|
||||
* @listens window#pageshow
|
||||
*/
|
||||
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
window.addEventListener('pageshow', async (event) => {
|
||||
if (event.persisted) {
|
||||
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
|
||||
if (data?.elements.length && state?.enabled && !preview) {
|
||||
fix();
|
||||
clean(Array.from(document.querySelectorAll(data.elements)), true);
|
||||
}
|
||||
});
|
||||
const state = dispatch({ hostname, type: 'GET_STATE' });
|
||||
|
||||
if (data?.elements?.length && state?.enabled && !preview) {
|
||||
const nodes = [...document.querySelectorAll(data.elements)];
|
||||
|
||||
fix();
|
||||
if (nodes.length) clean(nodes, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @async
|
||||
* @description Sets up everything
|
||||
*/
|
||||
|
||||
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
|
||||
(async () => {
|
||||
const state = await dispatch({ hostname, type: 'GET_STATE' });
|
||||
dispatch({ type: 'ENABLE_POPUP' });
|
||||
|
||||
if (state?.enabled) {
|
||||
dispatch({ hostname, type: 'GET_DATA' }, null, (result) => {
|
||||
data = result;
|
||||
observer.observe(document.body ?? document.documentElement, options);
|
||||
dispatch({ type: 'ENABLE_ICON' });
|
||||
});
|
||||
data = await dispatch({ hostname, type: 'GET_DATA' });
|
||||
observer.observe(document.body ?? document.documentElement, options);
|
||||
dispatch({ type: 'ENABLE_ICON' });
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
@ -59,10 +59,10 @@ const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
|
||||
*/
|
||||
|
||||
const handlePowerChange = async () => {
|
||||
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
|
||||
dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' });
|
||||
chrome.tabs.reload({ bypassCache: true });
|
||||
});
|
||||
const state = await dispatch({ hostname, type: 'GET_STATE' });
|
||||
|
||||
dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' });
|
||||
chrome.tabs.reload({ bypassCache: true });
|
||||
};
|
||||
|
||||
/**
|
||||
@ -89,37 +89,35 @@ const handleRate = (event) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* @async
|
||||
* @description Setup stars handlers and result message links
|
||||
*/
|
||||
|
||||
const handleContentLoaded = () => {
|
||||
dispatch({ type: 'GET_TAB' }, null, (tab) => {
|
||||
hostname = tab?.url
|
||||
? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
|
||||
: undefined;
|
||||
const handleContentLoaded = async () => {
|
||||
const state = await dispatch({ hostname, type: 'GET_STATE' });
|
||||
const tab = await dispatch({ type: 'GET_TAB' });
|
||||
|
||||
dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
|
||||
translate();
|
||||
hostname = tab?.url
|
||||
? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
|
||||
: undefined;
|
||||
|
||||
const host = document.getElementById('host');
|
||||
const like = document.getElementById('like');
|
||||
const power = document.getElementById('power');
|
||||
const reload = document.getElementById('reload');
|
||||
const store = document.getElementById('store');
|
||||
const unlike = document.getElementById('unlike');
|
||||
translate();
|
||||
|
||||
like.addEventListener('click', handleRate);
|
||||
power.addEventListener('change', handlePowerChange);
|
||||
reload.addEventListener('click', () => chrome.tabs.reload({ bypassCache: true }));
|
||||
unlike.addEventListener('click', handleRate);
|
||||
const host = document.getElementById('host');
|
||||
const like = document.getElementById('like');
|
||||
const power = document.getElementById('power');
|
||||
const store = document.getElementById('store');
|
||||
const unlike = document.getElementById('unlike');
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
like.addEventListener('click', handleRate);
|
||||
power.addEventListener('change', handlePowerChange);
|
||||
unlike.addEventListener('click', handleRate);
|
||||
|
||||
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');
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
#report-confirmation {
|
||||
bottom: 30px;
|
||||
bottom: 30px !important;
|
||||
font-family: 'Lato', Arial, Helvetica, sans-serif !important;
|
||||
min-width: 250px;
|
||||
min-width: 250px !important;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
z-index: 99999;
|
||||
right: 10px !important;
|
||||
text-align: left !important;
|
||||
visibility: hidden !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#report-confirmation:not([hidden]) #report-confirmation-bar {
|
||||
animation: roundTime 3.5s linear forwards;
|
||||
animation: roundTime 3.5s linear forwards !important;
|
||||
}
|
||||
|
||||
#report-confirmation-content {
|
||||
align-items: center;
|
||||
align-items: center !important;
|
||||
background-color: #34495e !important;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px !important;
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
font-size: 14px !important;
|
||||
gap: 16px;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
gap: 16px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
#report-confirmation-bar {
|
||||
background-color: #3dd9eb !important;
|
||||
height: 4px;
|
||||
transform-origin: left center;
|
||||
height: 4px !important;
|
||||
transform-origin: left center !important;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user