chore: move usage of chrome functions to browser

Rue-pro · Apr 9, 2024 · ededbf6 · ededbf6
1 parent 9ece31d
commit ededbf6
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 12 deletions.
diff --git a/src/app/background/features/addNewWord/index.ts b/src/app/background/features/addNewWord/index.ts
@@ -1,17 +1,17 @@
 import { TLanguageCode, getLanguageCodeByPageUrl } from '@entities/language'
 import { noteStore } from '@entities/note'
 
-import { browser } from '@shared/browser'
+import { TOnClickContextMenuInfoProps, browser } from '@shared/browser'
 
 export const addNewWord = (parentId: string) => {
-  chrome.contextMenus.create({
+  browser.contextMenus.create({
     title: 'CONTEXT_MENU_ADD_NEW_WORD',
     id: 'new_word',
     parentId: parentId,
     contexts: ['selection'],
   })
 
-  const handleClick = async (info: chrome.contextMenus.OnClickData) => {
+  const handleClick = async (info: TOnClickContextMenuInfoProps) => {
     if (info.menuItemId === 'new_word') {
       let finalLanguageCode: TLanguageCode = 'other'
       const languageCode = getLanguageCodeByPageUrl(info.pageUrl)
@@ -27,5 +27,5 @@ export const addNewWord = (parentId: string) => {
     }
   }
 
-  chrome.contextMenus.onClicked.addListener(handleClick)
+  browser.contextMenus.onClicked.addListener(handleClick)
 }
diff --git a/src/app/background/features/autoAddNewNote/ui.tsx b/src/app/background/features/autoAddNewNote/ui.tsx
@@ -9,7 +9,12 @@ import {
 import { errorStore } from '@entities/error'
 import { noteStore } from '@entities/note'
 
-import { PortEmitter } from '@shared/browser'
+import {
+  PortEmitter,
+  TOnClickContextMenuInfoProps,
+  TOnClickContextMenuTabProps,
+  browser,
+} from '@shared/browser'
 
 import {
   getLanguageFromPage,
@@ -23,7 +28,7 @@ import {
 const $dictionaryPorts = map<Record<string, PortEmitter>>()
 
 export const autoAddNewNote = (parentId: string) => {
-  chrome.contextMenus.create({
+  browser.contextMenus.create({
     title: 'CONTEXT_MENU_ADD_NOTE_AUTOMATICALLY',
     id: 'auto_new_note',
     parentId: parentId,
@@ -32,8 +37,8 @@ export const autoAddNewNote = (parentId: string) => {
   })
 
   const handleClick = async (
-    info: chrome.contextMenus.OnClickData,
-    tab?: chrome.tabs.Tab,
+    info: TOnClickContextMenuInfoProps,
+    tab?: TOnClickContextMenuTabProps,
   ) => {
     if (info.menuItemId === 'auto_new_note') {
       if (!tab?.id) return
@@ -87,7 +92,7 @@ export const autoAddNewNote = (parentId: string) => {
     }
   }
 
-  chrome.contextMenus.onClicked.addListener(handleClick)
+  browser.contextMenus.onClicked.addListener(handleClick)
 }
 
 function createDictionaryPort(

diff --git a/src/app/background/index.ts b/src/app/background/index.ts
@@ -1,12 +1,14 @@
 import { $notes } from '@entities/note/model/store'
 
+import { browser } from '@shared/browser'
+
 import { addNewWord } from './features/addNewWord'
 import { autoAddNewNote } from './features/autoAddNewNote'
 
 const PARENT_ID = 'CONTEXT_MENU_ROOT'
 
-chrome.contextMenus.removeAll(() => {
-  chrome.contextMenus.create({
+browser.contextMenus.removeAll(() => {
+  browser.contextMenus.create({
     title: 'CONTEXT_MENU_ROOT',
     id: PARENT_ID,
     contexts: ['page', 'selection'],

diff --git a/src/shared/browser/chrome.ts b/src/shared/browser/chrome.ts
@@ -139,4 +139,14 @@ export const chromeBrowser: IBrowser = {
       })
     },
   },
+
+  contextMenus: {
+    create: chrome.contextMenus.create,
+
+    onClicked: {
+      addListener: chrome.contextMenus.onClicked.addListener,
+    },
+
+    removeAll: chrome.contextMenus.removeAll,
+  },
 }
diff --git a/src/shared/browser/index.ts b/src/shared/browser/index.ts
@@ -3,5 +3,10 @@ import type { IBrowser } from './types'
 
 export const browser: IBrowser = chromeBrowser
 
-export type { TTab, TOnChangeListenerProps } from './types'
+export type {
+  TTab,
+  TOnChangeListenerProps,
+  TOnClickContextMenuInfoProps,
+  TOnClickContextMenuTabProps,
+} from './types'
 export * from './port'
diff --git a/src/shared/browser/types.ts b/src/shared/browser/types.ts
@@ -48,8 +48,53 @@ export interface IBrowser {
   tabs: {
     getActiveTab: () => Promise<TResult<TTab>>
   }
+
+  contextMenus: {
+    create: (menuConfig: IMenuConfig) => string | number
+
+    onClicked: {
+      addListener: (
+        callback: (
+          info: TOnClickContextMenuInfoProps,
+          tab?: Partial<TTab>,
+        ) => Promise<void> | void,
+      ) => void
+    }
+
+    removeAll: (callback: () => void) => void
+  }
 }
 
+type IMenuContextType =
+  | 'all'
+  | 'page'
+  | 'frame'
+  | 'selection'
+  | 'link'
+  | 'editable'
+  | 'image'
+  | 'video'
+  | 'audio'
+  | 'launcher'
+  | 'browser_action'
+  | 'page_action'
+  | 'action'
+
+type IMenuContextItemType = 'normal' | 'checkbox' | 'radio' | 'separator'
+export interface IMenuConfig {
+  title: string
+  id: string
+  contexts?: IMenuContextType[]
+  parentId?: string
+  type?: IMenuContextItemType
+  documentUrlPatterns?: string[]
+}
+export type TOnClickContextMenuInfoProps = {
+  menuItemId: string | number
+  selectionText?: string
+  pageUrl: string
+}
+export type TOnClickContextMenuTabProps = Partial<TTab>
 export type TTab = { id: number; url: string }
 export type TActiveTabInfo = { tabId: number }
 export type TOnChangeListenerProps<Value = unknown> = {