diff --git a/packages/api/src/routes/v3/data.ts b/packages/api/src/routes/v3/data.ts index c792820..9a48108 100644 --- a/packages/api/src/routes/v3/data.ts +++ b/packages/api/src/routes/v3/data.ts @@ -17,7 +17,10 @@ export default (server: FastifyInstance, _options: RouteShorthandOptions, done: success: true, }); } catch (error) { - reply.send({ success: false }); + reply.send({ + errors: [error.message], + success: false, + }); } }); diff --git a/packages/api/src/routes/v4/data.ts b/packages/api/src/routes/v4/data.ts index 91cd752..a03acff 100644 --- a/packages/api/src/routes/v4/data.ts +++ b/packages/api/src/routes/v4/data.ts @@ -13,7 +13,10 @@ export default (server: FastifyInstance, _options: RouteShorthandOptions, done: reply.send({ data: result, success: true }); } catch (error) { - reply.send({ success: false }); + reply.send({ + errors: [error.message], + success: false, + }); } }); diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index ec487eb..7e8316b 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -108,7 +108,44 @@ - + + + + + diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 9b1f817..c94fbf9 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/packages/browser-extension/src/scripts/background.js @@ -68,7 +68,7 @@ const report = async (message, tab, callback) => { const userAgent = message.userAgent; const version = browser.runtime.getManifest().version; const body = JSON.stringify({ reason, url: tab.url, userAgent, version }); - const headers = { 'Content-type': 'application/json' }; + const headers = { 'Cache-Control': 'no-cache', 'Content-type': 'application/json' }; const url = `${apiUrl}/report/`; const response = await fetch(url, { body, headers, method: 'POST' }); diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index 7569d7e..48c3df6 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -1,11 +1,19 @@ /** * @typedef {Object} ExtensionData * @property {string[] | undefined} commonWords - * @property {string[] | undefined} fixes + * @property {Fix[] | undefined} fixes * @property {{ domains: string[] | undefined, tags: string[] | undefined } | undefined} skips * @property {{ classes: string[] | undefined, selectors: string[] | undefined } | undefined} tokens */ +/** + * @typedef {Object} Fix + * @property {string} action + * @property {string} domain + * @property {string | undefined} property + * @property {string} selector + */ + /** * @typedef {Object} RunParams * @property {boolean | undefined} skipTriggerEvent @@ -275,9 +283,9 @@ function fix() { document.getElementsByTagName('ion-router-outlet')[0]?.removeAttribute('inert'); for (const fix of fixes) { - const [match, selector, action, property] = fix.split('##'); + const { action, domain, property, selector } = fix; - if (hostname.includes(match)) { + if (hostname.includes(domain)) { switch (action) { case 'click': { const element = document.querySelector(selector); diff --git a/packages/browser-extension/src/scripts/popup.js b/packages/browser-extension/src/scripts/popup.js index 2128dee..321d805 100644 --- a/packages/browser-extension/src/scripts/popup.js +++ b/packages/browser-extension/src/scripts/popup.js @@ -63,7 +63,6 @@ async function handleContentLoaded() { ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '') : undefined; - const data = await browser.runtime.sendMessage({ hostname, type: 'GET_DATA' }); const next = await browser.runtime.sendMessage({ hostname, type: 'GET_HOSTNAME_STATE' }); state = { ...(next ?? state), tabId: tab?.id }; @@ -73,9 +72,8 @@ async function handleContentLoaded() { const contributeButtonElement = document.getElementById('contribute-option'); contributeButtonElement?.addEventListener('click', handleLinkRedirect); - const databaseVersionElement = document.getElementById('database-version'); - if (data.version) databaseVersionElement.innerText = data.version; - else databaseVersionElement.style.setProperty('display', 'none'); + const databaseRefreshButtonElement = document.getElementById('refresh-database-button'); + databaseRefreshButtonElement?.addEventListener('click', handleDatabaseRefresh); const extensionVersionElement = document.getElementById('extension-version'); extensionVersionElement.innerText = browser.runtime.getManifest().version; @@ -98,6 +96,34 @@ async function handleContentLoaded() { settingsButtonElement.addEventListener('click', handleSettingsClick); translate(); + updateDatabaseVersion(); +} + +/** + * @async + * @description Refresh the database + * @param {MouseEvent} event + */ +async function handleDatabaseRefresh(event) { + const target = event.currentTarget; + const checkIcon = target.querySelector('#refresh-database-check'); + const spinnerIcon = target.querySelector('#refresh-database-spinner'); + + target.setAttribute('data-refreshing', 'true'); + target.setAttribute('disabled', 'true'); + await browser.runtime.sendMessage({ type: 'REFRESH_DATA' }); + checkIcon.style.setProperty('display', 'block'); + spinnerIcon.style.setProperty('display', 'none'); + target.removeAttribute('data-animation'); + target.removeAttribute('data-refreshing'); + updateDatabaseVersion(); + + window.setTimeout(() => { + checkIcon.style.setProperty('display', 'none'); + spinnerIcon.style.setProperty('display', 'block'); + target.removeAttribute('disabled'); + target.setAttribute('data-animation', 'flip'); + }, 5000); } /** @@ -160,6 +186,19 @@ function translate() { } } +/** + * @async + * @description Update the database version element + * @returns {Promise} + */ +async function updateDatabaseVersion() { + const data = await browser.runtime.sendMessage({ hostname, type: 'GET_DATA' }); + const databaseVersionElement = document.getElementById('database-version'); + + if (data.version) databaseVersionElement.innerText = data.version; + else databaseVersionElement.style.setProperty('display', 'none'); +} + /** * @description Listen to document ready * @listens document#DOMContentLoaded diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index d463138..de748ed 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -110,6 +110,31 @@ popup-data:not(:first-child) { margin-top: 4px; } +popup-data-button { + cursor: pointer; + outline: none; + transition: 0.4s; +} + +popup-data-button:disabled { + cursor: not-allowed; +} + +popup-data-button[data-animation='flip']:focus, +popup-data-button[data-animation='flip']:hover { + transform: rotate(-180deg); +} + +popup-data-button[data-refreshing='true'] { + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(-360deg); + } +} + popup-data-container { font-size: 12px; grid-column: 1 / -1; @@ -121,6 +146,10 @@ strong { font-weight: bold; } +#refresh-database-check { + display: none; +} + #power-option { color: var(--color-white); word-break: break-all;