feat: add initial chrome.contextMenus impl

samuelmaddock · samuelmaddock · commit 3ef27c181d54 · 2020-09-22T06:30:42.000-04:00
diff --git a/packages/electron-chrome-extensions/src/browser/api-state.ts b/packages/electron-chrome-extensions/src/browser/api-state.ts
@@ -12,6 +12,6 @@ export class ExtensionAPIState {
   }
 
   getTabById(tabId: number) {
-    return Array.from(this.tabs).find((tab) => tab.id === tabId)
+    return Array.from(this.tabs).find((tab) => !tab.isDestroyed() && tab.id === tabId)
   }
 }
diff --git a/packages/electron-chrome-extensions/src/browser/api/browser-action.ts b/packages/electron-chrome-extensions/src/browser/api/browser-action.ts
@@ -1,6 +1,6 @@
-import { session, ipcMain, nativeImage } from 'electron'
+import { session, ipcMain } from 'electron'
 import { EventEmitter } from 'events'
-import * as path from 'path'
+import { getIconImage } from './common'
 
 interface ExtensionAction {
   backgroundColor?: string
@@ -71,22 +71,6 @@ export class BrowserActionAPI extends EventEmitter {
     return action
   }
 
-  private processIcon(extension: Electron.Extension) {
-    const { browser_action } = extension.manifest
-    const { default_icon } = browser_action
-
-    if (typeof default_icon === 'string') {
-      const iconPath = path.join(extension.path, default_icon)
-      const image = nativeImage.createFromPath(iconPath)
-      return image.toDataURL()
-    } else if (typeof default_icon === 'object') {
-      const key = Object.keys(default_icon).pop() as any
-      const iconPath = path.join(extension.path, default_icon[key])
-      const image = nativeImage.createFromPath(iconPath)
-      return image.toDataURL()
-    }
-  }
-
   getPopupPath(session: Electron.Session, extensionId: string, tabId: string) {
     const action = this.getAction(session, extensionId)
     return action.tabs[tabId]?.popup?.path
@@ -101,8 +85,8 @@ export class BrowserActionAPI extends EventEmitter {
 
         action.title = browser_action.default_title || manifest.name
 
-        const icon = this.processIcon(extension)
-        if (icon) action.icon = icon
+        const iconImage = getIconImage(extension)
+        if (iconImage) action.icon = iconImage.toDataURL()
       }
     }
 
diff --git a/packages/electron-chrome-extensions/src/browser/api/common.ts b/packages/electron-chrome-extensions/src/browser/api/common.ts
@@ -1,4 +1,5 @@
-import { BrowserWindow } from 'electron'
+import * as path from 'path'
+import { BrowserWindow, nativeImage } from 'electron'
 
 export interface TabContents extends Electron.WebContents {
   favicon?: string
@@ -14,3 +15,22 @@ export const getParentWindowOfTab = (tab: TabContents): BrowserWindow | null =>
   }
   return null
 }
+
+export const getIconPath = (extension: Electron.Extension) => {
+  const { browser_action } = extension.manifest
+  const { default_icon } = browser_action
+
+  if (typeof default_icon === 'string') {
+    const iconPath = path.join(extension.path, default_icon)
+    return iconPath
+  } else if (typeof default_icon === 'object') {
+    const key = Object.keys(default_icon).pop() as any
+    const iconPath = path.join(extension.path, default_icon[key])
+    return iconPath
+  }
+}
+
+export const getIconImage = (extension: Electron.Extension) => {
+  const iconPath = getIconPath(extension)
+  return iconPath && nativeImage.createFromPath(iconPath)
+}
diff --git a/packages/electron-chrome-extensions/src/browser/api/context-menus.ts b/packages/electron-chrome-extensions/src/browser/api/context-menus.ts
@@ -1,28 +1,119 @@
-import { ipcMain } from 'electron'
+import { app, ipcMain, Menu, MenuItem } from 'electron'
 import { EventEmitter } from 'events'
+import { MenuItemConstructorOptions } from 'electron/main'
+import { ExtensionAPIState } from '../api-state'
+import { getIconPath } from './common'
+
+type ContextItemProps = chrome.contextMenus.CreateProperties
+
+type ContextType =
+  | 'all'
+  | 'page'
+  | 'frame'
+  | 'selection'
+  | 'link'
+  | 'editable'
+  | 'image'
+  | 'video'
+  | 'audio'
+  | 'launcher'
+  | 'browser_action'
+  | 'page_action'
+  | 'action'
+
+const getContextTypesFromParams = (params: Electron.ContextMenuParams): Set<ContextType> => {
+  const contexts = new Set<ContextType>(['all'])
+
+  switch (params.mediaType) {
+    case 'audio':
+    case 'video':
+    case 'image':
+      contexts.add(params.mediaType)
+  }
+
+  if (params.pageURL) contexts.add('page')
+  if (params.linkURL) contexts.add('link')
+  if (params.frameURL) contexts.add('frame')
+  if (params.selectionText) contexts.add('selection')
+  if (params.isEditable) contexts.add('editable')
+
+  return contexts
+}
 
 export class ContextMenusAPI extends EventEmitter {
-  private menus = new Map</* extensionId */ string, any>()
+  private menus = new Map<
+    /* extensionId */ string,
+    Map</* menuItemId */ string, ContextItemProps>
+  >()
 
-  constructor() {
+  constructor(private state: ExtensionAPIState) {
     super()
 
     ipcMain.handle('contextMenus.create', this.create)
+    ipcMain.handle('contextMenus.remove', this.remove)
+    ipcMain.handle('contextMenus.removeAll', this.removeAll)
+
+    this.state.session.on('extension-unloaded' as any, (event, extensionId) => {
+      if (this.menus.has(extensionId)) {
+        this.menus.delete(extensionId)
+      }
+    })
   }
 
-  private addContextItem(extensionId: string, item: any) {
+  private addContextItem(extensionId: string, props: ContextItemProps) {
     let contextItems = this.menus.get(extensionId)
     if (!contextItems) {
-      contextItems = []
+      contextItems = new Map()
       this.menus.set(extensionId, contextItems)
     }
-    contextItems.push(item)
+    contextItems.set(props.id!, props)
+  }
+
+  buildMenuItems(params: Electron.ContextMenuParams) {
+    const buildMenuItem = (extension: Electron.Extension, props: ContextItemProps) => {
+      const menuItemOptions: MenuItemConstructorOptions = {
+        id: props.id,
+        type: props.type as any,
+        label: props.title,
+        icon: getIconPath(extension),
+        click: () => {
+          // TODO
+          this.onClicked({} as any, {})
+        },
+      }
+      const menuItem = new MenuItem(menuItemOptions)
+      return menuItem
+    }
+
+    const menuItems = []
+    const contextTypes = getContextTypesFromParams(params)
+
+    for (const [extensionId, propItems] of this.menus) {
+      const extension = this.state.session.getExtension(extensionId)
+      if (!extension) continue
+
+      for (const [, props] of propItems) {
+        if (props.enabled === false) continue
+
+        if (props.contexts) {
+          const inContext = props.contexts.some((context) =>
+            contextTypes.has(context as ContextType)
+          )
+          if (!inContext) continue
+        }
+
+        const menuItem = buildMenuItem(extension, props)
+        menuItems.push(menuItem)
+      }
+    }
+
+    return menuItems
   }
 
   private create = (
     event: Electron.IpcMainInvokeEvent,
     extensionId: string,
-    createProperties: chrome.contextMenus.CreateProperties
+    createProperties: ContextItemProps
   ) => {
     const { id, type, title } = createProperties
 
@@ -42,4 +133,26 @@ export class ContextMenusAPI extends EventEmitter {
       this.addContextItem(extensionId, createProperties)
     }
   }
+
+  private remove = (
+    event: Electron.IpcMainInvokeEvent,
+    extensionId: string,
+    menuItemId: string
+  ) => {
+    const items = this.menus.get(extensionId)
+    if (items && items.has(menuItemId)) {
+      items.delete(menuItemId)
+      if (items.size === 0) {
+        this.menus.delete(extensionId)
+      }
+    }
+  }
+
+  private removeAll = (event: Electron.IpcMainInvokeEvent, extensionId: string) => {
+    this.menus.delete(extensionId)
+  }
+
+  private onClicked(info: chrome.contextMenus.OnClickData, tab: any) {
+    this.state.sendToHosts('tabs.onCreated', info, tab)
+  }
 }
diff --git a/packages/electron-chrome-extensions/src/browser/index.ts b/packages/electron-chrome-extensions/src/browser/index.ts
@@ -13,14 +13,15 @@ export class Extensions {
   state: ExtensionAPIState
 
   browserAction = new BrowserActionAPI()
-  contextMenus = new ContextMenusAPI()
+  contextMenus: ContextMenusAPI
   tabs: TabsAPI
   webNavigation: WebNavigationAPI
   windows: WindowsAPI
 
   constructor(session: Electron.Session) {
     this.state = new ExtensionAPIState(session)
 
+    this.contextMenus = new ContextMenusAPI(this.state)
     this.tabs = new TabsAPI(this.state)
     this.webNavigation = new WebNavigationAPI(this.state)
     this.windows = new WindowsAPI(this.state)
diff --git a/packages/electron-chrome-extensions/src/index.ts b/packages/electron-chrome-extensions/src/index.ts
@@ -1 +1 @@
-export * from './browser'
+export * from './browser'
diff --git a/packages/electron-chrome-extensions/src/preload.ts b/packages/electron-chrome-extensions/src/preload.ts
@@ -1,6 +1,6 @@
-import { injectExtensionAPIs } from './renderer'
-
-// Only load within extension page context
-if (location.href.startsWith('chrome-extension://')) {
-  injectExtensionAPIs()
-}
+import { injectExtensionAPIs } from './renderer'
+
+// Only load within extension page context
+if (location.href.startsWith('chrome-extension://')) {
+  injectExtensionAPIs()
+}
diff --git a/packages/electron-chrome-extensions/src/renderer/index.ts b/packages/electron-chrome-extensions/src/renderer/index.ts
@@ -174,25 +174,37 @@ export const injectExtensionAPIs = () => {
     })
 
     let menuCounter = 0
+    const menuCallbacks: { [key: string]: chrome.contextMenus.CreateProperties['onclick'] } = {}
     const menuCreate = invokeExtension('contextMenus.create', { extensionId })
 
     const contextMenus: Partial<typeof chrome.contextMenus> = {
+      ...chrome.contextMenus,
       create: function (
         createProperties: chrome.contextMenus.CreateProperties,
         callback?: Function
       ) {
         if (typeof createProperties.id === 'undefined') {
           createProperties.id = `${++menuCounter}`
         }
+        if (createProperties.onclick) {
+          menuCallbacks[createProperties.id] = createProperties.onclick
+          delete createProperties.onclick
+        }
         menuCreate(createProperties, callback)
         return createProperties.id
       },
       update: invokeExtension('contextMenus.update', { noop: true }),
-      remove: invokeExtension('contextMenus.remove', { noop: true }),
-      removeAll: invokeExtension('contextMenus.removeAll', { noop: true }),
+      remove: invokeExtension('contextMenus.remove', { extensionId }),
+      removeAll: invokeExtension('contextMenus.removeAll', { extensionId }),
       onClicked: new ExtensionEvent('contextMenus.onClicked'),
     }
 
+    contextMenus.onClicked?.addListener((info, tab) => {
+      // TODO: test this
+      const callback = menuCallbacks[info.menuItemId]
+      if (callback && tab) callback(info, tab)
+    })
+
     const tabs: Partial<typeof chrome.tabs> = {
       ...chrome.tabs,
       create: invokeExtension('tabs.create'),
diff --git a/packages/shell/browser/main.js b/packages/shell/browser/main.js
@@ -1,6 +1,6 @@
 const path = require('path')
 const { promises: fs } = require('fs')
-const { app, session, ipcMain, BrowserWindow, BrowserView } = require('electron')
+const { app, session, BrowserWindow, Menu, MenuItem, clipboard } = require('electron')
 
 const { Tabs } = require('./tabs')
 const { Extensions } = require('electron-chrome-extensions')
@@ -255,6 +255,65 @@ class Browser {
     return win
   }
 
+  createContextMenu(webContents, params) {
+    const menu = new Menu()
+
+    const win = this.getFocusedWindow()
+
+    if (params.linkURL) {
+      menu.append(new MenuItem({
+        label: 'Open link in new tab',
+        click: () => {
+          const tab = win.tabs.create()
+          tab.loadURL(params.linkURL)
+        }
+      }))
+      menu.append(new MenuItem({
+        label: 'Open link in new window',
+        click: () => {
+          this.createWindow({ initialUrl: params.linkURL })
+        }
+      }))
+    } else if (params.selectionText) {
+      menu.append(new MenuItem({
+        label: 'Copy',
+        click: () => {
+          clipboard.writeText(params.selectionText)
+        }
+      }))
+    } else {
+      menu.append(new MenuItem({
+        label: 'Back',
+        enabled: webContents.canGoBack(),
+        click: () => webContents.goBack()
+      }))
+      menu.append(new MenuItem({
+        label: 'Forward',
+        enabled: webContents.canGoForward(),
+        click: () => webContents.goForward()
+      }))
+      menu.append(new MenuItem({
+        label: 'Reload',
+        click: () => webContents.reload()
+      }))
+    }
+
+    menu.append(new MenuItem({ type: 'separator' }))
+
+    const items = this.extensions.contextMenus.buildMenuItems(params)
+    items.forEach((item) => menu.append(item))
+    if (items.length > 0) menu.append(new MenuItem({ type: 'separator' }))
+
+    menu.append(new MenuItem({
+      label: 'Inspect',
+      click: () => {
+        webContents.openDevTools()
+      }
+    }))
+    
+    menu.popup()
+  }
+
   async onWebContentsCreated(event, webContents) {
     const type = webContents.getType()
     const url = webContents.getURL()
@@ -283,6 +342,10 @@ class Browser {
           break
       }
     })
+
+    webContents.on('context-menu', (event, params) => {
+      this.createContextMenu(webContents, params)
+    })
   }
 }
 
diff --git a/packages/shell/browser/tabs.js b/packages/shell/browser/tabs.js

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,6 @@ export class ExtensionAPIState {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`getTabById(tabId: number) {`
`15`		`- return Array.from(this.tabs).find((tab) => tab.id === tabId)`
	`15`	`+ return Array.from(this.tabs).find((tab) => !tab.isDestroyed() && tab.id === tabId)`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './browser'`
	`1`	`+export * from './browser'`