changes for 1.0.5

CHANGELOG.MD

@@ -1,5 +1,12 @@
 # Change Log
 
+## [Version 1.0.5]
+
+- added: `setting` to enable right click page context like at user suggestion
+- added: `setting` to enable chrome notification on like success/fail from right click context
+- refactor: track for reward notification
+- disabled: some logs
+
 ## [Version 1.0.4]
 
 - fix: add missing key

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "yup live",
     "description": "Light alternative extension for yup protocol",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "manifest_version": 3,
     "icons": {
         "16": "src/assets/icons/yup_ext_16.png",
@@ -53,6 +53,7 @@
     "notifications", 
     "tabs",
     "clipboardWrite",
-    "alarms"
+    "alarms",
+    "contextMenus"
   ]
 }

src/background/index.ts

@@ -1,4 +1,4 @@
-import { SEND_AUTH_NOTIF } from '@/constants/messeges';
+import { SEND_AUTH_NOTIF, ENABLE_RIGHT_CLICK, DISABLE_RIGHT_CLICK } from '@/constants/messeges';
 import { initStorage } from '@/utils/storage'
 import { getStore, setProfile, setNotifStorageNotifs, setSettings, setNotifStorageLastRewardNotif, getNotifStorageLastRewardNotif } from '@/utils/storage'
 import type { Notification } from '@/utils/types';
@@ -7,11 +7,65 @@ import { getNotifications } from '@/utils/notifications';
 import { setBadge } from '@/utils/chrome-misc'
 import { closeTo } from '@/utils/time';
 import { getActionUsage } from '@/utils/user';
+import { executeVote, getVotePayload } from '@/utils/votes';
+
 // Disable conflict with yup extension
 const yupExtensionId = 'nhmeoaahigiljjdkoagafdccikgojjoi'
 
 console.info('Service worker started')
 
+
+const onRightClickLike = async (store, info, tab) => {
+        const vote = await executeVote(getVotePayload({
+            store,
+            url: tab.url,
+            type: true
+        }))
+        if (store?.settings?.enableRightClickNotif) {
+            if (vote?._id) {
+                await chrome.notifications.create({
+                    type: 'basic',
+                    iconUrl: chrome.runtime.getURL('src/assets/icons/yup_ext_128.png'),
+                    title: 'Yup Live Extension',
+                    message: `Your rating has been submitted`,
+                })
+            } else {
+                await chrome.notifications.create({
+                    type: 'basic',
+                    iconUrl: chrome.runtime.getURL('src/assets/icons/yup_ext_128.png'),
+                    title: 'Yup Live Extension',
+                    message: `There was an error submitting your rating`,
+                })
+            }
+        }
+}
+
+const enableRightClickVote = async () => {
+    try {
+        await chrome.contextMenus.create({
+            id: "yup-like",
+            title: "Like this page",
+            contexts: ["page", "page_action"],
+        });
+    } catch (error) {
+        // ignore
+    }
+    if(chrome.runtime.lastError) {
+        console.warn('Error creating context menu', chrome.runtime.lastError.message)
+    }
+}
+
+const disableRightClickVote = async () => {
+    try {
+        await chrome.contextMenus.remove("yup-like");
+    } catch (error) {
+        // ignore
+    }
+    if(chrome.runtime.lastError) {
+        console.warn('Error creating context menu', chrome.runtime.lastError.message)
+    }
+}
+
 const alarmHandler = async () => {
     const store = await getStore()
     const requests = {} as Record<string, Promise<Response | Notification[]>>
@@ -69,15 +123,15 @@ const alarmHandler = async () => {
 
                         if (!storeReward || (storeReward.id !== rewardNotif._id
                             && !closeTo(new Date(storeReward.createdAt), new Date(rewardNotif.createdAt), 2e4)
-                            )) {
+                        )) {
                             {
-                                    await setNotifStorageLastRewardNotif({ createdAt: rewardNotif.createdAt, id: rewardNotif._id });
+                                await setNotifStorageLastRewardNotif({ createdAt: rewardNotif.createdAt, id: rewardNotif._id });
-                                    await chrome.notifications.create({
+                                await chrome.notifications.create({
-                                        type: 'basic',
+                                    type: 'basic',
-                                        iconUrl: chrome.runtime.getURL('src/assets/icons/yup_ext_128.png'),
+                                    iconUrl: chrome.runtime.getURL('src/assets/icons/yup_ext_128.png'),
-                                        title: 'Yup Live Extension',
+                                    title: 'Yup Live Extension',
-                                        message: `You have been alocated a future reward of ${rewardNotif.quantity} YUP`,
+                                    message: `You have been alocated a future reward of ${rewardNotif.quantity} YUP`,
-                                    })
+                                })
                             }
                         }
                     }
@@ -88,7 +142,8 @@ const alarmHandler = async () => {
                 }
 
             } catch (error) {
-                console.error('Error fetching notifications', error)
+                // console.error('Error fetching notifications', error)
+                // ignore
             }
         }
 
@@ -104,19 +159,36 @@ chrome.alarms.create(
 
 chrome.alarms.onAlarm.addListener(alarmHandler)
 
-chrome.runtime.onInstalled.addListener(() => {
+chrome.runtime.onInstalled.addListener(async () => {
     initStorage()
     chrome.management.setEnabled(yupExtensionId, false)
+    const store = await getStore()
+    if (store?.user?.auth?.authToken && store?.settings?.enableRightClick) {
+            enableRightClickVote()
+    }
 });
 
-chrome.runtime.onStartup.addListener(() => {
+chrome.runtime.onStartup.addListener(async () => {
     initStorage()
     chrome.management.setEnabled(yupExtensionId, false)
+    const store = await getStore()
+    if (store?.user?.auth?.authToken && store?.settings?.enableRightClick) {
+            enableRightClickVote()
+    }
 })
 
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+    if (info.menuItemId === 'yup-like') {
+        const store = await getStore()
+        if (store?.user?.auth?.authToken) {
+            onRightClickLike(store, info, tab)
+        }
+    }
+})
             
 chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
     try {
+        console.log('Message received', request)
         if (request.type === SEND_AUTH_NOTIF) {
             chrome.notifications.create({
                 type: 'basic',
@@ -124,11 +196,17 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
                 title: 'Yup Live Extension',
                 message: 'You have been logged in.',
             })
+            sendResponse({ success: true })
+        } else if (request.type === ENABLE_RIGHT_CLICK) {
+            await enableRightClickVote()
+            sendResponse({ success: true })
+        } else if (request.type === DISABLE_RIGHT_CLICK) {
+            await disableRightClickVote()
+            sendResponse({ success: true })
         }
     } catch (error) {
         console.error('Error in message listener', error)
         sendResponse({ error })
     }
-
     return true
 })

src/client/content.ts

@@ -22,13 +22,13 @@
     if (event.source != window)
         return;
         if(allowedEvents.includes(event?.data?.type ?? '')){
-          console.log('Yup Live Extension received message:', event.data);
+          // console.log('Yup Live Extension received message:', event.data);
           switch (event.data.type) {
             case SEND_VOTE:
-              console.log('SEND_VOTE', event.data.payload)
+              // console.log('SEND_VOTE', event.data.payload)
               break;
             case SET_AUTH:
-              console.log('SET_AUTH', event.data.payload)
+              // console.log('SET_AUTH', event.data.payload)
               setAuth(event.data.payload).catch(console.error)
               break;
             default:

src/constants/messeges.ts

@@ -1,3 +1,5 @@
 export const SEND_VOTE = 'SEND_VOTE'
 export const SET_AUTH = 'SET_AUTH'
 export const SEND_AUTH_NOTIF = 'SEND_AUTH_NOTIF'
+export const ENABLE_RIGHT_CLICK = 'ENABLE_RIGHT_CLICK'
+export const DISABLE_RIGHT_CLICK = 'DISABLE_RIGHT_CLICK'

src/overlay/Overlay.svelte

@@ -2,7 +2,7 @@
     import Alert from "@/components/Alert.svelte";
     import '@/overlay/overlay.scss'
     import { getStore } from "@/utils/storage";
-    import { executeVote } from "@/utils/votes";
+    import { executeVote, getVotePayload } from "@/utils/votes";
 
     let alert
     let loading = false
@@ -11,18 +11,13 @@
         if(loading) return
         loading = true
         const store = await getStore()
-        const payload  ={
+
-            userVote: {
+        const vote = await executeVote(getVotePayload({
-                like: type,
+            store,
-                rating: 1
+            url: document.location.href,
-            },
+            type
-            post: '',
+        }))
-            url: document.location.href.replace(/\/$/gms, ''),
+
-            $mainStore: store,
-            $alertStore: null
-        }
-        const vote = await executeVote(payload)
-        console.log(vote)
         if (vote?._id){
             alert.show(type ? 'Liked' : 'Disliked', 'success')
         } else {

src/pages/Settings.svelte

@@ -7,7 +7,8 @@ import { navigate } from "@/utils/router";
 import { storageDefault } from '@/utils/storage'
 import { onMount } from "svelte";
 import PageLoader from "@/components/PageLoader.svelte";
-import { clearBadge, reloadExtension } from '@/utils/chrome-misc';
+import { clearBadge, reloadExtension, sendSWMessage } from '@/utils/chrome-misc';
+import { DISABLE_RIGHT_CLICK, ENABLE_RIGHT_CLICK } from '@/constants/messeges'
 
 let settings: typeof $mainStore['settings']  = null;
 let settingLoading = false;
@@ -29,6 +30,16 @@ const setSettingsLocal = async (setting: string, value = '') => {
     }
     settings = $mainStore.settings;
     await setSettings($mainStore.settings);
+    switch(setting) {
+        case 'enableRightClick':
+            if($mainStore.settings[setting]) {
+                await sendSWMessage({type: ENABLE_RIGHT_CLICK })
+                break;
+            }
+            await sendSWMessage({type: DISABLE_RIGHT_CLICK })
+         break;
+    }
+
     settingLoading = false;
 };
 
@@ -107,6 +118,26 @@ onMount(async () => {
               </label>
          </div>
 
+         <div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
+          <span class="inline-block">Enable Right Click rating on page</span>
+            <label class="switch__label mt-2">
+              <input on:click={() => setSettingsLocal('enableRightClick')} type="checkbox" class="switch__input"
+              checked={settings.enableRightClick}
+              >
+              <span class="switch__design"></span>
+            </label>
+        </div>
+
+        <div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
+          <span class="inline-block">Browser notification if right click rating succeeded</span>
+            <label class="switch__label mt-2">
+              <input on:click={() => setSettingsLocal('enableRightClickNotif')} type="checkbox" class="switch__input"
+              checked={settings.enableRightClickNotif}
+              >
+              <span class="switch__design"></span>
+            </label>
+        </div>
+
     </div>
   </section>
 {:else}

src/utils/chrome-misc.ts

@@ -35,3 +35,11 @@ export const getExtensionVersion = () => {
 export const reloadExtension = () => {
     chrome.runtime.reload()
 }
+
+export const sendSWMessage = (message: {type: string, [key: string]: any}) => {
+    return new Promise((resolve) => {
+        chrome.runtime.sendMessage(message, (response) => {
+            resolve(response)
+        })
+    })
+}

src/utils/storage.ts

@@ -47,6 +47,8 @@ export const storageDefault = {
         coinGeckoPrice: 0,
         hasNewNotifications: false,
         refilNotifTimestamp: 0,
+        enableRightClick: false,
+        enableRightClickNotif: false,
     }
 }
 

src/utils/votes.ts

@@ -1,5 +1,6 @@
 import type { Vote } from './types'
 import { fetchWAuth } from './auth'
+import type { StorageType  } from './storage'
 
 const API_BASE = 'https://api.yup.io'
 
@@ -82,3 +83,22 @@ export const executeVote = async ({
       return null
     }
   }
+
+  export const getVotePayload = ({
+    url, store, type
+  }: {
+    url: string,
+    store: StorageType,
+    type: boolean
+  }) => {
+    return {
+      userVote: {
+          like: type,
+          rating: 1
+      },
+      post: '',
+      url: (url || '').replace(/\/$/gms, ''),
+      $mainStore: store,
+      $alertStore: null
+  }
+}