chore: convert extension apis to TypeScript (#18688)

Converts extensions-related files to TS

filenames.auto.gni

@@ -134,10 +134,10 @@ auto_filenames = {
     "lib/renderer/callbacks-registry.js",
     "lib/renderer/chrome-api.ts",
     "lib/renderer/content-scripts-injector.ts",
-    "lib/renderer/extensions/event.js",
-    "lib/renderer/extensions/i18n.js",
-    "lib/renderer/extensions/storage.js",
-    "lib/renderer/extensions/web-navigation.js",
+    "lib/renderer/extensions/event.ts",
+    "lib/renderer/extensions/i18n.ts",
+    "lib/renderer/extensions/storage.ts",
+    "lib/renderer/extensions/web-navigation.ts",
     "lib/renderer/inspector.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",
     "lib/renderer/ipc-renderer-internal.ts",
@@ -174,10 +174,10 @@ auto_filenames = {
     "lib/common/error-utils.js",
     "lib/content_script/init.js",
     "lib/renderer/chrome-api.ts",
-    "lib/renderer/extensions/event.js",
-    "lib/renderer/extensions/i18n.js",
-    "lib/renderer/extensions/storage.js",
-    "lib/renderer/extensions/web-navigation.js",
+    "lib/renderer/extensions/event.ts",
+    "lib/renderer/extensions/i18n.ts",
+    "lib/renderer/extensions/storage.ts",
+    "lib/renderer/extensions/web-navigation.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",
     "lib/renderer/ipc-renderer-internal.ts",
     "lib/renderer/window-setup.ts",
@@ -294,10 +294,10 @@ auto_filenames = {
     "lib/renderer/callbacks-registry.js",
     "lib/renderer/chrome-api.ts",
     "lib/renderer/content-scripts-injector.ts",
-    "lib/renderer/extensions/event.js",
-    "lib/renderer/extensions/i18n.js",
-    "lib/renderer/extensions/storage.js",
-    "lib/renderer/extensions/web-navigation.js",
+    "lib/renderer/extensions/event.ts",
+    "lib/renderer/extensions/i18n.ts",
+    "lib/renderer/extensions/storage.ts",
+    "lib/renderer/extensions/web-navigation.ts",
     "lib/renderer/init.ts",
     "lib/renderer/inspector.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",

lib/renderer/chrome-api.ts

@@ -2,8 +2,7 @@ import { ipcRendererInternal } from '@electron/internal/renderer/ipc-renderer-in
 import * as ipcRendererUtils from '@electron/internal/renderer/ipc-renderer-internal-utils'
 import * as url from 'url'
 
-// Todo: Import once extensions have been turned into TypeScript
-const Event = require('@electron/internal/renderer/extensions/event')
+import { Event } from '@electron/internal/renderer/extensions/event'
 
 class Tab {
   public id: number

lib/renderer/extensions/event.ts

@@ -1,26 +1,20 @@
-'use strict'
+export class Event {
+  private listeners: Function[] = []
 
-class Event {
-  constructor () {
-    this.listeners = []
-  }
-
-  addListener (callback) {
+  addListener (callback: Function) {
     this.listeners.push(callback)
   }
 
-  removeListener (callback) {
+  removeListener (callback: Function) {
     const index = this.listeners.indexOf(callback)
     if (index !== -1) {
       this.listeners.splice(index, 1)
     }
   }
 
-  emit (...args) {
+  emit (...args: any[]) {
     for (const listener of this.listeners) {
       listener(...args)
     }
   }
 }
-
-module.exports = Event

lib/renderer/extensions/i18n.ts

@@ -1,41 +1,41 @@
-'use strict'
-
 // Implementation of chrome.i18n.getMessage
 // https://developer.chrome.com/extensions/i18n#method-getMessage
 //
 // Does not implement predefined messages:
 // https://developer.chrome.com/extensions/i18n#overview-predefined
 
-const ipcRendererUtils = require('@electron/internal/renderer/ipc-renderer-internal-utils')
+import * as ipcRendererUtils from '@electron/internal/renderer/ipc-renderer-internal-utils'
 
-const getMessages = (extensionId) => {
+interface Placeholder {
+  content: string;
+  example?: string;
+}
+
+const getMessages = (extensionId: number) => {
   try {
-    const data = ipcRendererUtils.invokeSync('CHROME_GET_MESSAGES', extensionId)
+    const data = ipcRendererUtils.invokeSync<string>('CHROME_GET_MESSAGES', extensionId)
     return JSON.parse(data) || {}
   } catch {
     return {}
   }
 }
 
-const replaceNumberedSubstitutions = (message, substitutions) => {
+const replaceNumberedSubstitutions = (message: string, substitutions: string[]) => {
   return message.replace(/\$(\d+)/, (_, number) => {
     const index = parseInt(number, 10) - 1
     return substitutions[index] || ''
   })
 }
 
-const replacePlaceholders = (message, placeholders, substitutions) => {
-  if (typeof substitutions === 'string') {
-    substitutions = [substitutions]
-  }
-  if (!Array.isArray(substitutions)) {
-    substitutions = []
-  }
+const replacePlaceholders = (message: string, placeholders: Record<string, Placeholder>, substitutions: string[] | string) => {
+  if (typeof substitutions === 'string') substitutions = [substitutions]
+  if (!Array.isArray(substitutions)) substitutions = []
 
   if (placeholders) {
-    Object.keys(placeholders).forEach((name) => {
+    Object.keys(placeholders).forEach((name: string) => {
       let { content } = placeholders[name]
-      content = replaceNumberedSubstitutions(content, substitutions)
+      const substitutionsArray = Array.isArray(substitutions) ? substitutions : []
+      content = replaceNumberedSubstitutions(content, substitutionsArray)
       message = message.replace(new RegExp(`\\$${name}\\$`, 'gi'), content)
     })
   }
@@ -43,7 +43,7 @@ const replacePlaceholders = (message, placeholders, substitutions) => {
   return replaceNumberedSubstitutions(message, substitutions)
 }
 
-const getMessage = (extensionId, messageName, substitutions) => {
+const getMessage = (extensionId: number, messageName: string, substitutions: string[]) => {
   const messages = getMessages(extensionId)
   if (messages.hasOwnProperty(messageName)) {
     const { message, placeholders } = messages[messageName]
@@ -51,9 +51,9 @@ const getMessage = (extensionId, messageName, substitutions) => {
   }
 }
 
-exports.setup = (extensionId) => {
+exports.setup = (extensionId: number) => {
   return {
-    getMessage (messageName, substitutions) {
+    getMessage (messageName: string, substitutions: string[]) {
       return getMessage(extensionId, messageName, substitutions)
     }
   }

lib/renderer/extensions/storage.ts

@@ -1,11 +1,9 @@
-'use strict'
+import * as ipcRendererUtils from '@electron/internal/renderer/ipc-renderer-internal-utils'
 
-const ipcRendererUtils = require('@electron/internal/renderer/ipc-renderer-internal-utils')
-
-const getStorage = (storageType, extensionId, callback) => {
+const getStorage = (storageType: string, extensionId: number, callback: Function) => {
   if (typeof callback !== 'function') throw new TypeError('No callback provided')
 
-  ipcRendererUtils.invoke('CHROME_STORAGE_READ', storageType, extensionId)
+  ipcRendererUtils.invoke<string>('CHROME_STORAGE_READ', storageType, extensionId)
     .then(data => {
       if (data !== null) {
         callback(JSON.parse(data))
@@ -17,7 +15,7 @@ const getStorage = (storageType, extensionId, callback) => {
     })
 }
 
-const setStorage = (storageType, extensionId, storage, callback) => {
+const setStorage = (storageType: string, extensionId: number, storage: Record<string, any>, callback: Function) => {
   const json = JSON.stringify(storage)
   ipcRendererUtils.invoke('CHROME_STORAGE_WRITE', storageType, extensionId, json)
     .then(() => {
@@ -25,13 +23,13 @@ const setStorage = (storageType, extensionId, storage, callback) => {
     })
 }
 
-const getStorageManager = (storageType, extensionId) => {
+const getStorageManager = (storageType: string, extensionId: number) => {
   return {
-    get (keys, callback) {
-      getStorage(storageType, extensionId, storage => {
+    get (keys: string[], callback: Function) {
+      getStorage(storageType, extensionId, (storage: Record<string, any>) => {
         if (keys == null) return callback(storage)
 
-        let defaults = {}
+        let defaults: Record<string, any> = {}
         switch (typeof keys) {
           case 'string':
             keys = [keys]
@@ -48,8 +46,8 @@ const getStorageManager = (storageType, extensionId) => {
         // eslint-disable-next-line standard/no-callback-literal
         if (keys.length === 0) return callback({})
 
-        const items = {}
-        keys.forEach(function (key) {
+        const items: Record<string, any> = {}
+        keys.forEach((key: string) => {
           let value = storage[key]
           if (value == null) value = defaults[key]
           items[key] = value
@@ -58,22 +56,17 @@ const getStorageManager = (storageType, extensionId) => {
       })
     },
 
-    set (items, callback) {
-      getStorage(storageType, extensionId, storage => {
-        Object.keys(items).forEach(function (name) {
-          storage[name] = items[name]
-        })
-
+    set (items: Record<string, any>, callback: Function) {
+      getStorage(storageType, extensionId, (storage: Record<string, any>) => {
+        Object.keys(items).forEach(name => { storage[name] = items[name] })
         setStorage(storageType, extensionId, storage, callback)
       })
     },
 
-    remove (keys, callback) {
-      getStorage(storageType, extensionId, storage => {
-        if (!Array.isArray(keys)) {
-          keys = [keys]
-        }
-        keys.forEach(function (key) {
+    remove (keys: string[], callback: Function) {
+      getStorage(storageType, extensionId, (storage: Record<string, any>) => {
+        if (!Array.isArray(keys)) keys = [keys]
+        keys.forEach((key: string) => {
           delete storage[key]
         })
 
@@ -81,15 +74,13 @@ const getStorageManager = (storageType, extensionId) => {
       })
     },
 
-    clear (callback) {
+    clear (callback: Function) {
       setStorage(storageType, extensionId, {}, callback)
     }
   }
 }
 
-module.exports = {
-  setup: extensionId => ({
-    sync: getStorageManager('sync', extensionId),
-    local: getStorageManager('local', extensionId)
-  })
-}
+export const setup = (extensionId: number) => ({
+  sync: getStorageManager('sync', extensionId),
+  local: getStorageManager('local', extensionId)
+})

lib/renderer/extensions/web-navigation.ts

@@ -1,23 +1,20 @@
-'use strict'
-
-const Event = require('@electron/internal/renderer/extensions/event')
+import { Event } from '@electron/internal/renderer/extensions/event'
+import { IpcMainEvent } from 'electron'
 const { ipcRendererInternal } = require('@electron/internal/renderer/ipc-renderer-internal')
 
 class WebNavigation {
-  constructor () {
-    this.onBeforeNavigate = new Event()
-    this.onCompleted = new Event()
+  private onBeforeNavigate = new Event()
+  private onCompleted = new Event()
 
-    ipcRendererInternal.on('CHROME_WEBNAVIGATION_ONBEFORENAVIGATE', (event, details) => {
+  constructor () {
+    ipcRendererInternal.on('CHROME_WEBNAVIGATION_ONBEFORENAVIGATE', (event: IpcMainEvent, details: any) => {
       this.onBeforeNavigate.emit(details)
     })
 
-    ipcRendererInternal.on('CHROME_WEBNAVIGATION_ONCOMPLETED', (event, details) => {
+    ipcRendererInternal.on('CHROME_WEBNAVIGATION_ONCOMPLETED', (event: IpcMainEvent, details: any) => {
       this.onCompleted.emit(details)
     })
   }
 }
 
-exports.setup = () => {
-  return new WebNavigation()
-}
+export const setup = () => new WebNavigation()