feat(context): adds open in context menu

Author: dvcol

scripts/manifest.ts

@@ -42,8 +42,9 @@ export const manifest: Manifest.WebExtensionManifest = {
   },
   background: {
     service_worker: 'scripts/background.js',
+    type: 'module',
   },
-  permissions: ['storage', 'tabs'],
+  permissions: ['storage', 'tabs', 'contextMenus'],
   web_accessible_resources: [
     {
       resources: ['/views/options/index.html'],

src/components/common/navbar/NavbarComponent.vue

@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
 
-import { Route } from '~/router';
+import { Route } from '~/models/router.model';
 import { NavbarService } from '~/services/navbar.service';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils';

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -6,6 +6,7 @@ import { computed, defineProps, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import type { DropdownProps } from 'naive-ui';
+
 import type { Component } from 'vue';
 
 import type { ArrayElement } from '~/utils/typescript.utils';
@@ -17,7 +18,7 @@ import IconExternalLink from '~/components/icons/IconExternalLink.vue';
 import IconLightBulb from '~/components/icons/IconLightBulb.vue';
 import IconLogOut from '~/components/icons/IconLogOut.vue';
 
-import { Route } from '~/router';
+import { Route } from '~/models/router.model';
 import { TraktService } from '~/services/trakt.service';
 import { ExternaLinks } from '~/settings/external.links';
 import { logger } from '~/stores/settings/log.store';

src/components/views/search/SearchNavbar.vue

@@ -11,6 +11,8 @@ import {
 
 import { type Component, computed, defineProps, h, onActivated, ref } from 'vue';
 
+import { useRoute } from 'vue-router';
+
 import type { TraktSearchType } from '~/models/trakt/trakt-search.model';
 
 import ButtonLinkExternal from '~/components/common/buttons/ButtonLinkExternal.vue';
@@ -156,8 +158,11 @@ const hideTooltip = () => {
 
 const inputRef = ref();
 
+const route = useRoute();
+
 onActivated(() => {
   if (!search.value) inputRef.value?.focus();
+  if (typeof route?.query?.search === 'string') search.value = route.query.search;
 });
 </script>
 

src/components/views/settings/SettingsTabs.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { pageSizeOptions } from '~/models/page-size.model';
-import { Route } from '~/router';
+import { Route } from '~/models/router.model';
 import { useHistoryStoreRefs } from '~/stores/data/history.store';
 import { useListStoreRefs } from '~/stores/data/list.store';
 import { useSearchStoreRefs } from '~/stores/data/search.store';

src/models/context/context-menu.model.ts

@@ -0,0 +1,19 @@
+export const ContextMenuId = {
+  OpenInSideTrakt: 'open-in-side-trakt',
+} as const;
+
+export type ContextMenuIds = (typeof ContextMenuId)[keyof typeof ContextMenuId];
+
+export type ContextMenu = {
+  id: ContextMenuIds;
+  title: string;
+  contexts?: ('selection' | 'link')[];
+};
+
+export const ContextMenus: Record<ContextMenuIds, ContextMenu> = {
+  [ContextMenuId.OpenInSideTrakt]: {
+    id: ContextMenuId.OpenInSideTrakt,
+    title: 'Open in side trakt',
+    contexts: ['selection'],
+  },
+} as const;

src/models/router.model.ts

@@ -0,0 +1,14 @@
+export const RouterStorageKey = {
+  LastRoute: 'app.state.last-route',
+} as const;
+
+export enum Route {
+  Calendar = 'calendar',
+  History = 'history',
+  Watchlist = 'watchlist',
+  Progress = 'progress',
+  Search = 'search',
+  Settings = 'settings',
+  About = 'about',
+  Login = 'login',
+}

src/router/create-router.ts

@@ -1,7 +1,8 @@
 import { createRouter as createVueRouter, createWebHashHistory, type LocationQueryRaw } from 'vue-router';
 
 import { isLoginAuthResponseSuccess } from '~/models/login/login-auth-response';
-import { Route, routes } from '~/router/routes';
+import { Route } from '~/models/router.model';
+import { routes } from '~/router/routes';
 import { TraktService } from '~/services/trakt.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useRouterStore, useRouterStoreRefs } from '~/stores/router.store';

src/router/routes.ts

@@ -1,15 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-export enum Route {
-  Calendar = 'calendar',
-  History = 'history',
-  Watchlist = 'watchlist',
-  Progress = 'progress',
-  Search = 'search',
-  Settings = 'settings',
-  About = 'about',
-  Login = 'login',
-}
+import { Route } from '~/models/router.model';
 
 const panelRoute = (base: Route, partial: Partial<RouteRecordRaw> = {}): RouteRecordRaw =>
   ({

src/scripts/background/index.ts

@@ -1,3 +1,37 @@
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { ContextMenuId, ContextMenus } from '~/models/context/context-menu.model';
+import { Route, RouterStorageKey } from '~/models/router.model';
+import { action } from '~/utils/browser/borwser-action.utils';
+import { context } from '~/utils/browser/browser-context.utils';
+import { runtime } from '~/utils/browser/browser-runtime.utils';
+import { storage } from '~/utils/browser/browser-storage.utils';
+import { createTab } from '~/utils/browser/browser.utils';
+
 export {};
 
 console.debug('Background script started');
+
+runtime?.onInstalled.addListener(async () => {
+  if (!context) return;
+  await Promise.all(Object.values(ContextMenus).map(m => context!.create(m)));
+
+  context.onClicked.addListener(async info => {
+    if (!context || !runtime) return;
+    if (info.menuItemId !== ContextMenuId.OpenInSideTrakt) return;
+    if (!info?.selectionText) return;
+
+    await storage.local.set(RouterStorageKey.LastRoute, {
+      name: Route.Search,
+      query: { search: info.selectionText },
+    } satisfies Partial<RouteLocationNormalized>);
+
+    if (action?.openPopup) {
+      await action.openPopup();
+    } else {
+      await createTab({
+        url: runtime.getURL('views/options/index.html'),
+      });
+    }
+  });
+});

src/services/loading-bar.service.ts

@@ -17,21 +17,21 @@ export class LoadingBarService {
   }
 
   static start() {
-    if (!this.instance) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.start) logger.warn('LoadingBarService instance is not initialized');
     this.instance.start();
     this.loading.value = true;
   }
 
   static finish() {
     if (!this.isLoading) return;
-    if (!this.instance) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.finish) logger.warn('LoadingBarService instance is not initialized');
     this.instance.finish();
     this.loading.value = false;
   }
 
   static error() {
     if (!this.isLoading) return;
-    if (!this.instance) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.error) logger.warn('LoadingBarService instance is not initialized');
     this.instance.error();
     this.loading.value = false;
   }

src/stores/router.store.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 
 import type { RouteLocationNormalized } from 'vue-router';
 
+import { RouterStorageKey } from '~/models/router.model';
 import { storage } from '~/utils/browser/browser-storage.utils';
 
 const parseQuery = (location: Location) => {
@@ -28,11 +29,11 @@ export const useRouterStore = defineStore('router', () => {
     if (lastRoute.value?.name === _route.name) return;
     lastRoute.value = _route;
     const { matched, ...jsonSafeRoute } = _route;
-    return storage.local.set('app.state.last-route', jsonSafeRoute);
+    return storage.local.set(RouterStorageKey.LastRoute, jsonSafeRoute);
   };
 
   const restoreLastRoute = async () => {
-    const _route = await storage.local.get<RouteLocationNormalized>('app.state.last-route');
+    const _route = await storage.local.get<RouteLocationNormalized>(RouterStorageKey.LastRoute);
     if (_route) lastRoute.value = _route;
     return _route;
   };

src/stores/settings/extension.store.ts

@@ -1,7 +1,7 @@
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref, toRaw } from 'vue';
 
-import { Route } from '~/router';
+import { Route } from '~/models/router.model';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
 import { storage } from '~/utils/browser/browser-storage.utils';

src/stores/settings/use-logout.ts

@@ -1,6 +1,6 @@
 import { useRouter } from 'vue-router';
 
-import { Route } from '~/router';
+import { Route } from '~/models/router.model';
 import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { defaultUser, useUserSettingsStore, useUserSettingsStoreRefs } from '~/stores/settings/user.store';

src/utils/browser/borwser-action.utils.ts

@@ -0,0 +1 @@
+export const action: typeof chrome.action | undefined = globalThis?.chrome?.action;

src/utils/browser/browser-context.utils.ts

@@ -0,0 +1,4 @@
+/**
+ * Browser context alias
+ */
+export const context: typeof chrome.contextMenus | undefined = globalThis?.chrome?.contextMenus;

src/utils/browser/browser-i18n.utils.ts

@@ -18,7 +18,7 @@ export const i18nTranslate = (value: string | BrowserI18nInput, ...modules: stri
     key = path ? `${path}__${value.key}` : value.key;
     substitution = value?.substitutions;
   }
-  return window?.chrome?.i18n.getMessage?.(key, substitution) || key;
+  return globalThis?.chrome?.i18n.getMessage?.(key, substitution) || key;
 };
 
 /**

src/utils/browser/browser-runtime.utils.ts

@@ -0,0 +1,4 @@
+/**
+ * Runtime alias
+ */
+export const runtime: typeof chrome.runtime | undefined = globalThis?.chrome?.runtime;

src/utils/browser/browser-storage.utils.ts

@@ -3,17 +3,17 @@ import type { RecursiveRecord } from '~/utils/typescript.utils';
 /**
  * @see [chrome.storage.sync](https://developer.chrome.com/docs/extensions/reference/storage/#type-SyncStorageArea)
  */
-export const syncStorage: chrome.storage.SyncStorageArea = window?.chrome?.storage?.sync;
+export const syncStorage: chrome.storage.SyncStorageArea | undefined = globalThis?.chrome?.storage?.sync;
 
 /**
  * @see [chrome.storage.local](https://developer.chrome.com/docs/extensions/reference/storage/#type-LocalStorageArea)
  */
-export const localStorage: chrome.storage.LocalStorageArea = window?.chrome?.storage?.local;
+export const localStorage: chrome.storage.LocalStorageArea | undefined = globalThis?.chrome?.storage?.local;
 
 /**
  * @see [chrome.storage.session](https://developer.chrome.com/docs/extensions/reference/storage/#type-StorageArea)
  */
-export const sessionStorage: chrome.storage.StorageArea = window?.chrome?.storage?.session;
+export const sessionStorage: chrome.storage.StorageArea | undefined = globalThis?.chrome?.storage?.session;
 
 const filterObject = (object: Record<string, unknown>, regex: string | RegExp) =>
   Object.fromEntries(Object.entries(object).filter(([key]) => (typeof regex === 'string' ? new RegExp(regex) : regex).test(key)));
@@ -27,7 +27,7 @@ const reverseFilterObject = (object: Record<string, unknown>, regex: string | Re
  * @param name The name of the storage area.
  */
 export const storageWrapper = (area: chrome.storage.StorageArea, name: string) => {
-  if (!window?.chrome?.storage) {
+  if (!globalThis?.chrome?.storage) {
     console.warn('Storage API is not available, using local storage instead.');
 
     const storage = {

src/utils/browser/browser.utils.ts

@@ -10,19 +10,19 @@ const openTab = (options: chrome.tabs.CreateProperties) => window.open(options.u
 /**
  * @see [chrome.tabs.create](https://developer.chrome.com/docs/extensions/reference/tabs/#method-create)
  */
-export const createTab = (options: chrome.tabs.CreateProperties) => (window?.chrome?.tabs?.create ?? openTab)(options);
+export const createTab = (options: chrome.tabs.CreateProperties) => (globalThis?.chrome?.tabs?.create ?? openTab)(options);
 
 /**
  * The ID of the current extension.
  * @see [chrome.runtime.id](https://developer.chrome.com/docs/extensions/reference/runtime/#property-id)
  */
-export const chromeRuntimeId: typeof chrome.runtime.id = window?.chrome?.runtime?.id;
+export const chromeRuntimeId: typeof chrome.runtime.id | undefined = globalThis?.chrome?.runtime?.id;
 
 /**
  * The i18n API for the current browser.
  * @see [chrome.i18n](https://developer.chrome.com/docs/extensions/reference/i18n/)
  */
-export const chromeI18n: typeof chrome.i18n = window?.chrome?.i18n;
+export const chromeI18n: typeof chrome.i18n | undefined = globalThis?.chrome?.i18n;
 
 /**
  * Returns the short locale (ISO 639-1) of the current browser.