diff --git a/packages/api/src/routes/v2/report.ts b/packages/api/src/routes/v2/report.ts index 56f3596..44f65c2 100644 --- a/packages/api/src/routes/v2/report.ts +++ b/packages/api/src/routes/v2/report.ts @@ -2,7 +2,9 @@ import { FastifyInstance, RouteShorthandOptions } from 'fastify'; import { sendMail } from 'services/mailing'; type PostReportBody = { + reason?: string; url: string; + userAgent?: string; version: string; }; @@ -13,9 +15,15 @@ export default (server: FastifyInstance, options: RouteShorthandOptions, done: ( schema: { body: { properties: { + reason: { + type: 'string', + }, url: { type: 'string', }, + userAgent: { + type: 'string', + }, version: { type: 'string', }, @@ -26,8 +34,8 @@ export default (server: FastifyInstance, options: RouteShorthandOptions, done: ( }, }, async (request, reply) => { - const { url, version } = request.body; - const html = `Site: ${url}
Version: ${version}`; + const { reason = 'Unknown', url, userAgent = 'Unknown', version } = request.body; + const html = `Site: ${url}
Reason: ${reason}
User-Agent: ${userAgent}
Version: ${version}`; const subject = 'Cookie Dialog Monster Report'; const to = 'hello@wanhose.dev'; diff --git a/packages/browser-extension/src/_locales/de/messages.json b/packages/browser-extension/src/_locales/de/messages.json index 4f55111..70bca1d 100644 --- a/packages/browser-extension/src/_locales/de/messages.json +++ b/packages/browser-extension/src/_locales/de/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋", "message": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋" }, - "contextMenuText": { - "description": "Webseite melden...", + "contextMenu_reportOption": { "message": "Webseite melden..." }, "contributeText": { - "description": "Tragen Sie zu diesem Projekt bei", "message": "Tragen Sie zu diesem Projekt bei" }, "helpText": { - "description": "Hilfe oder Probleme?", "message": "Hilfe oder Probleme?" }, "negativeText": { - "description": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte kontaktieren Sie uns 😅", "message": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte kontaktieren Sie uns 😅" }, "positiveText": { - "description": "Dankeschön! Bitte bewerten Sie unsere Erweiterung hier 😍", "message": "Dankeschön! Bitte bewerten Sie unsere Erweiterung hier 😍" }, - "reportText": { - "description": "Bericht gesendet!", + "reportDialog_blankPageOption": { + "message": "Seite ist leer" + }, + "reportDialog_bodyText": { + "message": "Bitte wählen Sie unten eine Option aus" + }, + "reportDialog_cannotClickOption": { + "message": "Kann nicht klicken" + }, + "reportDialog_laggyPageOption": { + "message": "Seite ist verzögert" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Seite antwortet nicht" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Seite enthält visuelle Störungen" + }, + "reportDialog_popupShowUpOption": { + "message": "Popup ist aufgetaucht" + }, + "reportDialog_submitExtraText": { + "message": "Wir empfehlen Ihnen dringend, die Erweiterung auf dieser Website zu deaktivieren, bis wir das Problem behoben haben." + }, + "reportDialog_submitText": { "message": "Bericht gesendet!" }, "reviewText": { - "description": "Gefällt dir diese Erweiterung?", "message": "Gefällt dir diese Erweiterung?" }, "toggleText": { - "description": "Essensdialoge in ", "message": "Essensdialoge in " } } diff --git a/packages/browser-extension/src/_locales/en/messages.json b/packages/browser-extension/src/_locales/en/messages.json index f8da84a..13bf340 100644 --- a/packages/browser-extension/src/_locales/en/messages.json +++ b/packages/browser-extension/src/_locales/en/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Did someone say cookie consent dialogs? 😋", "message": "Did someone say cookie consent dialogs? 😋" }, - "contextMenuText": { - "description": "Report site...", + "contextMenu_reportOption": { "message": "Report site..." }, "contributeText": { - "description": "Contribute to this project", "message": "Contribute to this project" }, "helpText": { - "description": "Help or issues?", "message": "Help or issues?" }, "negativeText": { - "description": "Ooops! We apologize for the inconvenience, please contact us 😅", "message": "Ooops! We apologize for the inconvenience, please contact us 😅" }, "positiveText": { - "description": "Thank you! Please rate our extension here 😍", "message": "Thank you! Please rate our extension here 😍" }, - "reportText": { - "description": "Report sent!", + "reportDialog_blankPageOption": { + "message": "Page is blank" + }, + "reportDialog_bodyText": { + "message": "Please select an option below" + }, + "reportDialog_cannotClickOption": { + "message": "Cannot click" + }, + "reportDialog_laggyPageOption": { + "message": "Page is laggy" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Page is not responding" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Page contains visual glitches" + }, + "reportDialog_popupShowUpOption": { + "message": "Popup showed up" + }, + "reportDialog_submitExtraText": { + "message": "We strongly recommend you to turn off the extension in this site until we fix the issue" + }, + "reportDialog_submitText": { "message": "Report sent!" }, "reviewText": { - "description": "Do you like this extension?", "message": "Do you like this extension?" }, "toggleText": { - "description": "Eating dialogs in ", "message": "Eating dialogs in " } } diff --git a/packages/browser-extension/src/_locales/es/messages.json b/packages/browser-extension/src/_locales/es/messages.json index b9d421d..9dbe9fd 100644 --- a/packages/browser-extension/src/_locales/es/messages.json +++ b/packages/browser-extension/src/_locales/es/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "¿Alguien dijo diálogos de consentimiento de cookies? 😋", "message": "¿Alguien dijo diálogos de consentimiento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar sitio...", + "contextMenu_reportOption": { "message": "Reportar sitio..." }, "contributeText": { - "description": "Contribuye a este proyecto", "message": "Contribuye a este proyecto" }, "helpText": { - "description": "¿Ayuda o problemas?", "message": "¿Ayuda o problemas?" }, "negativeText": { - "description": "¡Vaya! Sentimos lo ocurrido, por favor contacta con nosotros 😅", "message": "¡Vaya! Sentimos lo ocurrido, por favor contacta con nosotros 😅" }, "positiveText": { - "description": "¡Gracias! Por favor valora la extensión aquí 😍", "message": "¡Gracias! Por favor valora la extensión aquí 😍" }, - "reportText": { - "description": "¡Reporte enviado!", + "reportDialog_blankPageOption": { + "message": "La página está en blanco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecciona una opción" + }, + "reportDialog_cannotClickOption": { + "message": "No se puede hacer clic" + }, + "reportDialog_laggyPageOption": { + "message": "La página tarda mucho en cargar" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La página no responde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La página está mal visualmente" + }, + "reportDialog_popupShowUpOption": { + "message": "Ha aparecido un diálogo" + }, + "reportDialog_submitExtraText": { + "message": "Le recomendamos encarecidamente que desactive la extensión en este sitio hasta que solucionemos el problema" + }, + "reportDialog_submitText": { "message": "¡Reporte enviado!" }, "reviewText": { - "description": "¿Te gusta esta extensión?", "message": "¿Te gusta esta extensión?" }, "toggleText": { - "description": "Comiendo diálogos en ", "message": "Comiendo diálogos en " } } diff --git a/packages/browser-extension/src/_locales/fr/messages.json b/packages/browser-extension/src/_locales/fr/messages.json index 679ebf6..86431f5 100644 --- a/packages/browser-extension/src/_locales/fr/messages.json +++ b/packages/browser-extension/src/_locales/fr/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋", "message": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋" }, - "contextMenuText": { - "description": "Signaler le site...", + "contextMenu_reportOption": { "message": "Signaler le site..." }, "contributeText": { - "description": "Contribuez à ce projet", "message": "Contribuez à ce projet" }, "helpText": { - "description": "Aide ou problèmes?", "message": "Aide ou problèmes?" }, "negativeText": { - "description": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez nous contacter 😅", "message": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez nous contacter 😅" }, "positiveText": { - "description": "Merci! Veuillez évaluer notre extension ici 😍", "message": "Merci! Veuillez évaluer notre extension ici 😍" }, - "reportText": { - "description": "Rapport envoyé!", + "reportDialog_blankPageOption": { + "message": "La page est vide" + }, + "reportDialog_bodyText": { + "message": "Veuillez sélectionner une option ci-dessous" + }, + "reportDialog_cannotClickOption": { + "message": "Impossible de cliquer" + }, + "reportDialog_laggyPageOption": { + "message": "La page est lente" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La page ne répond pas" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La page contient des problèmes visuels" + }, + "reportDialog_popupShowUpOption": { + "message": "La fenêtre contextuelle s'est affichée" + }, + "reportDialog_submitExtraText": { + "message": "Nous vous recommandons vivement de désactiver l'extension sur ce site jusqu'à ce que nous résolvions le problème" + }, + "reportDialog_submitText": { "message": "Rapport envoyé!" }, "reviewText": { - "description": "Aimez-vous cette extension?", "message": "Aimez-vous cette extension?" }, "toggleText": { - "description": "Manger des dialogues dans ", "message": "Manger des dialogues dans " } } diff --git a/packages/browser-extension/src/_locales/it/messages.json b/packages/browser-extension/src/_locales/it/messages.json index 34beb2e..0ba8304 100644 --- a/packages/browser-extension/src/_locales/it/messages.json +++ b/packages/browser-extension/src/_locales/it/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋", "message": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋" }, - "contextMenuText": { - "description": "Segnala sito...", + "contextMenu_reportOption": { "message": "Segnala sito..." }, "contributeText": { - "description": "Contribuisci a questo progetto", "message": "Contribuisci a questo progetto" }, "helpText": { - "description": "Aiuto o problemi?", "message": "Aiuto o problemi?" }, "negativeText": { - "description": "Ops! Ci scusiamo per l'inconveniente, per favore contattaci 😅", "message": "Ops! Ci scusiamo per l'inconveniente, per favore contattaci 😅" }, "positiveText": { - "description": "Grazie! Valuta la nostra estensione qui 😍", "message": "Grazie! Valuta la nostra estensione qui 😍" }, - "reportText": { - "description": "Rapporto inviato!", + "reportDialog_blankPageOption": { + "message": "La pagina è vuota" + }, + "reportDialog_bodyText": { + "message": "Seleziona un'opzione qui sotto" + }, + "reportDialog_cannotClickOption": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "La pagina è in ritardo" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La pagina non risponde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La pagina contiene difetti visivi" + }, + "reportDialog_popupShowUpOption": { + "message": "È apparso il popup" + }, + "reportDialog_submitExtraText": { + "messaggio": "Ti consigliamo vivamente di disattivare l'estensione in questo sito finché non risolviamo il problema" + }, + "reportDialog_submitText": { "message": "Rapporto inviato!" }, "reviewText": { - "description": "Ti piace questa estensione?", "message": "Ti piace questa estensione?" }, "toggleText": { - "description": "Mangiare dialoghi in ", "message": "Mangiare dialoghi in " } } diff --git a/packages/browser-extension/src/_locales/pt_BR/messages.json b/packages/browser-extension/src/_locales/pt_BR/messages.json index ffc5032..41bd69f 100644 --- a/packages/browser-extension/src/_locales/pt_BR/messages.json +++ b/packages/browser-extension/src/_locales/pt_BR/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Alguém disse diálogos de consentimento de cookies? 😋", "message": "Alguém disse diálogos de consentimento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar site...", + "contextMenu_reportOption": { "message": "Reportar site..." }, "contributeText": { - "description": "Contribua para este projeto", "message": "Contribua para este projeto" }, "helpText": { - "description": "Ajuda ou problemas?", "message": "Ajuda ou problemas?" }, "negativeText": { - "description": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅", "message": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅" }, "positiveText": { - "description": "Obrigado! Avalie nossa extensão aqui 😍", "message": "Obrigado! Avalie nossa extensão aqui 😍" }, - "reportText": { - "description": "Relatório enviado!", + "reportDialog_blankPageOption": { + "message": "A página está em branco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecione uma opção abaixo" + }, + "reportDialog_cannotClickOption": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "A página está com lag" + }, + "reportDialog_pageNotRespondingOption": { + "message": "A página não está respondendo" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "A página contém falhas visuais" + }, + "reportDialog_popupShowUpOption": { + "message": "Apareceu um popup" + }, + "reportDialog_submitExtraText": { + "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema" + }, + "reportDialog_submitText": { "message": "Relatório enviado!" }, "reviewText": { - "description": "Você gosta desta extensão?", "message": "Você gosta desta extensão?" }, "toggleText": { - "description": "Comer diálogos em ", "message": "Comer diálogos em " } } diff --git a/packages/browser-extension/src/_locales/pt_PT/messages.json b/packages/browser-extension/src/_locales/pt_PT/messages.json index ffc5032..41bd69f 100644 --- a/packages/browser-extension/src/_locales/pt_PT/messages.json +++ b/packages/browser-extension/src/_locales/pt_PT/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Alguém disse diálogos de consentimento de cookies? 😋", "message": "Alguém disse diálogos de consentimento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar site...", + "contextMenu_reportOption": { "message": "Reportar site..." }, "contributeText": { - "description": "Contribua para este projeto", "message": "Contribua para este projeto" }, "helpText": { - "description": "Ajuda ou problemas?", "message": "Ajuda ou problemas?" }, "negativeText": { - "description": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅", "message": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅" }, "positiveText": { - "description": "Obrigado! Avalie nossa extensão aqui 😍", "message": "Obrigado! Avalie nossa extensão aqui 😍" }, - "reportText": { - "description": "Relatório enviado!", + "reportDialog_blankPageOption": { + "message": "A página está em branco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecione uma opção abaixo" + }, + "reportDialog_cannotClickOption": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "A página está com lag" + }, + "reportDialog_pageNotRespondingOption": { + "message": "A página não está respondendo" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "A página contém falhas visuais" + }, + "reportDialog_popupShowUpOption": { + "message": "Apareceu um popup" + }, + "reportDialog_submitExtraText": { + "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema" + }, + "reportDialog_submitText": { "message": "Relatório enviado!" }, "reviewText": { - "description": "Você gosta desta extensão?", "message": "Você gosta desta extensão?" }, "toggleText": { - "description": "Comer diálogos em ", "message": "Comer diálogos em " } } diff --git a/packages/browser-extension/src/_locales/ro/messages.json b/packages/browser-extension/src/_locales/ro/messages.json index 874828c..12e764e 100644 --- a/packages/browser-extension/src/_locales/ro/messages.json +++ b/packages/browser-extension/src/_locales/ro/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "A spus cineva dialoguri de consimțământ pentru cookie? 😋", "message": "A spus cineva dialoguri de consimțământ pentru cookie? 😋" }, - "contextMenuText": { - "description": "Raportați site-ul...", + "contextMenu_reportOption": { "message": "Raportați site-ul..." }, "contributeText": { - "description": "Contribuie la acest proiect", "message": "Contribuie la acest proiect" }, "helpText": { - "description": "Ajutor sau probleme?", "message": "Ajutor sau probleme?" }, "negativeText": { - "description": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne contactați-ne 😅", "message": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne contactați-ne 😅" }, "positiveText": { - "description": "Mulțumesc! Vă rugăm să evaluați extensia noastră aici 😍", "message": "Mulțumesc! Vă rugăm să evaluați extensia noastră aici 😍" }, - "reportText": { - "description": "Raport trimis!", + "reportDialog_blankPageOption": { + "message": "Pagina este goală" + }, + "reportDialog_bodyText": { + "message": "Vă rugăm să selectați o opțiune de mai jos" + }, + "reportDialog_cannotClickOption": { + "message": "Nu se poate face clic" + }, + "reportDialog_laggyPageOption": { + "message": "Pagina este întârziată" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Pagina nu răspunde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Pagina conține erori vizuale" + }, + "reportDialog_popupShowUpOption": { + "message": "A apărut o fereastră pop-up" + }, + "reportDialog_submitExtraText": { + "message": "Îți recomandăm insistent să dezactivați extensia de pe acest site până când remediam problema" + }, + "reportDialog_submitText": { "message": "Raport trimis!" }, "reviewText": { - "description": "Îți place această extensie?", "message": "Îți place această extensie?" }, "toggleText": { - "description": "Mâncând dialoguri în ", "message": "Mâncând dialoguri în " } } diff --git a/packages/browser-extension/src/_locales/ru/messages.json b/packages/browser-extension/src/_locales/ru/messages.json index 6dd079f..ab17ae3 100644 --- a/packages/browser-extension/src/_locales/ru/messages.json +++ b/packages/browser-extension/src/_locales/ru/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋", "message": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋" }, - "contextMenuText": { - "description": "Сообщить о сайте...", + "contextMenu_reportOption": { "message": "Сообщить о сайте..." }, "contributeText": { - "description": "Внести свой вклад в этот проект", "message": "Внести свой вклад в этот проект" }, "helpText": { - "description": "Помощь или проблемы?", "message": "Помощь или проблемы?" }, "negativeText": { - "description": "Ой! Приносим извинения за неудобства, пожалуйста, свяжитесь с нами 😅", "message": "Ой! Приносим извинения за неудобства, пожалуйста, свяжитесь с нами 😅" }, "positiveText": { - "description": "Спасибо! Пожалуйста, оцените наше расширение здесь 😍", "message": "Спасибо! Пожалуйста, оцените наше расширение здесь 😍" }, - "reportText": { - "description": "Отчет отправлен!", + "reportDialog_bodyText": { + "message": "Выберите вариант ниже" + }, + "reportDialog_blankPageOption": { + "message": "Страница пуста" + }, + "reportDialog_cannotClickOption": { + "message": "Невозможно нажать" + }, + "reportDialog_laggyPageOption": { + "message": "Страница тормозит" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Страница не отвечает" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Страница содержит визуальные сбои" + }, + "reportDialog_popupShowUpOption": { + "message": "Появилось всплывающее окно" + }, + "reportDialog_submitExtraText": { + "message": "Настоятельно рекомендуем отключить расширение на этом сайте, пока мы не исправим проблему" + }, + "reportDialog_submitText": { "message": "Отчет отправлен!" }, "reviewText": { - "description": "Вам нравится это расширение?", "message": "Вам нравится это расширение?" }, "toggleText": { - "description": "Есть диалоги в ", "message": "Есть диалоги в " } } diff --git a/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf b/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf deleted file mode 100644 index b63a14d..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf and /dev/null differ diff --git a/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf b/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf deleted file mode 100644 index 33eba8b..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf and /dev/null differ diff --git a/packages/browser-extension/src/manifest.json b/packages/browser-extension/src/manifest.json index da9bbe1..e09f256 100644 --- a/packages/browser-extension/src/manifest.json +++ b/packages/browser-extension/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Cookie Dialog Monster", - "version": "6.0.4", + "version": "6.1.0", "default_locale": "en", "description": "__MSG_appDesc__", "icons": { @@ -19,19 +19,24 @@ }, "content_scripts": [ { - "css": ["styles/snackbar.css"], + "css": ["styles/dialog.css"], "exclude_matches": [ "*://*.gfycat.com/*", - "*://*.gmx.com/*", "*://*.mediathekviewweb.de/*", "*://*.rundschau-online.de/*", "*://*.youtube.com/embed/*" ], - "js": ["scripts/content.js", "scripts/snackbar.js"], + "js": ["scripts/content.js", "scripts/dialog.js"], "matches": ["http://*/*", "https://*/*"], "run_at": "document_start" } ], "host_permissions": ["http://*/*", "https://*/*"], - "permissions": ["contextMenus", "storage", "tabs"] + "permissions": ["contextMenus", "storage", "tabs"], + "web_accessible_resources": [ + { + "matches": ["http://*/*", "https://*/*"], + "resources": ["https://fonts.googleapis.com/css?family=Inter"] + } + ] } diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index 0b4825f..8c79cfe 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -1,10 +1,10 @@ - - - + + + @@ -29,8 +29,8 @@ @@ -70,8 +70,8 @@ - - - - + + + + @@ -91,8 +91,8 @@ - - + + diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 82a9037..4dc929a 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/packages/browser-extension/src/scripts/background.js @@ -28,7 +28,7 @@ const refreshData = (callback) => { fetch(`${apiUrl}/data/`).then((result) => { result.json().then(({ data }) => { chrome.storage.local.set({ data }); - callback(data); + callback?.(data); }); }); }; @@ -36,17 +36,19 @@ const refreshData = (callback) => { /** * @async * @description Reports active tab URL + * @param {any} message * @param {chrome.tabs.Tab} tab */ -const report = async (tab) => { +const report = async (message, tab) => { + const reason = message.reason; + const userAgent = message.userAgent; const version = chrome.runtime.getManifest().version; - const body = JSON.stringify({ url: tab?.url, version }); + const body = JSON.stringify({ reason, url: tab.url, userAgent, version }); const headers = { 'Content-type': 'application/json' }; const url = `${apiUrl}/report/`; await fetch(url, { body, headers, method: 'POST' }); - chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_CONFIRMATION' }); }; /** @@ -56,7 +58,7 @@ const report = async (tab) => { chrome.contextMenus.onClicked.addListener((info, tab) => { switch (info.menuItemId) { case reportMenuItemId: - if (tab) report(tab); + if (tab) chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_DIALOG' }); break; default: break; @@ -94,6 +96,9 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => { case 'GET_TAB': chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0])); break; + case 'REPORT': + if (tabId) report(message, sender.tab); + break; case 'UPDATE_STATE': if (hostname) chrome.storage.local.set({ [hostname]: message.state }); break; @@ -113,7 +118,7 @@ chrome.runtime.onInstalled.addListener(() => { contexts: ['all'], documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches, id: reportMenuItemId, - title: chrome.i18n.getMessage('contextMenuText'), + title: chrome.i18n.getMessage('contextMenu_reportOption'), }); }); diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js new file mode 100644 index 0000000..640ee8d --- /dev/null +++ b/packages/browser-extension/src/scripts/dialog.js @@ -0,0 +1,228 @@ +/** + * @description Report reasons + * @type {string[]} + */ + +const reasons = [ + 'Cannot click', + 'Page contains visual glitches', + 'Page is blank', + 'Page is laggy', + 'Page is not responding', + 'Popup showed up', +]; + +/** + * @description Report dialog ID + */ + +const reportDialogId = 'report-dialog'; + +/** + * @description Report dialog outer HTML + */ + +const reportDialogHtml = ` + + + Cookie Dialog Monster + + + + + + + + + + + ${chrome.i18n.getMessage('reportDialog_bodyText')} + + + + + ${chrome.i18n.getMessage('reportDialog_cannotClickOption')} + + + ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')} + + + ${chrome.i18n.getMessage('reportDialog_blankPageOption')} + + + ${chrome.i18n.getMessage('reportDialog_laggyPageOption')} + + + ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')} + + + ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')} + + + + ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')} + + + + + + +`; + +/** + * @description Dialog close button click handler + * @param {MouseEvent} event + */ + +const closeButtonClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + + event.preventDefault(); + dialog?.remove(); +}; + +/** + * @description Hides report dialog + */ + +const hideReportDialog = () => { + document.getElementById(reportDialogId)?.remove(); +}; + +/** + * @description Dialog radio input click handler + * @param {MouseEvent} event + */ + +const radioClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + const radios = dialog.getElementsByTagName('report-dialog-radio'); + const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0]; + + for (const radio of radios) { + radio.setAttribute('aria-checked', 'false'); + } + + event.preventDefault(); + event.currentTarget.setAttribute('aria-checked', 'true'); + submitButton.setAttribute('aria-disabled', 'false'); + submitButton.addEventListener('click', submitButtonClickHandler); +}; + +/** + * @description Shows report dialog + */ + +const showReportDialog = () => { + const parser = new DOMParser(); + const result = parser.parseFromString(reportDialogHtml, 'text/html'); + const dialog = result.body.firstElementChild; + const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0]; + const link = document.createElement('link'); + const radios = dialog.getElementsByTagName('report-dialog-radio'); + + closeButton.addEventListener('click', closeButtonClickHandler); + link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter'); + link.setAttribute('id', 'report-dialog-font'); + link.setAttribute('rel', 'stylesheet'); + + for (const radio of radios) { + radio.addEventListener('click', radioClickHandler); + } + + document.body.appendChild(dialog); + dialog.showModal(); + + if (!document.getElementById('report-dialog-font')) { + document.head.appendChild(link); + } +}; + +/** + * @description Dialog submit button click handler + * @param {MouseEvent} event + */ + +const submitButtonClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0]; + const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]'); + const reasonIndex = option?.dataset.value; + const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; + const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0]; + const userAgent = window.navigator.userAgent; + + event.preventDefault(); + dispatch({ userAgent, reason, type: 'REPORT' }); + formView?.setAttribute('hidden', 'true'); + submitView?.removeAttribute('hidden'); +}; + +/** + * @description Listens to messages + */ + +chrome.runtime.onMessage.addListener((message) => { + switch (message.type) { + case 'HIDE_REPORT_DIALOG': + hideReportDialog(); + break; + case 'SHOW_REPORT_DIALOG': + showReportDialog(); + break; + default: + break; + } +}); diff --git a/packages/browser-extension/src/scripts/snackbar.js b/packages/browser-extension/src/scripts/snackbar.js deleted file mode 100644 index fcfc3cd..0000000 --- a/packages/browser-extension/src/scripts/snackbar.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * @description Listens to messages - */ - -chrome.runtime.onMessage.addListener((message) => { - switch (message.type) { - case 'HIDE_REPORT_CONFIRMATION': - hideReportConfirmation(); - break; - case 'SHOW_REPORT_CONFIRMATION': - showReportConfirmation(); - break; - default: - break; - } -}); - -/** - * @description Report confirmation ID - */ - -const REPORT_CONFIRMATION_ID = 'report-confirmation'; - -/** - * @description Report confirmation outer HTML - */ - -const REPORT_CONFIRMATION_HTML = ` -
-
-
- - ${chrome.i18n.getMessage('reportText')} -
-
- `; - -/** - * @description Hides report confirmation - */ - -const hideReportConfirmation = () => { - document.getElementById(REPORT_CONFIRMATION_ID)?.setAttribute('hidden', 'true'); -}; - -/** - * @description Shows report confirmation - */ - -const showReportConfirmation = () => { - const element = document.getElementById(REPORT_CONFIRMATION_ID); - - if (element) { - element.removeAttribute('hidden'); - } else { - const parser = new DOMParser(); - const result = parser.parseFromString(REPORT_CONFIRMATION_HTML, 'text/html'); - const snackbar = result.body.firstElementChild; - - document.body.appendChild(snackbar); - } - - setTimeout(() => hideReportConfirmation(), 3750); -}; diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css new file mode 100644 index 0000000..c41232b --- /dev/null +++ b/packages/browser-extension/src/styles/dialog.css @@ -0,0 +1,202 @@ +:root { + --cookie-dialog-monster-color-primary: #3dd9eb; + --cookie-dialog-monster-color-secondary: #34495e; + --cookie-dialog-monster-color-success: #5cb85c; + --cookie-dialog-monster-color-tertiary: #6b7280; + --cookie-dialog-monster-color-white: #ffffff; +} + +#report-dialog { + background-color: var(--cookie-dialog-monster-color-white); + border: none; + border-radius: 4px; + box-sizing: border-box; + color: var(--cookie-dialog-monster-color-secondary); + font-family: Inter, Arial, Helvetica, sans-serif; + font-size: 100%; + margin: auto !important; + padding: 0px !important; + text-align: left !important; + width: 320px; +} + +#report-dialog::backdrop { + background-color: rgba(0, 0, 0, 0.5); +} + +#report-dialog * { + box-sizing: border-box; +} + +report-dialog-body { + display: block; + font-size: 14px; + line-height: 14px; + padding: 16px; +} + +report-dialog-body-text { + display: block; + margin: 0px; + padding: 0px; +} + +report-dialog-close-button { + align-items: center; + background-color: transparent; + border: none; + border-radius: 4px; + color: inherit; + cursor: pointer; + display: inline-flex; + justify-content: center; + margin: 0px; + outline: none !important; + padding: 0px; + transition: 0.4s; +} + +report-dialog-close-button:focus, +report-dialog-close-button:hover { + background-color: var(--cookie-dialog-monster-color-white); + color: var(--cookie-dialog-monster-color-secondary); +} + +report-dialog-form-view[hidden] { + display: none; +} + +report-dialog-header { + align-items: center; + background-color: var(--cookie-dialog-monster-color-secondary); + color: var(--cookie-dialog-monster-color-white); + display: flex; + font-size: 16px; + height: 54px; + justify-content: space-between; + line-height: 16px; + padding: 16px; +} + +report-dialog-header-title { + font-weight: 500; +} + +report-dialog-radio { + color: var(--cookie-dialog-monster-color-tertiary); + cursor: pointer; + display: block; + margin-top: 18px; + outline: none !important; + padding-left: 24px; + position: relative; +} + +report-dialog-radio[aria-checked='true']:after { + opacity: 1; + transform: scale(1, 1); +} + +report-dialog-radio:after { + background-color: var(--cookie-dialog-monster-color-primary); + border-radius: 50%; + box-sizing: border-box; + content: ''; + display: block; + height: 8px; + left: 3px; + opacity: 0; + position: absolute; + top: 3px; + transform: scale(0, 0); + transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53); + width: 8px; +} + +report-dialog-radio:focus:not([aria-checked='true']):after, +report-dialog-radio:hover:not([aria-checked='true']):after { + background: var(--cookie-dialog-monster-color-tertiary); + opacity: 1; + transform: scale(1, 1); +} + +report-dialog-radio:before { + background: var(--cookie-dialog-monster-color-white); + border: 1px solid var(--cookie-dialog-monster-color-tertiary); + border-radius: 50%; + box-sizing: border-box; + content: ''; + display: block; + height: 14px; + left: 0px; + margin-right: 5px; + position: absolute; + top: 0px; + width: 14px; +} + +report-dialog-radio-group { + display: flex; + flex-direction: column; +} + +report-dialog-submit-button { + align-items: center; + background-color: var(--cookie-dialog-monster-color-secondary); + border: 1px solid var(--cookie-dialog-monster-color-secondary); + border-radius: 4px; + color: var(--cookie-dialog-monster-color-white); + cursor: pointer; + display: flex; + font-family: inherit; + font-size: 14px; + height: 39px; + justify-content: center; + margin-top: 24px; + outline: none !important; + padding: 8px 16px; + text-align: center; + transition: 0.4s; + width: 100%; +} + +report-dialog-submit-button:focus, +report-dialog-submit-button:hover { + background-color: var(--cookie-dialog-monster-color-white); + color: var(--cookie-dialog-monster-color-secondary); +} + +report-dialog-submit-button[aria-disabled='true'] { + background-color: var(--cookie-dialog-monster-color-tertiary); + border: 1px solid var(--cookie-dialog-monster-color-tertiary); + color: var(--cookie-dialog-monster-color-white); + cursor: not-allowed; +} + +report-dialog-submit-extra-text { + font-size: 14px; + line-height: 14px; + margin: 0px; + margin-top: 16px; + text-align: center; +} + +report-dialog-submit-text { + font-size: 18px; + line-height: 18px; + margin: 0px; + margin-top: 24px; + text-align: center; +} + +report-dialog-submit-view { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 269px; +} + +report-dialog-submit-view[hidden] { + display: none; +} diff --git a/packages/browser-extension/src/styles/fonts.css b/packages/browser-extension/src/styles/fonts.css deleted file mode 100644 index 9f2d34d..0000000 --- a/packages/browser-extension/src/styles/fonts.css +++ /dev/null @@ -1,13 +0,0 @@ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - src: url('/assets/fonts/Lato-Regular.ttf') format('truetype'); -} - -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 700; - src: url('/assets/fonts/Lato-Bold.ttf') format('truetype'); -} diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index e395a36..d9d22cd 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -24,7 +24,7 @@ body { color: var(--color-tertiary); display: flex; flex-direction: column; - font-family: 'Lato', Arial, Helvetica, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; height: 24rem; width: 20rem; } @@ -83,11 +83,6 @@ strong { font-weight: bold; } -svg { - height: 1rem; - width: 1rem; -} - .header-actions { align-items: center; display: flex; diff --git a/packages/browser-extension/src/styles/snackbar.css b/packages/browser-extension/src/styles/snackbar.css deleted file mode 100644 index b1e3601..0000000 --- a/packages/browser-extension/src/styles/snackbar.css +++ /dev/null @@ -1,65 +0,0 @@ -#report-confirmation { - bottom: 30px !important; - font-family: 'Lato', Arial, Helvetica, sans-serif !important; - min-width: 250px !important; - position: fixed; - 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 !important; - visibility: visible !important; -} - -#report-confirmation:not([hidden]) #report-confirmation-bar { - animation: roundTime 3.5s linear forwards !important; -} - -#report-confirmation-content { - align-items: center !important; - background-color: #34495e !important; - border-radius: 2px !important; - color: #fff !important; - display: flex !important; - font-size: 14px !important; - gap: 16px !important; - overflow: hidden !important; - padding: 16px !important; -} - -#report-confirmation-bar { - background-color: #3dd9eb !important; - height: 4px !important; - transform-origin: left center !important; -} - -@keyframes fadeIn { - from { - bottom: 0; - opacity: 0; - } - to { - bottom: 30px; - opacity: 1; - } -} - -@keyframes fadeOut { - from { - bottom: 30px; - opacity: 1; - } - to { - bottom: 0; - opacity: 0; - } -} - -@keyframes roundTime { - to { - transform: scaleX(0); - } -}