Welcome page

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 <b>open-source</b>, <b>kostenlose</b> und <b>werbefreie</b> 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"
   }
 }

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 <b>open-source</b>, <b>free</b> and <b>no ads</b> 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"
   }
 }

src/_locales/ru/messages.json

@@ -258,5 +258,41 @@
   },
   "restore": {
     "message": "Восстановить из резервной копиии"
+  },
+  "welcome": {
+    "message": "Добро пожаловать в Web Activity Time Tracker",
+    "description": "Web Activity Time Tracker это <b>бесплатное</b>, <b>без рекламы</b> и <b>\u0441 открытым исходным кодом</b> расширение, которое поможем вам отслеживать время, потраченное вами на просмотр веб-сайтов, и покажет количество посещений."
+  },
+  "getStarted": {
+    "message": "Руководство"
+  },
+  "welcomeStart": {
+    "message": "Вы можете быстро начать использовать расширение всего за 3 простых шага"
+  },
+  "pinIcon": {
+    "message": "Закрепите значок"
+  },
+  "pinIconPart1": {
+    "message": "Чтобы более удобно использовать это расширение, вы можете прикрепить значок к панели инструментов. Нажмите на значок"
+  },
+  "pinIconPart2": {
+    "message": "и затем нажмите на значок закрепления"
+  },
+  "browse": {
+    "message": "Просматривайте любые веб-сайты",
+    "description": "При посещении любого веб-сайта вы увидите, что время отображается на значке, точно так же, как здесь"
+  },
+  "seeData": {
+    "message": "Просматривайте ваши данные на всплывающей странице и на панели мониторинга",
+    "description": "Нажмите на значок расширения, чтобы открыть всплывающую страницу, и вы сможете увидеть данные посещения сайтов за сегодня, за все время и по дням. Во всплывающем окне вы можете открыть панель мониторинга, и вы увидите сегодняшнее время по часам. Там же вы можете установить ежедневное ограничение по времени для любых веб-сайтов, уведомления для веб-сайтов или экспортировать данные в CSV."
+  },
+  "close": {
+    "message": "Закрыть"
+  },
+  "useExtension": {
+    "message": "Начать пользоваться"
+  },
+  "next": {
+    "message": "Продолжить"
   }
 }

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`);
 });

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<void> {
+  if (badge.tabId != undefined) {
+    await Browser.action.setBadgeBackgroundColor({ color: badge.color });
+    await Browser.action.setBadgeText({
+      tabId: badge.tabId,
+      text: badge.text,
+    });
+  }
 }

src/pages/Popup.vue

@@ -5,7 +5,6 @@
       <p class="header">Web Activity Time Tracker</p>
     </div>
     <div class="icons-block">
-      <!-- <img height="17" src="../assets/icons/dark-mode.svg" /> -->
       <a @click="openPage(SettingsTab.Dashboard)"
         >{{ t('dashboard.message') }}<img height="22" src="../assets/icons/dashboard.svg"
       /></a>

src/pages/Welcome.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="main">
+    <template v-if="step == WelcomeStep.InitialView">
+      <div class="initial-block">
+        <p class="header">{{ t('welcome.message') }}</p>
+        <img class="img" src="../assets/initial.jpg" height="250" />
+        <p class="description" v-html="t('welcome.description')"></p>
+        <div class="next-btn">
+          <button @click="nextStep()">{{ t('next.message') }}</button>
+        </div>
+      </div>
+    </template>
+    <template v-if="step == WelcomeStep.Tutorial">
+      <div class="steps">
+        <p class="header">{{ t('getStarted.message') }}</p>
+        <p class="description">{{ t('welcomeStart.message') }}</p>
+        <p class="step">1. {{ t('pinIcon.message') }}</p>
+        <p class="description">
+          {{ t('pinIconPart1.message') }}
+          <img src="../assets/icons/extension.svg" height="25" /> {{ t('pinIconPart2.message') }}
+          <img src="../assets/icons/pin.svg" height="25" />
+        </p>
+        <img class="img" src="../assets/pin-tutorial.png" height="250" />
+        <p class="step">2. {{ t('browse.message') }}</p>
+        <p class="description">
+          {{ t('browse.description') }}
+          <img src="../assets/icons/icon.png" height="35" />
+        </p>
+        <p class="step">3. {{ t('seeData.message') }}</p>
+        <p class="description mt-20">
+          {{ t('seeData.description') }}
+        </p>
+        <div class="btn-block">
+          <button class="close" @click="close()">{{ t('close.message') }}</button>
+          <button @click="openDashboard()">{{ t('useExtension.message') }}</button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Browser from 'webextension-polyfill';
+
+const { t } = useI18n();
+
+enum WelcomeStep {
+  InitialView,
+  Tutorial,
+}
+
+const step = ref<WelcomeStep>();
+
+onMounted(() => {
+  step.value = WelcomeStep.InitialView;
+});
+
+function nextStep() {
+  step.value = WelcomeStep.Tutorial;
+}
+
+async function close() {
+  const currentTab = await Browser.tabs.getCurrent();
+  await Browser.tabs.remove(currentTab.id!);
+}
+
+async function openDashboard() {
+  const url = Browser.runtime.getURL('src/dashboard.html?tab=dashboard');
+  const tab = await Browser.tabs.query({ currentWindow: true, active: true });
+  Browser.tabs.update(tab[0].id, { url: url });
+}
+</script>
+
+<style scoped>
+.main {
+  margin: auto;
+  text-align: center;
+  width: 60%;
+  height: 100%;
+}
+.initial-block {
+  margin-top: 20%;
+}
+
+.header {
+  font-size: 26px;
+  font-weight: 700;
+}
+.img {
+  margin: 20px 0;
+}
+.description {
+  font-size: 18px;
+}
+.description span {
+  font-weight: 600;
+}
+.description img {
+  margin: 0 10px;
+}
+.steps {
+  margin-top: 50px;
+}
+.steps .step {
+  text-align: left;
+  font-size: 24px;
+  font-weight: 700;
+}
+.steps .step {
+  margin: 30px;
+}
+
+.steps .description {
+  margin: 20px;
+}
+.next-btn {
+  margin-top: 40px;
+}
+
+button.close {
+  background: #c5c5c5;
+  color: rgb(0, 0, 0);
+}
+
+button {
+  display: inline-block;
+  background: #428bff;
+  color: #fff;
+  border-radius: 5px;
+  height: 36px;
+  line-height: 35px;
+  padding: 0 10px;
+  border: 0;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  width: 200px;
+  margin: 0 10px;
+}
+.btn-block {
+  margin: 25px;
+}
+</style>

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,
       });

src/welcome.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Welcome to the Web Activity Time Tracker</title>
+  </head>
+
+  <body>
+    <script type="module" src="./welcome.ts"></script>
+  </body>
+</html>

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');

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' }],