diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json index d3d3113..601c159 100644 --- a/src/_locales/de/messages.json +++ b/src/_locales/de/messages.json @@ -258,5 +258,41 @@ }, "restore": { "message": "Wiederherstellen" + }, + "welcome": { + "message": "Willkommen bei Web Activity Time Tracker", + "description": "Web Activity Time Tracker ist eine open-source, kostenlose und werbefreie Erweiterung, mit der Sie die Zeit, die Sie für das Durchsuchen von Websites aufgewendet haben, und die Anzahl der Besuche nachverfolgen können." + }, + "getStarted": { + "message": "Anleitung" + }, + "welcomeStart": { + "message": "Sie können die Erweiterung in nur 3 einfachen Schritten schnell verwenden" + }, + "pinIcon": { + "message": "Pin das Symbol" + }, + "pinIconPart1": { + "message": "Um diese Erweiterung bequemer zu verwenden, können Sie das Symbol an die Symbolleiste anheften. Klicken Sie auf das Symbol" + }, + "pinIconPart2": { + "message": "und klicken Sie dann auf das Pin-Symbol" + }, + "browse": { + "message": "Durchsuchen Sie alle Websites", + "description": "Wenn Sie eine Website besuchen, werden Sie sehen, dass die Uhrzeit auf dem Symbol angezeigt wird, genau wie hier" + }, + "seeData": { + "message": "Zeigen Sie Ihre Daten auf der Popup-Seite und im Dashboard an", + "description": "Klicken Sie auf das Erweiterungssymbol, um eine Popup-Seite zu öffnen, und Sie können die mit einem Kreisdiagramm gerenderten Daten für heute, für alle Zeiten oder für Tage lesen. In einem Popup-Fenster können Sie das Dashboard öffnen, und es zeigt Ihnen die heutige Zeit nach Stunden an. Und Sie können ein tägliches Zeitlimit für alle Websites festlegen, Benachrichtigungen für Websites festlegen oder Daten in CSV exportieren." + }, + "close": { + "message": "Schließen" + }, + "useExtension": { + "message": "Verwenden Sie die Erweiterung" + }, + "next": { + "message": "Weiter" } } \ No newline at end of file diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index bf0424a..4af188c 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -258,5 +258,41 @@ }, "restore": { "message": "Restore" + }, + "welcome": { + "message": "Welcome to Web Activity Time Tracker", + "description": "Web Activity Time Tracker is open-source, free and no ads extension, which can help you track the time you spent on browsing websites and the count of visit." + }, + "getStarted": { + "message": "Get started" + }, + "welcomeStart": { + "message": "You can quicly start using the extension in just 3 easy steps" + }, + "pinIcon": { + "message": "Pin the icon" + }, + "pinIconPart1": { + "message": "To use this extension more conveniently, you can pin the icon to toolbar. Click the icon" + }, + "pinIconPart2": { + "message": "and then click the pin icon" + }, + "browse": { + "message": "Browse any websites", + "description": "When you visit any website, you will see that the time is displayed on the icon, just like here" + }, + "seeData": { + "message": "View your data on the popup page and on the dashboard", + "description": "Click on the extension icon to open a popup page and you will be able to read the data visualized using a pie chart, for today, for all time or by day. In the popup window, you can open the dashboard and it will show you today's time by the clock. And you can set a daily time limit for any websites, notifications for websites, or export data to CSV." + }, + "close": { + "message": "Close" + }, + "useExtension": { + "message": "Use the extension" + }, + "next": { + "message": "Next" } } diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json index f019ff2..00e4db7 100644 --- a/src/_locales/ru/messages.json +++ b/src/_locales/ru/messages.json @@ -258,5 +258,41 @@ }, "restore": { "message": "Восстановить из резервной копиии" + }, + "welcome": { + "message": "Добро пожаловать в Web Activity Time Tracker", + "description": "Web Activity Time Tracker это бесплатное, без рекламы и \u0441 открытым исходным кодом расширение, которое поможем вам отслеживать время, потраченное вами на просмотр веб-сайтов, и покажет количество посещений." + }, + "getStarted": { + "message": "Руководство" + }, + "welcomeStart": { + "message": "Вы можете быстро начать использовать расширение всего за 3 простых шага" + }, + "pinIcon": { + "message": "Закрепите значок" + }, + "pinIconPart1": { + "message": "Чтобы более удобно использовать это расширение, вы можете прикрепить значок к панели инструментов. Нажмите на значок" + }, + "pinIconPart2": { + "message": "и затем нажмите на значок закрепления" + }, + "browse": { + "message": "Просматривайте любые веб-сайты", + "description": "При посещении любого веб-сайта вы увидите, что время отображается на значке, точно так же, как здесь" + }, + "seeData": { + "message": "Просматривайте ваши данные на всплывающей странице и на панели мониторинга", + "description": "Нажмите на значок расширения, чтобы открыть всплывающую страницу, и вы сможете увидеть данные посещения сайтов за сегодня, за все время и по дням. Во всплывающем окне вы можете открыть панель мониторинга, и вы увидите сегодняшнее время по часам. Там же вы можете установить ежедневное ограничение по времени для любых веб-сайтов, уведомления для веб-сайтов или экспортировать данные в CSV." + }, + "close": { + "message": "Закрыть" + }, + "useExtension": { + "message": "Начать пользоваться" + }, + "next": { + "message": "Продолжить" } } diff --git a/src/assets/icons/extension.svg b/src/assets/icons/extension.svg new file mode 100644 index 0000000..0897782 --- /dev/null +++ b/src/assets/icons/extension.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/icon.png b/src/assets/icons/icon.png new file mode 100644 index 0000000..9c86246 Binary files /dev/null and b/src/assets/icons/icon.png differ diff --git a/src/assets/icons/pin.svg b/src/assets/icons/pin.svg new file mode 100644 index 0000000..2a91ad0 --- /dev/null +++ b/src/assets/icons/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/initial.jpg b/src/assets/initial.jpg new file mode 100644 index 0000000..d70547a Binary files /dev/null and b/src/assets/initial.jpg differ diff --git a/src/assets/pin-tutorial.png b/src/assets/pin-tutorial.png new file mode 100644 index 0000000..ebece96 Binary files /dev/null and b/src/assets/pin-tutorial.png differ diff --git a/src/background.ts b/src/background.ts index 601bd7b..e5516cc 100644 --- a/src/background.ts +++ b/src/background.ts @@ -28,6 +28,16 @@ Browser.storage.onChanged.addListener((changes, namespace) => { Browser.runtime.setUninstallURL('https://webtracker.online/goodbye.html'); +Browser.runtime.onInstalled.addListener(async details => { + if (details.reason == 'install') { + const initialPageUrl = Browser.runtime.getURL('src/welcome.html'); + await Browser.tabs.create({ + url: initialPageUrl, + active: true, + }); + } +}); + Browser.runtime.onStartup.addListener(() => { logger.log(`onStartup event`); }); diff --git a/src/compositions/set-badge.ts b/src/compositions/set-badge.ts index 4662815..7097b8a 100644 --- a/src/compositions/set-badge.ts +++ b/src/compositions/set-badge.ts @@ -2,7 +2,7 @@ import Browser from 'webextension-polyfill'; export interface BadgeState { color: BadgeColor; - tabId: number; + tabId: number | undefined; text: string; } @@ -13,10 +13,12 @@ export enum BadgeColor { none = '#000', } -export function useBadge(badge: BadgeState): void { - Browser.action.setBadgeBackgroundColor({ color: badge.color }); - Browser.action.setBadgeText({ - tabId: badge.tabId, - text: badge.text, - }); +export async function useBadge(badge: BadgeState): Promise { + if (badge.tabId != undefined) { + await Browser.action.setBadgeBackgroundColor({ color: badge.color }); + await Browser.action.setBadgeText({ + tabId: badge.tabId, + text: badge.text, + }); + } } diff --git a/src/pages/Popup.vue b/src/pages/Popup.vue index 4b8e964..dd41628 100644 --- a/src/pages/Popup.vue +++ b/src/pages/Popup.vue @@ -5,7 +5,6 @@

Web Activity Time Tracker

- {{ t('dashboard.message') }} diff --git a/src/pages/Welcome.vue b/src/pages/Welcome.vue new file mode 100644 index 0000000..4a35a05 --- /dev/null +++ b/src/pages/Welcome.vue @@ -0,0 +1,145 @@ + + + + + diff --git a/src/tracker.ts b/src/tracker.ts index 06afc2f..b28e2a1 100644 --- a/src/tracker.ts +++ b/src/tracker.ts @@ -41,8 +41,8 @@ async function trackTime() { const activeDomain = extractHostname(activeTab!.url); if (await isInBlackList(activeDomain)) { - useBadge({ - tabId: activeTab!.id!, + await useBadge({ + tabId: activeTab?.id, text: 'n/a', color: BadgeColor.green, }); @@ -128,14 +128,14 @@ async function mainTracker( const viewInBadge = await Settings.getInstance().getSetting(StorageParams.VIEW_TIME_IN_BADGE); if (viewInBadge) - useBadge({ - tabId: activeTab!.id!, + await useBadge({ + tabId: activeTab?.id, text: convertSummaryTimeToBadgeString(tab.days.at(-1)!.summary), color: BadgeColor.blue, }); else - useBadge({ - tabId: activeTab!.id!, + await useBadge({ + tabId: activeTab?.id, text: '', color: BadgeColor.red, }); diff --git a/src/welcome.html b/src/welcome.html new file mode 100644 index 0000000..1a91c8f --- /dev/null +++ b/src/welcome.html @@ -0,0 +1,13 @@ + + + + + + + Welcome to the Web Activity Time Tracker + + + + + + diff --git a/src/welcome.ts b/src/welcome.ts new file mode 100644 index 0000000..c7d5b0e --- /dev/null +++ b/src/welcome.ts @@ -0,0 +1,7 @@ +import Welcome from './pages/Welcome.vue'; +import { createApp } from 'vue'; +import i18n from './plugins/i18n'; + +const app = createApp(Welcome); +app.use(i18n); +app.mount('body'); diff --git a/vite.config.ts b/vite.config.ts index 977b915..67a0bbd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -54,7 +54,7 @@ export default defineConfig(({ mode }) => ({ webExtension({ manifest: generateManifest, watchFilePaths: ['package.json', 'manifest.json'], - additionalInputs: ['src/block.html'], + additionalInputs: ['src/block.html', 'src/welcome.html'], }), copy({ targets: [{ src: 'src/_locales', dest: 'dist' }],